Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Mixitup JS (v2) integration with jQuery BBQ

I am trying to integrate Mixitup with jQuery BBQ. I want to create an item list page, users will be able to filter the items on the page using the exact method shown in this demo: http://codepen.io/patrickkunka/pen/iwcap

Then if the user browses away from the page or hits the back button, but then returns to the item list page, their selections are remembered. BBQ can potentially create a string in the URL to store the selected options, which are then passed to Mixitup when the user returns to the page. http://benalman.com/projects/jquery-bbq-plugin/

If you are able to do this with jQuery Isotope instead then I will also consider that.

User Gravatar

paramaniac

Posted Jun 18 2014 13:46 UTC

$25


  • Assigned To Gaby
  • Solved
  • jquery
    isotope
    bbq-hash
  • 3482 Views

10 Replies


http://codepen.io/renekorss/pen/Fuwze?editors=001

Tested on Chrome. This uses localStorage instead of BBQ. Hope that's fine.

User Gravatar

renekorss

Posted Jun 19 2014 0:42 UTC

Have a look at http://jsfiddle.net/gaby/4YBr7/

I implemented your requirements using the location.hash.

I am adding there the filters as created by the checkboxFilter code.

Then on init of the checkboxFilter we check if there is a hash, and re-apply the filters and tell mixItUp to update itself. This way you can even bookmark/share pages with specific filters applied.

To see it in action see http://fiddle.jshell.net/gaby/4YBr7/show/light/

User Gravatar

Gaby

Posted Jun 19 2014 2:17 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hi Gaby, I've managed to implement your solution and it seems to work perfectly (thank you!!), except for in IE8 where I get the following error:

Object doesn't support this property or method. Line: 2 Char: 5

Which relates to this line:

return a.reduce(function(p, c) {

I would like to support IE8 and upwards.

User Gravatar

paramaniac

Posted Jun 19 2014 11:31 UTC

Indeed, IE8 has not implemented the reduce method on the Array object.

Here is a polyfill for that method to add to your page. (taken directly from the Mozilla Developer Network)

if ( 'function' !== typeof Array.prototype.reduce ) {
  Array.prototype.reduce = function( callback /*, initialValue*/ ) {
    'use strict';
    if ( null === this || 'undefined' === typeof this ) {
      throw new TypeError(
         'Array.prototype.reduce called on null or undefined' );
    }
    if ( 'function' !== typeof callback ) {
      throw new TypeError( callback + ' is not a function' );
    }
    var t = Object( this ), len = t.length >>> 0, k = 0, value;
    if ( arguments.length >= 2 ) {
      value = arguments[1];
    } else {
      while ( k < len && ! k in t ) k++; 
      if ( k >= len )
        throw new TypeError('Reduce of empty array with no initial value');
      value = t[ k++ ];
    }
    for ( ; k < len ; k++ ) {
      if ( k in t ) {
         value = callback( value, t[k], k, t );
      }
    }
    return value;
  };
}
User Gravatar

Gaby

Posted Jun 19 2014 11:50 UTC

Hi paramaniac,

Here is polyfill for reduce: http://pastebin.com/Ap5srsaV

You can create separate js file and include it before the other scripts.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jun 19 2014 11:54 UTC

I have placed that polyfill above the Mixitup and custom jQuery. The IE8 error now reads:

Object doesn't support this property or method. Line: 3 Char: 9

Which is:

if (p.indexOf(c) < 0) p.push(c);

On the Mozilla polyfill page it says IE9 upwards.

User Gravatar

paramaniac

Posted Jun 19 2014 12:40 UTC

UPDATE: I've got it working by including this file on the page: https://github.com/petermichaux/polyfill/tree/master/src

User Gravatar

paramaniac

Posted Jun 19 2014 12:48 UTC

Ah .. yes looks like indexOf is also not supported by lower versions of IE.

That polyfill you found is nice because it adds multiple missing methods.

Good find!

User Gravatar

Gaby

Posted Jun 19 2014 13:03 UTC

Hi Gaby, would it be a big job for you to modify your code so that it adds a class of "active" to the DIV class="checkbox"? I would like to style the background colour of the DIV when the child checkbox is checked. It needs to keep the "active" class if the user browses away and then returns, on page refresh etc.

User Gravatar

paramaniac

Posted Jun 24 2014 13:25 UTC

You need to make a small change in the parseFilters method.

Code at http://jsfiddle.net/4YBr7/7/
in action at http://jsfiddle.net/4YBr7/7/show

User Gravatar

Gaby

Posted Jun 24 2014 15:14 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions