Liquid, JavaScript, themes, sales channels
Hi there,
I am using the supply theme and I have turned on the advanced filtering functionality. To illustrate it better, I have integrated an accordion for every {{ cat_item }} to be able to fit all of them on the page, choosing to have the first cat_item open as default for visual purposes. All accordions are actionable and the filters are working as desired but whenever I click a checkbox from a {{ cat_item }} other than the first one, the page refreshes and all accordions ,apart from the first one, close despite filters still being selected.
How do I use Ajax and/or jQuery to .hide () and .show the respective filters without having the page refreshing?
$(function() {
var filters = $('.advanced-filter'),
el,
elGroup,
elHandle,
activeTagInGroup;
var acc = document.getElementsByClassName("accordion");
var i;
var panel;
var firstPanel = acc[0].nextElementSibling;
firstPanel.style.display = "block";
acc[0].classList.toggle("active");
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
filters.on('click', function(e) {
el = $(this);
elGroup = el.data('group');
elHandle = el.data('handle');
activeTagInGroup = $('.active-filter[data-group="'+ elGroup +'"]');
// If the tag clicked is not already active and its group contains an active tag, we will swap tag within the group.
if ( !el.hasClass('active-filter') && activeTagInGroup.size() ) {
e.preventDefault();
location.href = location.href
// swap tag
.replace(activeTagInGroup.data('handle'), elHandle)
// go back to page 1
.replace(/(&page=\d+)|(page=\d+&)|(\?page=\d+$)/, '');
}
});
});
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024