How to make a grid/list toggle button and display

Here is a new how to on a feature we implemented on our shop : The possibility to change the display of the Virtuemart products from a Grid layout to a list layout without reloading the page and having multiple templates.

thumb grid-layoutthumb list-layout

You can see a live sample there

Template file

Let's start with a common grid layout by default.
In order to display 3 items per row, you can update the category and set the "Number of Products per Row" to 3.

Please note that this sample relies on Virtuemart default layout. If your template already has Virtuemart templates overloads, you might want to start from those instead.

So first of all, we will create a new layout that will be compatible with this grid / list layout.
Copy the file from 

/components/com_virtuemart/views/category/tmpl/default.php
to
/templates/your_template/html/com_virtuemart/category/gridlist.php

Toggler buttons

Find a good placement for the toggle buttons. A natural one is nect to the sort by and pagination buttons

<div class="orderby-displaynumber">
<div class="width70 floatleft">
<?php echo $this->orderByList['orderby']; ?>
<?php echo $this->orderByList['manufacturer']; ?>
</div>
<div class="width30 floatright display-number"><?php echo $this->vmPagination->getResultsCounter ();?><br/><?php echo $this->vmPagination->getLimitBox ($this->category->limit_list_step); ?></div>
<div class="vm-pagination">
<?php echo $this->vmPagination->getPagesLinks (); ?>
<span style="float:right"><?php echo $this->vmPagination->getPagesCounter (); ?></span>
</div>
<div class="clear"></div>
</div> <!-- end of orderby-displaynumber -->

We will add our togglers that consist of 2 links with ids "list" and "grid":

<div class="width30 floatleft gridlist">
<a href="#" id="list">List</a>
<a href="#" id="grid">Grid</a>
</div>

If you have Bootstrap loaded, you could quickcly design your buttons:

<div class="pull-left gridlist btn-group span2">
<a href="#" id="list" class="btn btn-primary"><span class="icon-th-list icon-white"></span>&nbsp;List</a>
<a href="#" id="grid" class="btn btn-default"><span class="icon-th"></span>&nbsp;Grid</a>
</div>

It will then look like this :

<div class="orderby-displaynumber">
<div class="pull-left gridlist btn-group span2">
<a href="#" id="list" class="btn btn-primary"><span class="icon-th-list icon-white"></span>&nbsp;List</a>
<a href="#" id="grid" class="btn btn-default"><span class="icon-th"></span>&nbsp;Grid</a>
</div>
<div class="width40 floatleft">
<?php echo $this->orderByList['orderby']; ?>
<?php echo $this->orderByList['manufacturer']; ?>
</div>
<div class="width30 floatright display-number"><?php echo $this->vmPagination->getResultsCounter ();?><br/><?php echo $this->vmPagination->getLimitBox ($this->category->limit_list_step); ?></div>
<div class="vm-pagination">
<?php echo $this->vmPagination->getPagesLinks (); ?>
<span style="float:right"><?php echo $this->vmPagination->getPagesCounter (); ?></span>
</div>
<div class="clear"></div>
</div> <!-- end of orderby-displaynumber -->

Javascript

We will use javascript to toggle a class name on the products containers

jQuery(document).ready(function($){
$('.gridlist a').click(function(){
//Make the button active or inactive
$('#list,#grid').toggleClass('btn-default btn-primary');
//Make sure the icon remains visible
$('#list span,#grid span').toggleClass('icon-white');
//Now add a class 'list-group-item' to all products containers when we want to display in a list mode.
$('.product').toggleClass('list-group-item');
return false;
});
});

CSS

We will use custom css classes to change the layout of the page depending on whether the 'list-group-item' class is applied or not.

/* Rearange elements positioning for list items */
.product.list-group-item {float: none;width: 100%;margin-left:0;}
.product.list-group-item .image-cont{margin-top:0;min-height:inherit;float:left;}
.product.list-group-item h3{float:left;font-size:110%;margin-top:2px;text-align:left;width:75%;}
.product.list-group-item .product-price{float:right;margin:0;}
.product .product_sdesc {
/*Hide the product short description when displaying in grid */
display:none;
}
.product.list-group-item .product_sdesc {
/*Show the product short description when displaying in list */
display:block;width:75%;margin-left:5px;margin-top:5px;float:left;
}

Get CComment PRO and let your users comment!
Top
SiteGround