Product PLP filter, return all products by default

abyns21
New Member
1 0 0

Hi, I am relatively new to Shopify and Javascript, and need some help regarding the product filter. 
On the page load, all products are displayed. clicking on the filter behaves like how a filter would. 

problem: So when I unselect all swatches, all of the products disappear. 
Intended behavior: I would like to have all of the filters show by default, if all of the swatches are unselected. 

$(document).on('click', ".plp-filter .accordion-panel button", function(){
  $(this).toggleClass('active');
  $('.plp-grid .plp-item').hide();
  $('.plp-filter button.active').each(function(){
    var that = this;
    $('.plp-grid .plp-item').each(function(){
      if($(this).attr('data-filters').includes($(that).attr('data-size')) || $(this).attr('data-filters').includes($(that).attr('data-color'))) {
        $(this).show();
      } else {
        // i think some logic goes here?
      }
    })
  })
})

 
I am guessing that something needs to go in the else or a else if block, but not too sure. 
Any help would be appreciated

0 Likes