How to remove page refresh on advanced filtering using ajax/jQuery?

IvanTodorov
Tourist
4 0 1

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?

 

 
Reply 1 (1)

IvanTodorov
Tourist
4 0 1
$(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+$)/, '');
      }
    });  
  });