Я использую дебютную тему и хотел бы добавить настраиваемые имена фильтрации, чтобы я мог фильтровать по цвету, типу и т. Д. Моего продукта с параметрами под каждым фильтром.Цвет - тогда есть синий, красный, зеленый, желтый и т. Д. Я искал код для шопифина, и когда я добираюсь до части Javascript, она, кажется, не работает.
Это то, что у меня сейчас есть в моем collection-template.liquid:
<ul class="clearfix filters">
<li class="clearfix filter">
{% assign tags = 'Blue, Grey, Black' | split: ',' %}
<label>Shop by color</label>
<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 = 'Mini, Textiles, Velvet' | split: ',' %}
<label>Shop by Type</label>
<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>Shop by material</label>
<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>
И ТОГДА часть javascript:
<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]);
}
}
}
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
var newTags = [];
var newURL = '';
collFilters.each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
{% if collection.handle %}
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 %}
});
jQuery('.sort-by')
.val('{{ collection.sort_by }}')
.bind('change', function() {
if (jQuery(this).val()) {
Shopify.queryParams.sort_by = jQuery(this).val();
}
else {
delete Shopify.queryParams.sort_by;
}
var search = jQuery.param(Shopify.queryParams);
if (search.length) {
location.search = jQuery.param(Shopify.queryParams);
}
else {
location.href = location.pathname;
}
});
</script>