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

基本上你想復制所有方面的邏輯並根據你的需要進行調整