javascript - 如何使用 html select 元素的值对 Shopify Liquid 中的集合进行排序

Question

我有以下 html 选择元素:

<div class="sort-collection-by">
<label for="sort-by">Sort by</label> 
<select id="sort-by">
    <option value="manual">Featured</option>
    <option value="price-ascending">Price: Low to High</option>
    <option value="price-descending">Price: High to Low</option>
    <option value="title-ascending">A-Z</option>
    <option value="title-descending">Z-A</option>
    <option value="created-ascending">Oldest to Newest</option>
    <option value="created-descending">Newest to Oldest</option>
    <option value="best-selling">Best Selling</option>
</select>
</div>

我想在以下液体标记中使用所选选项，其中我已在其中指示了 SELECT_CHOICE_HERE。

{% assign sorted_products = collection.products | sort: SELECT_CHOICE_HERE %}
{% for product in sorted_products %}

我希望在选择元素值更改时立即执行排序操作。

感谢您的帮助。

Answer 1

Funk Doc's suggestion以下this Shopify tutorial这也是我推荐的。

This gist (来自上面的教程)展示了如何将事件处理程序绑定(bind)到 sort-by 下拉列表上的“change”事件，从而在下拉列表中的选定值发生变化时触发排序:

jQuery('#sort-by').bind('change', function() {
  Shopify.queryParams.sort_by = jQuery(this).val();
  location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
});

需要在 Javascript 中完成此操作的原因是 Liquid 是在服务器端呈现的，因此:

{% assign sorted_products = collection.products | sort: SELECT_CHOICE_HERE %}

...在用户有机会从下拉菜单中选择选项之前就已经渲染了。这里需要 JavaScript 来处理客户端的用户事件。