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

Question

我需要在页面中添加价格过滤器，我可以在其中选择价格范围

像这样在黎明主题示例中：

这是集合文件：

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

分面文件：

{%- 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
-%}

我需要添加什么？

Answer 1

Dawn 的价格范围过滤器基于 JavaScript，而不是 Liquid。

1. 该组件称为PriceRange ，它被定义为一个名为price-range的自定义元素。 你可以在这里找到它：https://github.com/Shopify/dawn/blob/main/assets/facets.js#L211
2. 它背后的液体代码在这里： 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

但是，这还不是全部，因为该组件中的逻辑仅处理其自己的 state。 更改输入时，您会注意到 URL 发生了变化：

https://****.myshopify.com/collections/bundle?filter.v.price.gte=5&filter.v.price.lte=11

price-range 在 facet-filters-form 下，它在同一个文件中有自己的逻辑：

这种特殊情况的调用堆栈可以在网络选项卡下的 chrome 开发工具面板中找到

FacetFiltersForm ：

1. form 监听变化：

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

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

2. 当“提交”发生时（基本上是任何输入更改）提交处理程序将使用 createSearchParams() function 构建查询字符串

3. 然后 submitForm 被触发：

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

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

4. 它将尝试使用获取的数据来渲染页面：

        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);
      });
  }

基本上你想复制所有方面的逻辑并根据你的需要进行调整