[英]How to get shopify filter to only show tags available on products shown?
我已使用標簽將多個過濾器添加到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 %}
});
謝謝
我找到了答案。
將{% elsif collection.all_tags contains tag %}
更改為{% elsif collection.tags contains tag %}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.