Question

嗨，我在看本教程，它使用一个下拉菜单，但我的目标是将其更改为单选按钮并以相同的方式工作。在一个标题下使用多个标签，您可以选择多个标签来创建集合过滤器。这是我正在更改的教程：https://shopify.dev/tutorials/customize-theme-filter-collections-with-product-tags

下面是我的代码，将下拉菜单更改为可以正常工作的单选按钮。我的问题是选择它们来创建过滤器时。而且我想我在更改jquery来选择单选按钮时出了点问题？

   <ul class="clearfix filters">
      <li class="clearfix filter">
          <input class="coll-filter" type="radio" name="coll-filter" value="">All
           {% for tag in collection.tags %}
           {% if tag contains 'type-' %}
           {% assign tagName = tag | remove: 'type-' %}         
           {% if current_tags contains tag %}
          <input class="coll-filter" type="radio" name="coll-filter" value="{{ tag | handle }}" selected>{{ tagName }}
          {% elsif collection.all_tags contains tag %}
          <input class="coll-filter" type="radio" name="coll-filter" value="{{ tag | handle }}">{{ tagName }}
              {% endif %}                     
            {% endif %}
          {% endfor %}
       
      </li>

    </ul>

    <script>
    /* Product Tag Filters - Good for any number of filters on any type of collection pages */
    var collFilters = jQuery('.coll-filter');
    collFilters.change(function() {
      var newTags = [];
      collFilters.each(function() {
        if (jQuery(this).val()) {
          newTags.push(jQuery(this).val());
        }
      });
      if (newTags.length) {
        var query = newTags.join('+');
        window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + query);
      }
      else {
        {% if collection.handle %}
        window.location.href = '/collections/{{ collection.handle }}';
        {% elsif collection.products.first.type == collection.title %}
        window.location.href = '{{ collection.title | url_for_type }}';
        {% elsif collection.products.first.vendor == collection.title %}
        window.location.href = '{{ collection.title | url_for_vendor }}';
        {% endif %}
      }
    });
    </script>

由于有jQuery用于将您选择的标签添加到URL。我认为更改以下内容将很容易：

var collFilters = jQuery('.coll-filter');
collFilters.change(function() {

到

var collFilters = jQuery("input[name='coll-filter']");
collFilters.onclick(function() {

但是，当我在我的两个标签设置上对此进行测试时，似乎将它们两种类型-红葡萄酒+白葡萄酒结合在一起。您可以在我的商店中看到：https://ch-wines.myshopify.com/collections/frontpage/-密码：yiatsu

谢谢。我希望我对此解释得足够好。

Shopify。将下拉列表更改为用于收藏标签过滤器的单选按钮

0 个答案: