【问题标题】:How to get shopify filter to only show tags available on products shown?如何让 shopify 过滤器仅显示显示的产品上可用的标签?
【发布时间】:2018-05-10 13:21:44
【问题描述】:

我使用标签向我的 Shopify 产品系列添加了多个过滤器。 如果我选择“橡木”颜色,它将显示该系列中分配有“橡木”标签的所有产品。太好了。

但是,它仍然显示未分配给集合已被过滤到的产品的标签。

例如,我有一个尺寸相同的盒子,但是因为该系列中的其中一款产品应用了“小、中和大”标签,这些选项仍然可用。

我怎样才能得到它,以便标签仅根据已过滤的内容而不是根据已过滤的内容显示整个系列中有什么可用的?

这是我当前在“collection.liquid”中的代码:

<div class="coll-sidebar">
 <div class="coll-sidebar--content">
  <ul class="clearfix filters">
   <h1>Filter Products</h1>
   <li class="clearfix filter">
    {% assign tags = 'Blue, Grey, Black, Oak, Bronze, Pewter, Gunmetal, Utile, Mahongany' | split: ',' %}
     <label>Colour</label>
     <hr class="hr--sidebar">
     <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>Material</label>
   <hr class="hr--sidebar">
   <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 = 'Small, Medium, Large' | split: ',' %}
 <label>Size</label>
 <hr class="hr--sidebar">
 <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 = 'Under £5, £15-£100, £100-£250, £250-£750, £750-1000£, £1000' | split: ',' %}
      <label>Price Range</label>
      <hr class="hr--sidebar">
      <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>
  </div>
 </div>

{% section 'collection-template' %}

为此的 JS 是:

<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 %}
});

谢谢

【问题讨论】:

    标签: javascript jquery html shopify liquid


    【解决方案1】:

    我找到了答案。

    {% elsif collection.all_tags contains tag %} 更改为{% elsif collection.tags contains tag %}

    【讨论】:

      【解决方案2】:

      我找到了答案。

      将 {% elsif collection.all_tags contains tag %} 更改为 {% elsif collection.tags contains tag %}

      有效

      【讨论】:

      • 请用适当的代码 cmets 回答
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-10-08
      • 1970-01-01
      • 2016-04-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多