Javascript Shopify/Liquid-将过滤器搜索从选择下拉菜单更改为按钮

我在我的Shopify页面上获得了以下按产品大小过滤的代码。我想把它从一个选择下拉列表改为单个按钮，按大小过滤。这将需要更改脚本以适应按钮，而不是选择，以及liquid/html

液体/HTML

{% assign sizes = '' %}
  {% for product in products limit: limit %}
    {% for variant in product.variants %}
      {% if variant.available %}
        {% assign sizes = sizes | append: variant.options[1] | append: '_' %}
      {% endif %}
    {% endfor %}
  {% endfor %}

  {% assign sizesArr = sizes | split: '_' | uniq %}
  <ul class="sortme">
    <li class="clearfix filter">
      <h4>Filter by Size in Stock</h4>
      <select class="styled-select coll-filter">
        <option value="">All</option>
        {% for size in sizesArr %}
          <option value="{{ size }}"{% if current_tags contains size %} selected{% endif %}>{{ size }}</option>
        {% endfor %}
      </select>
    </li>
  </ul>

{%assign size='''%}
{产品限制中产品的百分比：限制%}
{product.variants%中的变量为%0}
{%if variant.available%}
{%assign sizes=sizes | append:variant.options[1]| append:
{%endif%}
{%endfor%}
{%endfor%}
{%assign SIZESAR=sizes | split:''| uniq%}


按库存大小筛选
全部的
{大小为sizesArr%}
{{size}}
{%endfor%}

Javascript/jQuery

  <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]);
        }
      }
    }
    jQuery('.coll-picker').change(function() {
      if (jQuery(this).val()) {
        location.href = '/collections/' + jQuery(this).val();
      }
      else {
        location.href = '/collections/all';
      }
    });
    var collFilters = jQuery('.coll-filter');
    collFilters.change(function() {
      delete Shopify.queryParams.page;
      var newTags = [];
      collFilters.each(function() {
        if (jQuery(this).val()) {
          newTags.push(jQuery(this).val());
        }
      });
      {% if collection.handle %}
      var 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 %}
    });

    $(document).on('shopify:section:load', function(event) {
  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]);
        }
      }
    }
    jQuery('.coll-picker').change(function() {
      if (jQuery(this).val()) {
        location.href = '/collections/' + jQuery(this).val();
      }
      else {
        location.href = '/collections/all';
      }
    });
    var collFilters = jQuery('.coll-filter');
    collFilters.change(function() {
      delete Shopify.queryParams.page;
      var newTags = [];
      collFilters.each(function() {
        if (jQuery(this).val()) {
          newTags.push(jQuery(this).val());
        }
      });
      {% if collection.handle %}
      var 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 %}
    });
    });
  </script>

Shopify.queryParams={}；
if（location.search.length）{
for（var aKeyValue，i=0，aCouples=location.search.substr（1）.split（'&'）；i1）{
shopfify.queryParams[decodeURIComponent（aKeyValue[0]）]=decodeURIComponent（aKeyValue[1]）；
}
}
}
jQuery（'.coll picker'）.change（函数（）{
if（jQuery（this.val（））{
location.href='/collections/'+jQuery（this.val（）；
}
否则{
location.href='/collections/all'；
}
});
var collFilters=jQuery（'.coll-filter'）；
collpilters.change（函数（）{
删除Shopify.queryParams.page；
var newTags=[]；
collFilters.each（函数（）{
if（jQuery（this.val（））{
push（jQuery（this.val（））；
}
});
{%if collection.handle%}
var newURL='/collections/{{collection.handle}}}'；
if（新标记长度）{
newURL+='/'+newTags.join（'+'）；
}
var search=jQuery.param（Shopify.queryParams）；
if（search.length）{
newURL+=“？”+搜索；
}
location.href=newURL；
{%else%}
if（新标记长度）{
Shopify.queryParams.constraint=newTags.join（+）；
}
否则{
删除Shopify.queryParams.constraint；
}
location.search=jQuery.param（Shopify.queryParams）；
{%endif%}
});
$（文档）.on（'shopify:section:load'，函数（事件）{
Shopify.queryParams={}；
if（location.search.length）{
for（var aKeyValue，i=0，aCouples=location.search.substr（1）.split（'&'）；i1）{
shopfify.queryParams[decodeURIComponent（aKeyValue[0]）]=decodeURIComponent（aKeyValue[1]）；
}
}
}
jQuery（'.coll picker'）.change（函数（）{
if（jQuery（this.val（））{
location.href='/collections/'+jQuery（this.val（）；
}
否则{
location.href='/collections/all'；
}
});
var collFilters=jQuery（'.coll-filter'）；
collpilters.change（函数（）{
删除Shopify.queryParams.page；
var newTags=[]；
collFilters.each（函数（）{
if（jQuery（this.val（））{
push（jQuery（this.val（））；
}
});
{%if collection.handle%}
var newURL='/collections/{{collection.handle}}}'；
if（新标记长度）{
newURL+='/'+newTags.join（'+'）；
}
var search=jQuery.param（Shopify.queryParams）；
if（search.length）{
newURL+=“？”+搜索；
}
location.href=newURL；
{%else%}
if（新标记长度）{
Shopify.queryParams.constraint=newTags.join（+）；
}
否则{
删除Shopify.queryParams.constraint；
}
location.search=jQuery.param（Shopify.queryParams）；
{%endif%}
});
});

任务中是否有一个特定的部分是您正在努力完成的？比如如何开始？我将上面的代码更改为使用按钮，对JS做了一点小小的更改，但它会导致同时搜索所有标记。因此，我回到了上面的代码，看看是否有人有一个完全有效的解决方案。您正在努力完成的任务中有没有具体的部分？比如如何开始？我将上面的代码更改为使用按钮，对JS做了一点小小的更改，但它会导致同时搜索所有标记。所以我回到了上面的代码，看看是否有人有一个完全有效的解决方案。