Question

下面我提到了我的使用标签的Shopify多重过滤器代码。我需要在下拉列表中显示过滤器产品。我解决了，但URL不变。

 <div class="filter-list grid__item {{ grid_item_width }}">
 <ul class="clearfix filters">
 {% if collection.title == 'Door Knobs' %}   
 <li class="clearfix filter">
 {% assign tags = 'PN- POLISHED NICKEL, BN- BRUSHED NICKEL, PC- POLISHED CHROME,UB- 
 UNLACQUERED BRASS,AB- ANTIQUE BRASS,SB- SATIN BRASS,ORB- OIL RUBBED BRONZE,BAB- BRIGHT 
 ANTIQUE BRASS' | split: ',' %}
 <select class="coll-filter">
 <option value="">Finishes: 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>
 {% endif %}
 <li class="clearfix filter">
 {% if collection.title == 'Door Knobs' %}
 {% assign tags = 'Heritage, Metropolitan, Revival Classic, Revival Modern' | split: ',' %}
 {% elsif collection.title == 'Door Levers' %}
 {% assign tags = 'Heritage, Metropolitan, Revival Classic, Revival Modern' | split: ',' %}
 {% elsif collection.title == 'Cabinet Hardware' %}
 {% assign tags = 'Cabinet Knobs, Cabinet Pulls, Heritage' | split: ',' %}
 {% endif %}
 <select class="coll-filter">
              <option value="">Collection: 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>
  </div>
  {% endif %}
  <script>
     /* Product Tag Filters - Good for any number of filters on any type of collection page.
        Give you product tag filter select element a class of coll-filter.
        Give your collection select a class of coll-picker.
        Brought to you by Caroline Schnapp. */
     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>

我需要在同一页面上显示过滤器产品，并且URL保持不变。例如我的网址：（/ collections / door-knobs / metro /）变成（/ collections / door-knobs /） Metro产品需要显示在同一页面的下拉菜单下。有人遇到同样的问题吗？

使用shopify在同一页面上显示过滤产品

0 个答案: