JQuery – Unable to filter using isotope js woocommerce products

1 Views

I have written a function to filter the woocommerce products using isotope js. I am trying to sort out the problem. But the filter is not working.
The HTML looks like 

<div class = "filters">
<input type="checkbox" class = "do_this_filter" value=".Hand-Wash">Hand wash<br>
<input type="checkbox" class = "do_this_filter" value=".Machine-Wash">Machine wash<br>
</div>
<ul class ='products'>
<li class="items Hand-wash"></li>
<li class="items Machine-Wash"></li>
</ul>

The jQuery I used is

Read More
$( function() {
      // init Isotope
      var $grid = $('.products').isotope({
        itemSelector: '.item',
        layoutMode: 'fitRows'
      });

      // bind filter click
      $('.do_this_filter').on( 'click', function() {
        var filterValue = $( this ).val();
        // use filterFn if matches value
        $grid.isotope({ filter: filterValue });
      });
      // change is-checked class
      $('.do_this_filter').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        $buttonGroup.on( 'click', function() {
          $buttonGroup.find('.is-checked').removeClass('is-checked');
          $( this ).addClass('is-checked');
        });
      });

    });

This didn’t work can anyone help.? Thanks in advance.
Jsfiddle

Post Views: 1

Related posts

1 comment

  1. Try like this:

    $(function() {
  // init Isotope
  var $grid = $('.products'),
    $checkboxes = $('.filters input');

  $grid.isotope({
    itemSelector: '.items',
    layoutMode: 'fitRows'
  });

  $checkboxes.change(function() {
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function() {
      filters.push(this.value);
    });
    filters = filters.join(', ');
    $grid.isotope({
      filter: filters
    });
  });

});
    .items {
  width: 100px;
  height: 100px;
  background: red;
  margin: 3px;
  list-style: none;
  display: inline-block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<div class="filters">
  <input type="checkbox" class="do_this_filter" value=".Hand-wash">Hand wash
  <br>
  <input type="checkbox" class="do_this_filter" value=".Machine-Wash">Machine Wash
  <br>
</div>
<ul class='products'>
  <li class="items Hand-wash">Demo product1</li>
  <li class="items Machine-Wash">Demo product2</li>
</ul>

Comments are closed.