Switch Products View Grid/List Without Refreshing the Page With jQuery

Posted under :
Download the script Check the demo

You are building an e-commerce website? Here we go, you need a dedicated search page where you can list a number of products in every page, you need to have 2 differents view style like the grid view and the list view, this script is made to make it easy and simple to switch from a view to another without refreshing the page, we only need some lines of jQuery code and its done, just take a look in the demo 😉

Step by step, you will understand how it work, nothing is complicated, from basic things we can do everything

First of all, we call the CSS file and ofcourse je jQuery library in the head section

<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.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.

Let me show you with code, so:

Here is a sample of one product box, in the grid view div parent have “prod-box class attribute with 210px of with and dedicated css style for it that you can find in the style.css file, for the list view we change the class for “prod-box-list” which it contain property for the list view
for the description bloc, its set on display:none for the grid view

<div class="prod-box shadow">
  <img src="img/product1.jpg">
  <div class="buy-ico"></div>
  <h3>
      <a href="#">Product Title</a>
  </h3>
  <div class="price-cnt">
      <div class="price old">$15.00</div>
      <div class="price">$99.00</div>
  </div>
  <p>
     Product Description
  </p>
</div>

Until here with the structure of the product and it style in both views, we can say that we made most of the work, we need just to change the class attribute using jQuery.
To execute the change action we will create our ‘grid/list’ buttons, the style you can find it the style.css

<div id="list" class="list "></div>
<div id="grid" class="grid"></div>

Now the javascript code :
The action will be the click, on click, we will hide all the products DIVs by animating with a 0 opacity, then we will use the “attr” function to change the class attribute, then we show the products again with 1 opacity, ofcourse we dont forget the (grid/list) buttons for a nice view by adding a “grid-active” class which it have the selected style button, and we remove it the active (if it exist from the other button

$(function(){ 
    $('#list').click(function(){    
        $('.prod-box').animate({opacity:0},function(){
            $('.grid').removeClass('grid-active');
            $('.list').addClass('list-active');
            $('.prod-box').attr('class', 'prod-box-list shadow');
            $('.prod-box-list').stop().animate({opacity:1});
        });
    });

    $('#grid').click(function(){  
        $('.prod-box-list').animate({opacity:0},function(){
            $('.list').removeClass('list-active');
            $('.grid').addClass('grid-active');
            $('.prod-box-list').attr('class', 'prod-box shadow');
            $('.prod-box').stop().animate({opacity:1});
        });
    });
});


  • WMD WMD

    is it posiblle to add more grid lists so that is 4 in total..

    • the script can t be duplicated in one page

  • ruby

    It is possible to add the pagination

  • ruby

    I need pagination and filter option’s in above template, Its easy one or complicate or how to integrate both?

    • Pagination can be done with a query in a simple way or with ajax call if u dont want to refresh the page and to make it looks good, the same with the filter

  • Selma

    Hi,very good tut, everything is working fine, but I am wondering is there anyway to save the cookies of the mode selected?
    I’d appreciate if one of you guys can help.
    Thanks alot

  • Pingback: Adding $_COOKIE to a js code | BlogoSfera()

  • Austin Serio

    Is there any way I can remove the background coloring and boarder?

  • Bartosz Zalewski

    How to change the default list view from grid to list? And show the active view class on start?

  • Carlos Valmont

    Hello,

    I just found your site and exactly what i need the demo is very clear all is working perfect.

    I want to use this but on mobile but unfortunately is not responsive i dont know how to make it responsive

    if you can help me it would be great

    Best Regards

    • The simple way to make it “responsive”, is to adapt to height and width,
      In this example you can try to change the “width” into “max-width” and to add a new rule with “width:100%” in the “.prod-cnt” , “.prod-cnt” and the “.prod-cnt-list” , you can do it with images too to look nice, that should work

      In other way subscribe to the newsletter, you will be informed when i post an update with full responsive code

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

  • Stephen

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

Be notified for new scripts