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

Question

我在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>

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>