javascript - 如何在 shopify 的侧边栏过滤器中选择多个选项？
问题描述
我想选择多个选项，但它不起作用。我不知道编码的哪一部分是错误的。当我选择该选项时，它是自动加载的。任何人都可以帮忙吗？
尺寸
OS
OM
颜色
O 红色
O 白色
我选择 s 并且红色它有效。但是，当我选择 s、m 和红色时，它不起作用。
这是js代码。
vela.ajaxFilter = function(){
var btnOpenFilter = $('.filterTagFullwidthButton');
var filterContent = $('.filterTagFullwidthContent');
vela.cache.$body.on('click', '.filterTagFullwidthButton', function() {
if (filterContent.hasClass('active')) {
btnOpenFilter.removeClass('active');
filterContent.removeClass('active');
$('.filterTagFullwidthOverlay').each(function() {
$(this).remove();
});
} else {
$('<div class="filterTagFullwidthOverlay"></div>')
.css('display', 'none')
.insertAfter(filterContent);
$('.filterTagFullwidthOverlay').fadeIn(300);
btnOpenFilter.addClass('active');
filterContent.addClass('active');
}
});
vela.cache.$body.on('click', '.filterTagFullwidthOverlay, .filterTagFullwidthClose', function() {
$('.filterTagFullwidthOverlay').each(function() {
$(this).remove();
});
btnOpenFilter.removeClass('active');
filterContent.removeClass('active');
});
var isAjaxFilterClick = false;
if ($(".template-collection")) {
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
if (!isAjaxFilterClick) {
ajaxFilterParams();
var newurl = ajaxFilterCreateUrl();
ajaxFilterGetContent(newurl);
reActivateSidebar();
}
vela.isSidebarAjaxClick = false;
});
}
ajaxFilterParams = function () {
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]);
}
}
}
}
ajaxFilterCreateUrl = function(baseLink) {
var newQuery = $.param(Shopify.queryParams).replace(/%2B/g, '+');
if (baseLink) {
if (newQuery != "")
return baseLink + "?" + newQuery;
else
return baseLink;
}
return location.pathname + "?" + newQuery;
}
ajaxFilterClick = function(baseLink) {
delete Shopify.queryParams.page;
var newurl = ajaxFilterCreateUrl(baseLink);
isAjaxFilterClick = true;
History.pushState({
param: Shopify.queryParams
}, newurl, newurl);
ajaxFilterGetContent(newurl);
}
ajaxFilterSortby = function() {
if (Shopify.queryParams.sort_by) {
var sortby = Shopify.queryParams.sort_by;
$("#SortBy").val(sortby);
}
vela.cache.$body.on('change', "#SortBy", function(event){
Shopify.queryParams.sort_by = $(this).val();
ajaxFilterClick();
});
}
ajaxFilterView = function() {
vela.cache.$body.on('click', '.changeView', function(event) {
event.preventDefault();
if (!$(this).hasClass("changeViewActive")) {
Shopify.queryParams.view = $(this).data('view');
$(".changeView").removeClass('changeViewActive');
$(this).addClass('changeViewActive');
ajaxFilterClick();
}
});
}
ajaxFilterTags = function(){
vela.cache.$body.on('click', '.ajaxFilter li > a', function(event) {
event.preventDefault();
var currentTags = [];
if (Shopify.queryParams.constraint) {
currentTags = Shopify.queryParams.constraint.split('+');
}
if (!window.sidebar_multichoise && !$(this).parent().hasClass("active")) {
var otherTag = $(this).parents('.listFilter').find("li.active");
if (otherTag.length > 0) {
var tagName = otherTag.data("filter");
if (tagName) {
var tagPos = currentTags.indexOf(tagName);
if (tagPos >= 0) {
currentTags.splice(tagPos, 1);
}
}
}
}
var dataHandle = $(this).parent().data("filter");
if (dataHandle) {
var tagPos = currentTags.indexOf(dataHandle);
if (tagPos >= 0) {
currentTags.splice(tagPos,1);
} else {
currentTags.push(dataHandle);
}
}
if (currentTags.length) {
Shopify.queryParams.constraint = currentTags.join('+');
} else {
delete Shopify.queryParams.constraint;
}
ajaxFilterClick();
});
}
ajaxFilterPaging = function() {
vela.cache.$body.on('click', '#collPagination .pagination a', function(event){
event.preventDefault();
var linkPage = $(this).attr("href").match(/page=\d+/g);
if (linkPage) {
Shopify.queryParams.page = parseInt(linkPage[0].match(/\d+/g));
if (Shopify.queryParams.page) {
var newurl = ajaxFilterCreateUrl();
isAjaxFilterClick = true;
History.pushState({
param: Shopify.queryParams
}, newurl, newurl);
ajaxFilterGetContent(newurl);
$('body,html').animate({
scrollTop: 300
}, 600);
}
}
});
}
ajaxFilterReview = function() {
if (window.review){
if ($(".shopify-product-reviews-badge").length > 0) {
return window.SPR.registerCallbacks(), window.SPR.initRatingHandler(), window.SPR.initDomEls(), window.SPR.loadProducts(), window.SPR.loadBadges();
};
}
}
ajaxFilterClear = function() {
$(".ajaxFilter").each(function() {
var sidebarTag = $(this);
if (sidebarTag.find(".listFilter > li.active").length > 0) {
sidebarTag.find(".velaClear").show().click(function(e) {
var currentTags = [];
if (Shopify.queryParams.constraint) {
currentTags = Shopify.queryParams.constraint.split('+');
}
sidebarTag.find(".listFilter > li.active").each(function() {
var selectedTag = $(this);
var tagName = selectedTag.data("filter");
if (tagName) {
var tagPos = currentTags.indexOf(tagName);
if (tagPos >= 0) {
currentTags.splice(tagPos, 1);
}
}
});
if (currentTags.length) {
Shopify.queryParams.constraint = currentTags.join('+');
} else {
delete Shopify.queryParams.constraint;
}
ajaxFilterClick();
e.preventDefault();
});
}
});
}
ajaxFilterClearAll = function() {
vela.cache.$body.on('click', 'a.velaClearAll', function(e) {
delete Shopify.queryParams.constraint;
delete Shopify.queryParams.q;
ajaxFilterClick();
e.preventDefault();
});
}
这里是侧边栏过滤器的液体。
{%- if section.settings.filter_by_tag or collection.all_tags.size > 0 -%}
{%- if current_tags == blank -%}
{%- assign noFilter = true -%}
{%- else -%}
{%- assign noFilter = false -%}
{%- endif -%}
{%- if template.name == 'collection' or collection.all_tags.size > 0 -%}
{%- assign strListTags = '' -%}
{% for tag in collection.all_tags %}
{%- if tag contains '_' -%}
{% capture strListTags %}{% unless strListTags == blank %}{{ strListTags }}|{% endunless %}{{ tag | split: '_' | first }}{% endcapture %}
{%- endif -%}
{% endfor %}
{%- assign groupTags = strListTags | split: '|' | uniq -%}
{%- endif -%}
{% if section.settings.sidebar_filtervendor_enable %}
<div class="velaFilter velaBlock">
<h3 class="titleSidebar">{{ section.settings.sidebar_filtervendor_title }}</h3>
<div class="velaContent">
<ul class="listSidebar list-unstyled">
{% assign itemArray = section.settings.sidebar_filtervendor_list | split:"," %}
{% for itemVendor in itemArray %}
{% if shop.vendors contains itemVendor %}
{% if collection.current_vendor == itemVendor %}
<li class="active">
{{ itemVendor | link_to_vendor }}
</li>
{% else %}
<li>
{{ itemVendor | link_to_vendor }}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% if section.settings.sidebar_filtertype_enable %}
<div class="velaFilter velaBlock">
<h3 class="titleSidebar">{{ section.settings.sidebar_filtertype_title }}</h3>
<div class="velaContent">
<ul class="listSidebar list-unstyled">
{% assign itemArray = section.settings.sidebar_filtertype_list | split:"," %}
{% for itemType in itemArray %}
{% if shop.types contains itemType %}
{% if collection.current_vendor == itemType %}
<li class="active">
{{ itemType | link_to_type }}
</li>
{% else %}
<li>
{{ itemType | link_to_type }}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div>
</div>
{% endif %}
<div id="sidebarAjaxFilter" class="velaFilter velaBlock">
{%- if section.settings.filter_by_tag_title != blank -%}
<h3 class="titleSidebar">
<span>{{ section.settings.filter_by_tag_title }}</span>
<a href="javascript:void(0)" class="velaClearAll{% if noFilter %} hidden{% endif %}">{{ 'collections.sidebar.clear_all' | t }}</a>
</h3>
{%- endif -%}
<div class="velaContent">
{% for groupTagTitle in groupTags %}
{%- if groupTagTitle contains 'Size' -%}
{%- assign classFilter = 'listFilterSize' -%}
{%- endif -%}
<div class="ajaxFilter velaBlock">
<h4 class="titleSidebar ajaxFilterTitle">
<!--<span>Filter by {{ groupTagTitle }}</span> -->
<span>{{ groupTagTitle }}</span>
<a href="javascript:void(0)" class="velaClear" style="display:none;">{{ 'collections.sidebar.clear' | t }}</a>
</h4>
<ul class="listFilter {{ classFilter }} list-unstyled">
{% for tag in collection.all_tags %}
{%- assign cat = tag | split: '_' | first -%}
{%- assign catDowncase = cat | downcase -%}
{%- if cat != tag and groupTagTitle == cat -%}
{%- if catDowncase == 'color' or catDowncase == 'colour' -%}
{% capture imageColor %}{{ tag | remove_first: groupTagTitle | remove_first: '_' | handle }}{% endcapture %}
{% capture colorImage %}{{ imageColor }}.png{% endcapture %}
<li class="filterColor{% if current_tags contains tag %} active{% endif %}" data-filter="{{ tag | handle }}">
<a href="javascript:void(0)" title="{{ imageColor }}" style="background-color: {{ imageColor }}">
<img class="img-responsive" alt="{{ tag | remove_first: groupTagTitle | remove_first: '_' | escape }}" src="{{ colorImage | file_img_url:'master' }}" onError="this.onerror=null;this.src='{{'color_default.png' | asset_img_url: 'icon'}}';" />
</a>
</li>
{%- else -%}
{%- if current_tags contains tag -%}
<li class="filterItem active" data-filter="{{ tag | handle }}">
{{ tag | remove_first: groupTagTitle | remove_first: '_' | link_to_remove_tag: tag }}
</li>
{%- else -%}
<li class="filterItem" data-filter="{{ tag | handle }}">
{{ tag | remove_first: groupTagTitle | remove_first: '_' | link_to_add_tag: tag }}
</li>
{%- endif -%}
{%- endif -%}
{%- endif -%}
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
{%- endif -%}解决方案
推荐阅读
- javascript - 如何摆脱算法中的复杂性？
- google-sheets - 是否可以在 Google 工作表上显示所有执行 Importrange 或 Query 的工作表？
- amazon-web-services - nginx：在 /etc/nginx/nginx.conf:11 的上游“udagram-users:8080”中找不到 [emerg] 主机
- azure-logic-apps - Azure App Logic - 如何在 Blob 存储上分页文件
- machine-learning - 如何将不同的值传递给管道参数
- javascript - React 和 Gsap 动画问题
- sharepoint - 拉取文件时逻辑应用 Sharepoint 文件名错误
- c++ - std::move 在不同的编译器上表现不同？
- javascript - 在 Javascript 中对数据和时间字符串进行排序
- arrays - 如何创建一个包含对象数组的 PowerShell 对象？