Grid/List View jQuery + Categories Filter + Cookie

Posted under :
Download the script Check the demo

Grid/List View, its what we need in every e-commerce website, here we add a Category filter and Switching the view based on cookie to let the browser remember the choice of the user, ofcourse all the job is using jquery and without refreshing the page, take a look on the demo or use the link to download the project…

First of all, we call the CSS file and ofcourse je jQuery library in the head section and I used the Cookie Plugin v1.3.1 to make it more simple using the cookies

<link href="css/style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

Before explaining the javascript code, let me tell how all its working,
So, switching from a view to another, its just changing the style of the element containing the product, for example in the grid view the width of the product’s parent DIV have a 210px, changing the list view we will just change the width of the DIV to 670px, how we do that!? its simple we change the class of the div that it have new properties using jQuery. its the same like the last tuto :p

Using the cookies, we start we searching the cookie which it called “view” in our code, if we dont find it we create a new cookie with a default view “grid” or “list”

var default_view = 'grid';

if($.cookie('view') !== 'undefined'){
    $.cookie('view', default_view, { expires: 7, path: '/' });
} 

For every view change, we create a function

function get_grid(){
   $('.list').removeClass('list-active');
   $('.grid').addClass('grid-active');
   $('.prod-cnt').animate({opacity:0},function(){
     $('.prod-cnt').removeClass('prod-box-list');
     $('.prod-cnt').addClass('prod-box');
     $('.prod-cnt').stop().animate({opacity:1});
   });
}
function get_list(){
  $('.grid').removeClass('grid-active');
  $('.list').addClass('list-active');
  $('.prod-cnt').animate({opacity:0},function(){
      $('.prod-cnt').removeClass('prod-box');
      $('.prod-cnt').addClass('prod-box-list');
      $('.prod-cnt').stop().animate({opacity:1});
  });
}

Then we check the value of the “view” cookie and we call the view function (get_list() or get_grid()) to change the design and the same by clicking on the view buttons, just we change the cookie value with buttons
In the list cookie view, we avoid the animation cuz the default css used is the grid

if($.cookie('view') == 'list'){
    $('.grid').removeClass('grid-active');
    $('.list').addClass('list-active');
    $('.prod-cnt').animate({opacity:0});
    $('.prod-cnt').removeClass('prod-box-list');
    $('.prod-cnt').addClass('prod-box');
    $('.prod-cnt').stop().animate({opacity:1}); 
} 

if($.cookie('view') == 'grid'){ get_grid(); }

$('#list').click(function(){   
    $.cookie('view', 'list'); 
    get_list()
});

$('#grid').click(function(){ 
    $.cookie('view', 'grid'); 
    get_grid();
});

Now I will explain the filter code used for the categories :)
We create a menu containing a button for all the products, then we list the categories we have.
We create the “category” attribute with the category ID

<ul>
    <li class="cat-active" category="prod-cnt">All</li>
    <li category="cat-1">Category 1</li>
    <li category="cat-2">Category 2</li>
    <li category="cat-3">Category 3</li>
</ul>

And we add the Category ID in the class of every product container, for example :

<div class="prod-cnt prod-box shadow cat-1" >

The last thing we need to understand is the js code to make the filter working, by clicking on the category button, we add the “cat-active” to it to change the style of the button into clicked.
Then we make dissepear every product’s container that dont have the “Category Id” in it class, then we show the other product that have the “Category Id”, its a simple short way :)

$('.category-menu ul li').click(function(){
    var CategoryID = $(this).attr('category');
    $('.category-menu ul li').removeClass('cat-active');
    $(this).addClass('cat-active');
        
    $('.prod-cnt').each(function(){
        if(($(this).hasClass(CategoryID)) == false){
            $(this).css({'display':'none'});
        };
    });
    $('.'+CategoryID).fadeIn(); 
});

