0
235
ViewsShopify how to add price filter to the page
I need to add price filter to the page, where i can chose price range
like this in dawn theme example
This is collection file
select id="sort-by-price">
{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
{% for option in collection.sort_options %}
<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
{{ option.name }}
</option>
{% endfor %}
</select>
facets file
{%- liquid
assign sort_by = results.sort_by | default: results.default_sort_by
assign total_active_values = 0
if results.url
assign results_url = results.url
else
assign terms = results.terms | escape
assign results_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
endif
-%}
what i need to add?
1 answers
Answer question0
Dawn's price range filter is based on JavaScript, not Liquid.
- The component is called
PriceRangeand it's defined as a custom element namedprice-range. You can find it here: https://github.com/Shopify/dawn/blob/main/assets/facets.js#L211 - The liquid code behind it is here: https://github.com/Shopify/dawn/blob/a8ded5267f8ecce6bb6757fc8b907bb93431b1aa/snippets/facets.liquid#L221
- CSS: https://github.com/Shopify/dawn/blob/main/assets/component-facets.css#L346
However, that's not all as the logic in that component only handles its own state. When changing inputs you will notice that the URL changes:
https://****.myshopify.com/collections/bundle?filter.v.price.gte=5&filter.v.price.lte=11
price-range is under facet-filters-form which has it's own logic in the same file:
Call Stack for this particular case can be found in chrome dev tools panel under network tab
FacetFiltersForm:
- form listens for changes:
facetForm.addEventListener('input', this.debouncedOnSubmit.bind(this));
this.debouncedOnSubmit = debounce((event) => {
this.onSubmitHandler(event);
}, 500);
When "submit" happens (which is basically any input change) submit handler will build a query string using the createSearchParams() function
Then submitForm is fired:
this.onSubmitForm(forms.join('&'), event)
onSubmitForm(searchParams, event) {
FacetFiltersForm.renderPage(searchParams, event);
}
- Which will attempt to renderPage using data fetched in:
FacetFiltersForm.renderSectionFromFetch(url, event);
static renderSectionFromFetch(url, event) {
fetch(url)
.then(response => response.text())
.then((responseText) => {
const html = responseText;
FacetFiltersForm.filterData = [...FacetFiltersForm.filterData, { html, url }];
FacetFiltersForm.renderFilters(html, event);
FacetFiltersForm.renderProductGridContainer(html);
FacetFiltersForm.renderProductCount(html);
});
}
Basically you want to copy all facets logic and adjust it to your needs