Question

Question: Javascript code and filtering is not functioning. What is not correct in my Javascript?

I am implementing a filtering & sorting user experience for shopping cart products based upon the Isotope jQuery plugin (http://isotope.metafizzy.co/index.html). The system is being implemented on the Shopify platform (demo link: http://cushionbrilliant.myshopify.com).

In this link (http://isotope.metafizzy.co/demos/combination-filters.html), the developer of Isotope explains how to combine multiple filters by passing selectors that are combined. Doing some research I found the code to implement this, but it is not functioning correctly.

Here is the jsfiddle link to a sample code: http://jsfiddle.net/jeremyccrane/pJ6W8/22/

Here is the Javascript code I have been attempting to function:

var $container = $('#container');
    // initialize isotope
    $container.isotope({
      // options...
      animationOptions: { duration: 300, easing: 'linear', queue: false },
      getSortData : { 
      price : function ( $elem ) { return parseFloat( $elem.find('.price').text() ); }
      size : function ( $elem ) { return parseFloat( $elem.find('.size').text() ); }
      }
    });

// sorting button
$('a.pricelow').click(function(){
  $('#container').isotope({ sortBy : 'price' });
  return false;
});
$('a.pricehigh').click(function(){
  $('#container').isotope({ sortBy : 'price',sortAscending : false });
  return false;
});
$('a.sizelow').click(function(){
  $('#container').isotope({ sortBy : 'size' });
  return false;
});
$('a.sizehigh').click(function(){
  $('#container').isotope({ sortBy : 'size',sortAscending : false });
  return false;
});

// filter buttons
    $('.filters a').click(function(){
      //$(this).addClass('.selected');
      var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

      // store filter value in object
      // i.e. filters.color = 'red'
      var group = $optionSet.attr('data-filter-group');
      filters[ group ] = $this.attr('data-filter-value');
      // convert object into array
      var isoFilters = [];
      for ( var prop in filters ) {
        isoFilters.push( filters[ prop ] )
      }
      var selector = isoFilters.join('');
      $container.isotope({ filter: selector });

      return false;
    });

Here is the HTML code for the selectors:

<ul id="filters">
  <li><a href="#">Type</a>
        <ul data-filter-group="diamond" class="filters option-set">
      <li><a href="#" data-filter="*">Show All</a></li>
      <li><a href="#" data-filter=".One">One</a></li>
      <li><a href="#" data-filter=".Two">Two</a></li>
      <li><a href="#" data-filter=".Three">Three</a></li>
    </ul>
  </li>
  <li><a href="#">Price</a>
        <ul data-filter-group="price" class="filters option-set">
      <li><a href="#" data-filter="*">Show All</a></li>
      <li><a href="#" data-filter=".Under5k">Under $5k</a></li>
      <li><a href="#" data-filter=".Under10k">Under $10k</a></li>
      <li><a href="#" data-filter=".Over10k">Over $10k</a></li>
    </ul>
  </li>
</ul>
<ul id="sorting">
  <li><a href="#pricelow" class="pricelow">Price Low to High</a></li>
  <li><a href="#pricehigh" class="pricehigh">Price High to Low</a></li>
  <li><a href="#sizelow" class="sizelow">Size Low to High</a></li>
  <li><a href="#sizehigh" class="sizehigh">Size High to Low</a></li>
</ul>

Here is the HTML Code for the sample boxes:

<div id="container">
  <div class="box One Under5k">Box Category 1 <div class="price">2500</div><div class="size">1.5</div></div>
  <div class="box Two Under5k">Box Category 2 <div class="price">2500</div><div class="size">2.0</div></div>
  <div class="box Three Under5k">Box Category 3 <div class="price">2500</div><div class="size">2.5</div></div>
  <div class="box One Under10k">Box Category 1 <div class="price">7500</div><div class="size">3.0</div></div>
  <div class="box Two Under10k">Box Category 2 <div class="price">7500</div><div class="size">3.5</div></div>
  <div class="box Three Under10k">Box Category 3 <div class="price">7500</div><div class="size">4.0</div></div>
  <div class="box One Over10k">Box Category 1 <div class="price">12500</div><div class="size">4.5</div></div>
  <div class="box Two Over10k">Box Category 2 <div class="price">12500</div><div class="size">5.0</div></div>
  <div class="box Three Over10k">Box Category 3 <div class="price">12500</div><div class="size">5.5</div></div>
</div>

Thanks for the help!

Answer 1

See http://jsfiddle.net/desandro/pJ6W8/31/

1. There was a missing comma within getSortData.

2. Your JS was missing var filters = {}. Without this statement you were tapping into the global filters variable, which the browser provides as the #filters element.

3. Changed filters[ group ] = $this.attr('data-filter-value'); to filters[ group ] = $this.attr(‘data-filter’);` to match your HTML

4. Added ,sortAscending : true where it was needed for the sort click events.