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

isotope combined filtering and defaults

Hello,

I'm using isotope and combined filtering to display and filter products in an online retail store.

It filters by Mens and Womens, and that's combined with Items such as Tees, Hats, Sweaters, etc.

I'm using Wordpress and pulling categories and tags to display the items in the UI. Mens and Womens are Wordpress Categories, and the Items such as Tees, Hats, Sweaters are Wordpress Tags. Currently there are no defaults set when a user gets to the page and they see all of the products displayed with no filters highlighted.

1) I would like Mens AND All to be appended with the class .is-active by default.

2) When clicking Mens or Womens, I would like All to be appended the class .is-active by default. (e.g. If a user is currently viewing Mens AND Tees, and switches to Womens, then Womens AND All will be selected.

Thanks!

User Gravatar

Dreamsickle

Posted Apr 21 2014 14:35 UTC

$30


  • Assigned To NBoychev
  • Solved
  • jquery
    isotope
    wordpress
  • 1785 Views

5 Replies


Hi Dreamsickle,

Here is the solution:

(function($) {

    $('#products').isotope()
        // initialize Isotope after all images have loaded
    var $container = $('#products').imagesLoaded( function() {

        $container.isotope({
        // options
            itemSelector: '.item',
            layoutMode: 'fitRows',
            filter: '.product-cat-mens.product-tag-all'
        });

        // store filter for each group
        var filters = {};

        // filter items on click
        $('#product-tags').on( 'click', '.shop-sorter-button', function() {
            var $this = $(this);
            // get group key
            var $buttonGroup = $this.parents('.button-group');
            var filterGroup = $buttonGroup.attr('data-filter-group');
            // set filter for group
            filters[ filterGroup ] = $this.attr('data-filter');
            // combine filters
            var filterValue = '';
            for ( var prop in filters ) {
                filterValue += filters[ prop ];
            }
            // set filter for Isotope
            $container.isotope({ filter: filterValue });
        });

        $('#product-categories').on('click', '.shop-sorter-button', function() {
            var $this = $(this);

            var $activeTag = $('#product-tags').find('.shop-sorter-button').first().addClass('is-active');

            $activeTag.siblings().removeClass('is-active');

            // get group key
            var $buttonGroup = $this.parents('.button-group');
            var filterGroup = $buttonGroup.attr('data-filter-group');

            var $tagsGroup = $activeTag.parents('.button-group');
            var tagsGroup = $tagsGroup.attr('data-filter-group');

            filters[filterGroup] = $this.attr('data-filter');
            filters[tagsGroup] = $activeTag.attr('data-filter');

            // combine filters
            var filterValue = '';
            for ( var prop in filters ) {
                filterValue += filters[ prop ];
            }

            // set filter for Isotope
            $container.isotope({ filter: filterValue });
        });
    });
        // change is-active class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );

        $buttonGroup.on( 'click', '.shop-sorter-button', function() {
            $buttonGroup.find('.is-active').removeClass('is-active');
            $( this ).addClass('is-active');
        });
    });
}) (jQuery);

Replace the old one in the html.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Apr 21 2014 23:47 UTC

Nikola,

This works for my second problem; However, my first problem hasn't been solved. Mens and All are filtered by default, but they aren't initially highlighted. They need to be appended with the class .is-active as soon as the page loads.

Thanks.

User Gravatar

Dreamsickle

Posted Apr 22 2014 17:05 UTC

Hi Dreamsickle,

If the question is still active, here is the addition:

     ....
     $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );

        $buttonGroup.on( 'click', '.shop-sorter-button', function() {
            $buttonGroup.find('.is-active').removeClass('is-active');
            $( this ).addClass('is-active');
        });

        // new code
        $buttonGroup.find('.shop-sorter-button').first().trigger('click');
        // end of new code


    });
}) (jQuery);

I can't test it, because the page is down, but it should work.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Apr 23 2014 3:18 UTC

Solution

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

Hey Nikola,

Thanks for your help. I thought that this was solved, but there is one problem still. When you first load the page, if you click one of the tags (for example, 'Crews') and then click back to 'All,' it is no longer sorted by 'Mens' - instead it shows everything. Please fix this.

Thanks!

User Gravatar

Dreamsickle

Posted Apr 23 2014 15:01 UTC

Hi Dreamsickle,

Sorry about that. Can you please try this:

(function($) {
    $('#products').isotope()
        // initialize Isotope after all images have loaded
    var $container = $('#products').imagesLoaded( function() {

        $container.isotope({
        // options
            itemSelector: '.item',
            layoutMode: 'fitRows',
            filter: '.product-cat-mens.product-tag-all'
        });
    });


    // store filter for each group
    var filters = {};

    // filter items on click
    $('#product-tags').on( 'click', '.shop-sorter-button', function() {
        var $this = $(this);
        // get group key
        var $buttonGroup = $this.parents('.button-group');
        var filterGroup = $buttonGroup.attr('data-filter-group');
        // set filter for group
        filters[ filterGroup ] = $this.attr('data-filter');
        // combine filters
        var filterValue = '';
        for ( var prop in filters ) {
            filterValue += filters[ prop ];
        }
        // set filter for Isotope
        $container.isotope({ filter: filterValue });
    });

    $('#product-categories').on('click', '.shop-sorter-button', function() {
        var $this = $(this);

        var $activeTag = $('#product-tags').find('.shop-sorter-button').first().addClass('is-active');

        $activeTag.siblings().removeClass('is-active');

        // get group key
        var $buttonGroup = $this.parents('.button-group');
        var filterGroup = $buttonGroup.attr('data-filter-group');

        var $tagsGroup = $activeTag.parents('.button-group');
        var tagsGroup = $tagsGroup.attr('data-filter-group');

        filters[filterGroup] = $this.attr('data-filter');
        filters[tagsGroup] = $activeTag.attr('data-filter');

        // combine filters
        var filterValue = '';
        for ( var prop in filters ) {
            filterValue += filters[ prop ];
        }

        // set filter for Isotope
        $container.isotope({ filter: filterValue });
    });
        // change is-active class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );

        $buttonGroup
            .on( 'click', '.shop-sorter-button', function() {
                $buttonGroup.find('.is-active').removeClass('is-active');
                $( this ).addClass('is-active');
            })
            .find('.shop-sorter-button').first().trigger('click');
    });
}) (jQuery);

I think that the problem in the last code was that the click event handlers were in the imagesLoaded callback, so they were not listening to the 'trigger click' that I've forced.

Don't hesitate to contact me for fixes or help.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Apr 23 2014 15:39 UTC

Add a reply

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