Как заставить несколько тегов работать над списком, а не просто выпадающим списком?

81
6

Я использую фильтры для своих коллекций в Shopify. Я нашел код на GitHub, который является выпадающим фильтром, если вы выберете несколько фильтров, он фильтрует продукты на основе вашего выбора.
Например, если я выберу Дуб и диапазон цен от 15 до 100 фунтов стерлингов, он добавит к url /дубу + 15-100
Однако, когда я меняю код, чтобы он больше не выпадал, а вместо этого список больше не работает. Если я выберу несколько фильтров, он добавит только один фильтр, а не функциональность нескольких фильтров.

Это мой жидкий код:

<div class="coll-sidebar">
<div class="coll-sidebar--content">
<h1>Filter Products</h1>
<ul class="subnav clearfix">
<li class="coll-filter filter-heading clearfix">
{% assign tags = 'Blue, Grey, Black, Oak, Bronze, Pewter, Gunmetal, Utile, Mahogany' | split: ',' %}
<label>Colour</label>
<hr class="hr--sidebar">
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<li class="selection{% unless current_tag %} active{% endunless%}">
<div id="swatch-{{ tag }}" class="colour-filter"> </div> <span>{{ tag | link_to_remove_tag: tag }}</span>
</li>
{% elsif collection.all_tags contains tag %}
<li class="selection{% unless current_tag %} active{% endunless%}">
<div id="swatch-{{ tag }}" class="colour-filter"> </div>
<span> {{ tag | link_to_tag: tag }}</span>
</li>
{% endif %}
{% endfor %}
</li>
</ul>

<ul class="subnav clearfix">
<li class="coll-filter filter-heading clearfix">
{% assign tags = 'Egyptian Cotton, Silk, Satin' | split: ',' %}
<label>Material</label>
<hr class="hr--sidebar">
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<li {% unless current_tag %}class="active"{% endunless%}>
{{ tag | link_to_remove_tag: tag }}
</li>
{% elsif collection.all_tags contains tag %}
<li>
{{ tag | link_to_tag: tag }}
</li>
{% endif %}
{% endfor %}
</li>
</ul>
</div>
</div>

Вышеупомянутое повторяется для количества фильтров, которые у меня есть.

Это мой код 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 %}
});
</script>

спросил(а) 2018-05-16T15:42:00+03:00 2 года, 5 месяцев назад
0
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема