Shopify 如何在页面中添加价格过滤器

Question

I need to add a price filter to the page, where I can choose a price range

Like this in dawn theme example:

This is the 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 do i need to add?

Answer 1

Dawn's price range filter is based on JavaScript, not Liquid.

1. The component is called PriceRange and it's defined as a custom element named price-range . You can find it here:https://github.com/Shopify/dawn/blob/main/assets/facets.js#L211
2. The liquid code behind it is here: https://github.com/Shopify/dawn/blob/a8ded5267f8ecce6bb6757fc8b907bb93431b1aa/snippets/facets.liquid#L221
3. 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 :

1. form listens for changes:

    facetForm.addEventListener('input', this.debouncedOnSubmit.bind(this));

    this.debouncedOnSubmit = debounce((event) => {
      this.onSubmitHandler(event);
    }, 500);

2. When "submit" happens (which is basically any input change) submit handler will build a query string using the createSearchParams() function

3. Then submitForm is fired:

      this.onSubmitForm(forms.join('&'), event)

  onSubmitForm(searchParams, event) {
    FacetFiltersForm.renderPage(searchParams, event);
  }

4. 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