Make sure to download the project and understand more how its working, nothing is complicated, enjoy 😉



  • Vitor Neves

    Hi there
    Just a question. This works fine if i have the products listed with pagination?

    Regards

    • yes ofcourse, there s no problem, it should work fine

      • dados82

        I use this script on my local computer with xampp and everything work okay with pagination… but when I transfer it to live domain I have issues… On every page I need to click again to change list or grid style.. in local if I click on list style on first page every other page will get products with list style… same for grid style.. but on domain if I click on first page to show lists style on second page I need to click again to show lists style.. but this will remember now and will show again lists style if I back again to second page.. but why its not want to remember to show on all pages list style If is this chosen on first page???

        • you have to check the cookie if its working

          • dados82

            Can you maybe tell me how to check the cookie if its working… Because, for example, list style is on default set… and if I click on first page to show grid style and when I open second page its still list style and all other pages is still list style … but when I back to first page, he remembered that I chose grid style

          • dados82

            ahhhh its work.. I totaly forget something :) when I code template I done it in localhost.. so url was http://localhost/foldername and cookie work great.. then I upload template on domain and now url is http://domainname.com and I open it from same brower without delete the cookies .. but when I open it from Chrome template work great :) and without error… I apologize for the misunderstanding

  • Marcus

    Hi, great tutorial!
    Is it possible to build the entire product box as a link? Change the div for a a-tag? Also ad a hover effect on the entire box?

  • Alex

    Hi Amine, absolutly amazing script!!! Just one question – is it possible to get a nice effect like isotope, when i click one of the categories?

    • thx :) , Adding an isotope effect need some changes, first by changing the filter part in the code, you can find some information and documentation here : https://github.com/desandro/isotope
      don’t hesisate to subscribe to the newsletter, i will make the isotope tuto in the and sure you will be informed 😉

      • Alex

        Wow this would be amazing! Thanks in advance for the great help! Of course i wil subscribe to the newsletter 😉

  • Marcus

    Hi,
    When you have lots of products in the list and change category the page scrolls back to the top of the page (if you have scrolled down a bit). Is it possible to make the page not scroll back up?

    • its seems scrolling up, but its not, its just the page have less height so automatically you will see all the page

  • Rahim

    Hi, Thank You for such great tutorial.
    just a simple question, is there any trick to set the grid mode as default when first page is loaded!!

    Thank alot one more time, Subscribed :)

    • Rahim

      What a silly question, posted before I read the code, I used one of your recent tutorial which it had no default mode :)
      Cheers

  • Carlos

    Sorry but not working for me with pagination and php. Button must be
    clicked every time.

    • make sure you are including the “jquery.cookie.js”

      • Carlos

        Hi, Thanks for your response. I have solve it reading the cookie with php and aplying a conditional style, but I don´t think this is the best way to acomplish your tutorial.

  • Pingback: Trying to make buttons float right, but it doesn't work - QueryPost.com | QueryPost.com()

  • Carlos

    Hi. How do you solve the css design when the content has a different height in grid mode? I have seen people that uses grid/list swither appending elements with jquery. Could be this the best way to do it?

    • The simple way, is to play with the CSS not appending if we are talking of a dynamique content, but if you mean about height of the blocs, you can take a look at http://masonry.desandro.com/

  • Alex

    Hi Amine,

    i already ask this question with the isotope effect. Is there any chance to get this comparable effect or simply just fade out smooth, if one of the filter is clicked? I tried it with fadeOut and css3 transitions, but its not very nicely… Any suggestions?

  • William Oliveira

    if($.cookie(‘view’) !== ‘undefined’){
    $.cookie(‘view’, default_view, { expires: 7, path: ‘/’ });
    }
    big error, it only create the cookie if it alread have the cookie!

    should be if($.cookie(‘view’) == ‘undefined’)

  • Pingback: Cómo hacer un botón para cambiar de Listado a Rejilla con jQuery |()

  • Devstand

    awesome! Thank you so much I was looking for this kind of script for a while now!

  • User

    Hello!
    when the page is refreshed, after a change of style by the user, you get a 404 error tasks [grid] not found”
    please help to solve

  • Majid Lotfi

    Hi,
    Thanks for this tutorial, I am new in UI development , can you please tell me how to add pagination to this tutorial example ?
    Thanks, your help is appreciated.

  • Stephen

    Hey all, How can I remove the “all” category from showing when loading the page?

    • Patrick Bryan

      If you deleted it completely from the page, than all you have to do is set cat-2 and cat-3 to style = “display:none” in the css file.

  • it’s really amazine site i ever mate, thanks dude for this kind of tutorial. Hope can get more……and one think i want a commenting systeam like that comment is that possible ?

  • B L Praveen

    How can I have infinite scroll with the list?

  • Saifulloh An

    thx so much, it solves my problem :)

  • Goran

    Hi,
    I managed it to work and its great plugin BUT I have a lot of items in list, almost 300.. and just around 250 is loaded. Its like JS does not load all items.

    Is there some kind of limit?

    Thanks!

  • Pingback: Cómo hacer un botón para cambiar de Listado a Rejilla con jQuery « Alejandro Fanjul | Mi Blog Personal()

  • Justin Thomas

    How can I add search bar in it

  • Pingback: Nove switcher per passare da griglia a lista utilizzando CSS e Jquery – Web Lab24()

Be notified for new scripts