我正在尝试创建一组产品过滤器,它们可以单独使用或作为多个选择使用 . 出于测试目的,我添加了两组复选框,用于分隔不同类型的过滤选项;类别和大小 .
当您选中其中一个复选框选项时,页面会重新加载,但是包含所有可用的过滤选项,而不仅仅是一个 . 如果您检查多个选项,则同样如此,所有内容都显示在URL中,如下所示: /collections/trending-products/ecommerce+woocommerce+wordpress+magento-2+xs+s+m+l+xl
这是我到目前为止创建的测试过滤器 . 第一个块包含我的HTML和Liquid标签,用于提取已分配的产品标签并将其显示为带有标签的复选框(有效) . 第二个块包含我的JavaScript . 该脚本似乎工作正常 if 我显示我的文件管理器作为选择而不是复选框...主要问题我似乎以与选择相同的方式将所选标签分配给网址,但我无法解决问题所在 .
任何有关此的帮助/建议将不胜感激:)
谢谢
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 %}
});
<form class="lmwd-filter" method="get">
<ul class="clearfix filter-category">
<li>
<p>Category</p>
{% assign tags = 'Ecommerce, Woocommerce, WordPress, Magento 2' | split: ',' %}
{% for t in tags %}
{% assign tag = t | strip %}
{% if current_tags contains tag %}
<label>
<input type="checkbox" class="coll-filter" name="{{ tag | handle }}" value="{{ tag | handle }}" checked />
{{ tag }}
</label>
{% else %}
<label>
<input type="checkbox" class="coll-filter" name="{{ tag | handle }}" value="{{ tag | handle }}" />
{{ tag }}
</label>
{% endif %}
{% endfor %}
</li>
<li>
<p>Size</p>
{% assign tags = 'XS, S, M, L, XL' | split: ',' %}
{% for t in tags %}
{% assign tag = t | strip %}
<label>
<input type="checkbox" class="coll-filter" name="{{ tag | handle }}" value="{{ tag | handle }}" />
{{ tag }}
</label>
{% endfor %}
</li>
</ul>
</form>