Shopify 自定义标签过滤

Question

我正在使用首次亮相的主题，并想添加自定义过滤名称，因此我可以按我的产品的颜色、类型等进行过滤，每个过滤器下都有选项。颜色 - 然后有蓝色、红色、绿色、黄色等。我四处寻找shopify代码，当我到达Javascript部分时，它似乎不起作用。

这是我目前在我的 collection-template.liquid 中拥有的：

<ul class="clearfix filters">
  <li class="clearfix filter">
    {% assign tags = 'Blue, Grey, Black' | split: ',' %}
    <label>Shop by color</label>
    <select class="coll-filter">
      <option value="">All</option>
      {% for t in tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}
      <option value="{{ tag | handle }}" selected>{{ tag }}</option>
      {% elsif collection.all_tags contains tag %}
      <option value="{{ tag | handle }}">{{ tag }}</option>
      {% endif %}
      {% endfor %}
    </select>
  </li>
  <li class="clearfix filter">
    {% assign tags = 'Mini, Textiles, Velvet' | split: ',' %}
    <label>Shop by Type</label>
    <select class="coll-filter">
      <option value="">All</option>
      {% for t in tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}
      <option value="{{ tag | handle }}" selected>{{ tag }}</option>
      {% elsif collection.all_tags contains tag %}
      <option value="{{ tag | handle }}">{{ tag }}</option>
      {% endif %}
      {% endfor %}
    </select>
  </li>
 <li class="clearfix filter">
    {% assign tags = 'Egyptian Cotton, Silk, Satin' | split: ',' %}
    <label>Shop by material</label>
    <select class="coll-filter">
      <option value="">All</option>
      {% for t in tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}
      <option value="{{ tag | handle }}" selected>{{ tag }}</option>
      {% elsif collection.all_tags contains tag %}
      <option value="{{ tag | handle }}">{{ tag }}</option>
      {% endif %}
      {% endfor %}
    </select>
  </li>
</ul>

然后是javascript部分：

<script>
  Shopify.queryParams = {};
  if (location.search.length) {
    for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
      aKeyValue = aCouples[i].split('=');
      if (aKeyValue.length > 1) {
        Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
      }
    }
  }
  var collFilters = jQuery('.coll-filter');
  collFilters.change(function() {
      var newTags = [];
      var newURL = '';
      collFilters.each(function() { 
        if (jQuery(this).val()) {
          newTags.push(jQuery(this).val());
        }
      });
      {% if collection.handle %}
      newURL = '/collections/' + '{{ collection.handle }}';
      if (newTags.length) {
        newURL += '/' + newTags.join('+');
      }
      var search = jQuery.param(Shopify.queryParams);
      if (search.length) {
        newURL += '?' + search;
      }
      location.href = newURL;    
      {% else %}
      if (newTags.length) {
        Shopify.queryParams.constraint = newTags.join('+');        
      }
      else {
        delete Shopify.queryParams.constraint;
      }
      location.search = jQuery.param(Shopify.queryParams);
      {% endif %}      
  });
  jQuery('.sort-by')
    .val('{{ collection.sort_by }}')
    .bind('change', function() {
      if (jQuery(this).val()) {
        Shopify.queryParams.sort_by = jQuery(this).val();                
      }
      else {
        delete Shopify.queryParams.sort_by;
      }
      var search = jQuery.param(Shopify.queryParams);
      if (search.length) {
        location.search = jQuery.param(Shopify.queryParams);
      }
      else {
        location.href = location.pathname;
      }
    });
</script>

Answer 1

您是否尝试过使用教程从基础开始：

https://help.shopify.com/en/themes/customization/collections/filter-collections-with-product-tags

我从这个方法开始，将 JS 添加到我的主题中，并添加下拉菜单进行过滤。

那么就可以使用中的方法了：

https://community.shopify.com/c/Shopify-Design/How-to-Multiple-Dropdown-Sorting-Boxes-on-Collection-Pages/m-p/465433

这应该可以让您开始过滤。