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+$)/, '');
}
});
});
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024