[TUTORIAL] Grid / list / mini-list products view switcher

[vekia]

grid / list / mini-list products view switcher

If you want to create grid/list/mini-list products view switcher this guide is what you're looking for

read how easily you can create own switcher, no core modifications, only theme .tpl, .css and small .js

 

 

read guide here: grid / list / mini-list products view switcher

 

 

PrestaShop 1.7.x tutorial is available here:
https://www.prestashop.com/forums/topic/604990-tutorial-grid-list-switcher-change-products-display-method-in-prestashop-17/
 

[closeupman]

Hi Vekia, I tried it and got everything but the 'actions' to work. I posted http://www.prestashop.com/forums/topic/292342-grid-list-products-view-switch/?view=findpost&p=1473972 about it. Appreciate any help thanks!

 

http://www.sitinuriatistudio.com/large-sized-roses/

 

 

Never mind. I solved it.

Had to add the js code to the js/tools.js in the ROOT, not the theme.

 

However, when we upgrade...this will be lost, as I'

m modifying a core file.(though with 1.6 we will have this in the default theme )

 

Just checked, it's not working in Chrome or IE, just Firefox....how to fix?

Edited November 28, 2013 by closeupman (see edit history)

[carefaktor]

How do you make the grid list show as default rather than the list view?

[vekia]

How do you make the grid list show as default rather than the list view?

 

 

in product-list.tpl file you've got code:

<ul id="product_list{if isset($smarty.cookies.switchercookie) && $smarty.cookies.switchercookie=="grid"}_grid{/if}{if (isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="list") OR !isset($smarty.cookies.switchercookies)}{/if}{if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}_mini{/if}" class="clear prdlist">

change it to:

<ul id="product_list{if !isset($smarty.cookies.switchercookie)}_grid{/if}{if isset($smarty.cookies.switchercookie) && $smarty.cookies.switchercookie=="grid"}_grid{/if}{if (isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="list") OR !isset($smarty.cookies.switchercookies)}{/if}{if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}_mini{/if}" class="clear prdlist"> 

[carefaktor]

Works a treat. You are a PrestaShop Legend indeed

[cygumil]

Hi Vekia,

I follow all steps in your "grid/list/minilist product view switcher" tutorial, everything works great,

when  customer click the "add to chart" button, it directed to the checkout page, is it possible to maintain the default animation without directed to the checkout page?

thank you

[vekia]

hello

 

by default there should be an animation. you've got this option enabled?

also, can you share url? i will inspect it

[cygumil]

hello

 

by default there should be an animation. you've got this option enabled?

also, can you share url? i will inspect it

 

This is my experimental project on local server, I think it will be a good idea to make it online so you can inspect the codes and we can share to everyone here.

I'll upload my experimental project to the server, hopefully the url will be available in the next 9 hours, after my office hours (for I still working on the year end holiday )

[vekia]

feel free to PM me with url when everything will be ready, im so curious what's goin on there

[cygumil]

feel free to PM me with url when everything will be ready, im so curious what's goin on there

 

Hi Vekia,

as I promised before, here is my url : training.tokoluna.my.id

[vekia]

hello

 

i checked it.

 

your ajax cart feature is turned on? it looks like not.

 

modules > modules > cart block > configuration

[cygumil]

Hi Vekia,

I have checked my cart block module, it looks like I have activated my ajax cart mode,

would you like to check your codes? maybe the answer is burried under your codes

 

[vekia]

ok thank you for information, what ps version you use?

i will check it in the same ps version.

[cygumil]

ok thank you for information, what ps version you use?

i will check it in the same ps version.

 

I use Prestashop version: 1.5.6.1

[Eldemee]

Hi, How do you make the mini list show as default rather than the list view?

[vekia]

check post #4 here, do the same for minilist

[Eldemee]

Oh (blushing), was it that easy.... Sorry for the stupid query, though thanks A LOT for answering! 

[vekia]

no worries

not everyone knows this topic as I know

does it work as you expected?

[Eldemee]

Yes, thank you.

Only thing is that nothing happens when I try to switch view to say grid, though I will try post #2:s advice to relocate the code in the ROOT file instead of the theme.

Millions of thanks for this excellent forum! =)

[LucasSaraiva]

Help here please .. This doesn't changed nothing in my store 

 

ervanariasantateresinha.pt

 

 

see by this category 

 

http://ervanariasantateresinha.pt/100-plantas-medicinais

 

** COPY ALL THE CODE **

 

product-sort.tpl

{if isset($orderby) AND isset($orderway)}

{* On 1.5 the var request is setted on the front controller. The next lines assure the retrocompatibility with some modules *}
{if !isset($request)}
	<!-- Sort products -->
	{if isset($smarty.get.id_category) && $smarty.get.id_category}
		{assign var='request' value=$link->getPaginationLink('category', $category, false, true)}
	{elseif isset($smarty.get.id_manufacturer) && $smarty.get.id_manufacturer}
		{assign var='request' value=$link->getPaginationLink('manufacturer', $manufacturer, false, true)}
	{elseif isset($smarty.get.id_supplier) && $smarty.get.id_supplier}
		{assign var='request' value=$link->getPaginationLink('supplier', $supplier, false, true)}
	{else}
		{assign var='request' value=$link->getPaginationLink(false, false, false, true)}
	{/if}
{/if}
{if !isset($paginationId) || $paginationId == ''}
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
	if($('#layered_form').length == 0)
	{
 		$('.selectProductSort').change(function(){
			var requestSortProducts = '{$request}';
 			var splitData = $(this).val().split(':');
			document.location.href = requestSortProducts + ((requestSortProducts.indexOf('?') < 0) ? '?' : '&') + 'orderby=' + splitData[0] + '&orderway=' + splitData[1];
    	});
  	}
});
//]]>
</script>
{/if}
<form id="productsSortForm{if isset($paginationId)}_{$paginationId}{/if}" action="{$request|escape:'htmlall':'UTF-8'}" class="productsSortForm">
	<p class="select">
		<label for="selectPrductSort{if isset($paginationId)}_{$paginationId}{/if}">{l s='Sort by'}</label>
		<select id="selectPrductSort{if isset($paginationId)}_{$paginationId}{/if}" class="selectProductSort">
			<option value="{$orderbydefault|escape:'htmlall':'UTF-8'}:{$orderwaydefault|escape:'htmlall':'UTF-8'}" {if $orderby eq $orderbydefault}selected="selected"{/if}>{l s='--'}</option>
			{if !$PS_CATALOG_MODE}
				<option value="price:asc" {if $orderby eq 'price' AND $orderway eq 'asc'}selected="selected"{/if}>{l s='Price: Lowest first'}</option>
				<option value="price:desc" {if $orderby eq 'price' AND $orderway eq 'desc'}selected="selected"{/if}>{l s='Price: Highest first'}</option>
			{/if}
			<option value="name:asc" {if $orderby eq 'name' AND $orderway eq 'asc'}selected="selected"{/if}>{l s='Product Name: A to Z'}</option>
			<option value="name:desc" {if $orderby eq 'name' AND $orderway eq 'desc'}selected="selected"{/if}>{l s='Product Name: Z to A'}</option>
			{if $PS_STOCK_MANAGEMENT && !$PS_CATALOG_MODE}
				<option value="quantity:desc" {if $orderby eq 'quantity' AND $orderway eq 'desc'}selected="selected"{/if}>{l s='In stock'}</option>
			{/if}
			<option value="reference:asc" {if $orderby eq 'reference' AND $orderway eq 'asc'}selected="selected"{/if}>{l s='Reference: Lowest first'}</option>
			<option value="reference:desc" {if $orderby eq 'reference' AND $orderway eq 'desc'}selected="selected"{/if}>{l s='Reference: Highest first'}</option>
		</select>
	</p>
</form>
<div class="buttons_switcher">
 <span class="button_grid"></span>
 <span class="button_list"></span>
 <span class="button_minilist"></span>
</div>
<!-- /Sort products -->
{/if}

product-list.tpl

{if isset($products)}
    <!-- Products list -->
    <ul id="product_list{if isset($smarty.cookies.switchercookie) && $smarty.cookies.switchercookie=="grid"}_grid{/if}{if (isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="list") OR !isset($smarty.cookies.switchercookies)}{/if}{if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}_mini{/if}" class="clear prdlist">
    {foreach from=$products item=product name=products}
        <li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
            <div class="left_block">
                {if isset($comparator_max_item) && $comparator_max_item}
                    <p class="compare">
                        <input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} autocomplete="off"/> 
                        <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
                    </p>
                {/if}
            </div>
            <div class="center_block">
                <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
                    {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>{/if}
                    <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
                    {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
                </a>
                <h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if} {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
                <p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>
            </div>
            <div class="right_block">
                {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                <div class="content_price">
                    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
                    {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}<span class="warning_inline">{l s='Out of stock'}</span>{/if}</span>{/if}
                </div>
                    {if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}
                        <div class="minilist-badges">
                            {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
                            {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}
                        </div>
                    {/if}
                {/if}
                {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
                    {if ($product.allow_oosp || $product.quantity > 0)}
                        {if isset($static_token)}
                            <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
                        {else}
                            <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
                        {/if}                       
                    {else}
                        <span class="exclusive"><span></span>{l s='Add to cart'}</span><br />
                    {/if}
                {/if}
                <a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
            </div>
        </li>
    {/foreach}
    </ul>
    <!-- /Products list -->
{/if}

product-list.css

/** PRODUCT LIST **/
 
#product_list .minilist-badges {display:none;}
ul#product_list {
    list-style-type: none
}
 
        #product_list li h3 span.new {
        display:none!important;
        }
           
    #product_list li {
        margin-bottom: 14px;
        padding: 12px 8px;
        border: 1px solid #eee;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px
    }
        #product_list li a {
            color: #374853;
            text-decoration: none
        }
 
#product_list li .left_block {
    float:left;
    padding-top:58px;
    width:15px
}
    #product_list li .left_block  .compare label {display:none;}
 
        #product_list li p.compare input {
            vertical-align: text-bottom
        }
 
#product_list li .center_block {
   float: left;
    padding:0 7px;
   width: 342px;/* 356 */
    border-right:1px dotted #ccc
}
    #product_list a.product_img_link {
        overflow:hidden;
        position:relative;
        float: left;
        display:block;
        margin-right: 14px;
        border: 1px solid #ccc
    }
        #product_list a.product_img_link img {
            display: block;
            vertical-align: bottom
        }
        #product_list li span.new {
            display: block;
            position: absolute;
            top: 15px;
            right:-30px;
            padding: 1px 4px;
            width: 101px;
            font-size:10px;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform:rotate(45deg);
            background-color: #990000;
            transform: rotate(45deg); 
            -ms-transform: rotate(45deg);           /* Newer browsers */
        }
         
        .ie8 #product_list li span.new{top:111px;right:0;width:94%}
        .ie7 #product_list li span.new {top:111px;right:0;width:94%}
    #product_list li h3 {
        padding:0 0 10px 0;
        font-size:13px;
        color:#000
    }
        #product_list li a {
            color: #000;
            text-decoration: none;
        }
 
    #product_list li p.product_desc {
        overflow: hidden;
        padding:0;
        line-height:16px;
    }
    #product_list li p.product_desc,
    #product_list li p.product_desc a {
        color:#666;
    }
 
#product_list li .right_block {
    position:relative;
   float: left;
   width: 145px;
   text-align: right
}
    #product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
        display: block;
        font-weight: bold;
        color: #990000;
        text-transform: uppercase;
        position:absolute;
        background:red;
        color:#FFF;
        padding:2px 5px;
        bottom:0px;
        left:0px;
    }
    #product_list li .online_only {
        margin:0 0 10px 0
    }
    #product_list li .content_price {
        margin:26px 0 15px 0;
    }
    #product_list li .price {
        display: block;
        margin-bottom: 15px;
        font-weight:bold;
        font-size: 18px;
        color:#990000
    }
    #product_list li span.availability {
            color: #488C40
    }
    #product_list li .ajax_add_to_cart_button {
        padding-left: 20px
    }
    #product_list li .ajax_add_to_cart_button span {
        display: block;
        position: absolute;
        top: -1px;
        left: -12px;
        height: 26px;
        width: 26px;
        background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
    }
    #product_list li .lnk_view {
        display: block;
        margin-top:15px;
        padding:0 10px;
        border:none;
        font-weight:bold;
        color:#0088CC;
        background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent
    }
    #product_list li .lnk_view:hover {text-decoration:underline}
     
 
 
 
/** PRODUCT GRID **/
 #product_list_grid li h3 span.new {
        display:none!important;
        }
#product_list_grid .minilist-badges {display:none;}
    ul#product_list_grid {
        list-style-type: none;
        vertical-align:top;
        display:block;
        clear:both;
    }
     
    #product_list_grid li {
        overflow:hidden;
        margin-bottom: 14px;
        padding: 10px;
        border: 1px solid #eee;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        display:inline-block;
        width:153px;
        height:270px;
    }
     
    #product_list_grid li a {
       color: #374853;
       text-decoration: none
    }
 
     
    #product_list_grid .left_block {
        display:block;
        clear:both;
        overflow:hidden;
        height:20px;
        text-align:center;
        margin-top:10px;
    }
     
    #product_list_grid li p.compare input {
       vertical-align: text-bottom
    }
 
    #product_list_grid li .center_block {
        width: 100%;
        display:block;
        text-align:center;
    }
     
    #product_list_grid a.product_img_link {
        overflow:hidden;
        display:block;
        border: 1px solid #ccc;
        margin:auto;
        display:block;
        width:126px;
        clear:both;
        position:relative;
    }
        #product_list_grid a.product_img_link img {
            display: block;
            vertical-align: bottom
        }
        #product_list_grid li span.new {
            display: block;
            position: absolute;
            top: 15px;
            right:-30px;
            padding: 1px 4px;
            width: 101px;
            font-size:10px;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform:rotate(45deg);
            background-color: #990000;
            transform: rotate(45deg); 
            -ms-transform: rotate(45deg);           /* Newer browsers */
        }
         
        .ie8 #product_list_grid li span.new{top:111px;right:0;width:94%}
        .ie7 #product_list_grid li span.new {top:111px;right:0;width:94%}
     
    #product_list_grid li h3 {
        padding:5px;
        font-size:13px;
        color:#000;
        display:block;
        text-align:center;
    }
        #product_list_grid li a {
            color: #000;
            text-decoration: none;
        }
 
    #product_list_grid li p.product_desc {
        overflow: hidden;
        padding:0;
        line-height:16px;
        display:none;
    }
    #product_list_grid li p.product_desc,
    #product_list_grid li p.product_desc a {
        color:#666;
    }
 
#product_list_grid li .right_block {
   width: 153px;
   text-align:center;
   margin-top:5px;
   margin-bottom:5px;
}
    #product_list_grid li .discount , #product_list_grid li .discount, ul#product_list_grid li .on_sale, ul#product_list_grid li .online_only {
        display: block;
        font-weight: bold;
        color: #990000;
        text-transform: uppercase;
        position:absolute;
        background:red;
        color:#FFF;
        padding:2px 5px;
        bottom:0px;
        left:0px;
 
    }
 
     
    #product_list_grid li .online_only {
        margin:0 0 10px 0
    }
    #product_list_grid li .content_price {
    }
    #product_list_grid li .price {
        display: block;
        margin-bottom: 15px;
        font-weight:bold;
        font-size: 18px;
        color:#990000
    }
    #product_list_grid li span.availability {
            color: #488C40
    }
    #product_list_grid li .ajax_add_to_cart_button span {
        display: block;
        position: absolute;
        top: -1px;
        left: -12px;
        height: 26px;
        width: 26px;
        background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent;
        display:none;
    }
    #product_list_grid li .lnk_view {
        display: block;
        margin-top:15px;
        padding:0 10px;
        border:none;
        font-weight:bold;
        color:#0088CC;
        background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent;
        display:none;
    }
    #product_list_grid li .lnk_view:hover {text-decoration:underline}
     
 
 
/** PRODUCT LIST MINI **/
    #product_list_mini .minilist-badges {
        text-align: center;
        position: relative;
        float: left;
        margin-left: 10px;
        width: 120px;
        display: block;
    }
    ul#product_list_mini {
        list-style-type: none
    }
     
    #product_list_mini li {
        padding: 15px 8px;
        border: 1px solid #eee;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border-bottom:none!important;
    }
        #product_list_mini li a {
            color: #374853;
            text-decoration: none
        }
 
    #product_list_mini li .left_block {
        float:left;
        width:15px
    }
    #product_list_mini li .left_block  .compare label {display:none;}
 
    #product_list_mini li p.compare input {
       vertical-align: text-bottom
    }
 
    #product_list_mini li .center_block {
       float: left;
        padding:0 7px;
       width: 202px;/* 356 */
    }
    #product_list_mini a.product_img_link {
        overflow:hidden;
        position:relative;
        float: left;
        display:block;
        margin-right: 14px;
        border: 1px solid #ccc;
        display:none;
    }
        #product_list_mini a.product_img_link img {
            display: block;
            vertical-align: bottom
        }
 
         
        .ie8 #product_list_mini li span.new{top:111px;right:0;width:94%}
        .ie7 #product_list_mini li span.new {top:111px;right:0;width:94%}
    #product_list_mini li h3 {
        padding:0 0 10px 0;
        font-size:12px;
        color:#000;
        display:inline-block;
        float:left;
        position:relative;
    }
    #product_list_mini li h3 span.new {
        display:inline-block!important;
        position:relative!important;
        margin-right:1px;
             
    }
     
        #product_list_mini li a {
            color: #000;
            text-decoration: none;
        }
 
    #product_list_mini li p.product_desc {
        overflow: hidden;
        padding:0;
        line-height:16px;
        display:none;
    }
    #product_list_mini li p.product_desc,
    #product_list_mini li p.product_desc a {
        color:#666;
    }
 
#product_list_mini li .right_block {
    position:relative;
   float: left;
   width: 285px;
   text-align: right
}
    #product_list_mini li span.discount ,#product_list_mini li span.new , #product_list_mini li .discount, ul#product_list_mini li .on_sale, ul#product_list_mini li .online_only {
        display: block;
        font-weight: bold;
        text-transform: uppercase;
        position:absolute;
        left:0px;
        top:0px;
        background:red;
        color:white;
        padding: 2px 5px;
        font-size:10px;
    }
    #product_list_mini li .discount {
       margin-right: 20px;
        display: inline-block;
        font-weight: bold;
        padding: 1px 5px;
        font-size: 10px;
        color: #fff;
        text-transform: uppercase;
        background: none repeat scroll 0 0 #9B0000
    }
    #product_list_mini li .online_only {
        margin:0 0 10px 0
    }
    #product_list_mini li .content_price {
        display:inline-block;
        float:left;
    }
    #product_list_mini li .price {
        display: block;
        margin-bottom: 15px;
        font-weight:bold;
        font-size: 18px;
        color:#990000
    }
    #product_list_mini li span.availability {
            color: #488C40
    }
     
    #product_list_mini li .right_block .ajax_add_to_cart_button span {
        display: block;
        position: absolute;
        top: -1px; 
        left: -12px;
        height: 26px;
        width: 26px;
        background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent;
        display:none;
    }
    #product_list_mini li .lnk_view {
        display: block;
        margin-top:15px;
        padding:0 10px;
        border:none;
        font-weight:bold;
        color:#0088CC;
        background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent;
        display:none;
    }
    #product_list_mini li .lnk_view:hover {text-decoration:underline}
 
 
 
 
/** MYPRESTA.EU CODE FOR GRID/LIST/MINILIST SWITCHER **/
.buttons_switcher { position:relative; display:inline-block; float:right; margin-right:20px;}
.button_grid { cursor:pointer; margin:auto; padding:0px; display:inline-block; width:19px; height:19px; background:url(../img/mypresta/button_grid.png) no-repeat top left;}
.button_list { cursor:pointer; margin:auto; padding:0px; display:inline-block; width:19px; height:19px; background:url(../img/mypresta/button_list.png) no-repeat top left;}
.button_minilist { cursor:pointer; margin:auto; padding:0px; display:inline-block; width:19px; height:19px; background:url(../img/mypresta/button_minilist.png) no-repeat top left;}

tools.js

/** MYPRESTA GRID/LIST/MINILIST SWITCHER **/
$(document).ready(function() {
   
/*!
 * jQuery Cookie Plugin v1.4.0
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2013 Klaus Hartl
 * Released under the MIT license
 */
(function (factory) {
        if (typeof define === 'function' && define.amd) {
                // AMD. Register as anonymous module.
                define(['jquery'], factory);
        } else {
                // Browser globals.
                factory(jQuery);
        }
}(function ($) {
 
        var pluses = /\+/g;
 
        function encode(s) {
                return config.raw ? s : encodeURIComponent(s);
        }
 
        function decode(s) {
                return config.raw ? s : decodeURIComponent(s);
        }
 
        function stringifyCookieValue(value) {
                return encode(config.json ? JSON.stringify(value) : String(value));
        }
 
        function parseCookieValue(s) {
                if (s.indexOf('"') === 0) {
                        // This is a quoted cookie as according to RFC2068, unescape...
                        s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
                }
 
                try {
                        // Replace server-side written pluses with spaces.
                        // If we can't decode the cookie, ignore it, it's unusable.
                        // If we can't parse the cookie, ignore it, it's unusable.
                        s = decodeURIComponent(s.replace(pluses, ' '));
                        return config.json ? JSON.parse(s) : s;
                } catch(e) {}
        }
 
        function read(s, converter) {
                var value = config.raw ? s : parseCookieValue(s);
                return $.isFunction(converter) ? converter(value) : value;
        }
 
        var config = $.cookie = function (key, value, options) {
 
                // Write
                if (value !== undefined && !$.isFunction(value)) {
                        options = $.extend({}, config.defaults, options);
 
                        if (typeof options.expires === 'number') {
                                var days = options.expires, t = options.expires = new Date();
                                t.setDate(t.getDate() + days);
                        }
 
                        return (document.cookie = [
                                encode(key), '=', stringifyCookieValue(value),
                                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                                options.path    ? '; path=' + options.path : '',
                                options.domain  ? '; domain=' + options.domain : '',
                                options.secure  ? '; secure' : ''
                        ].join(''));
                }
 
                // Read
 
                var result = key ? undefined : {};
 
                // To prevent the for loop in the first place assign an empty array
                // in case there are no cookies at all. Also prevents odd result when
                // calling $.cookie().
                var cookies = document.cookie ? document.cookie.split('; ') : [];
 
                for (var i = 0, l = cookies.length; i < l; i++) {
                        var parts = cookies[i].split('=');
                        var name = decode(parts.shift());
                        var cookie = parts.join('=');
 
                        if (key && key === name) {
                                // If second argument (value) is a function it's a converter...
                                result = read(cookie, value);
                                break;
                        }
 
                        // Prevent storing a cookie that we couldn't decode.
                        if (!key && (cookie = read(cookie)) !== undefined) {
                                result[name] = cookie;
                        }
                }
 
                return result;
        };
 
        config.defaults = {};
 
        $.removeCookie = function (key, options) {
                if ($.cookie(key) === undefined) {
                        return false;
                }
 
                // Must not alter options, thus extending a fresh object...
                $.cookie(key, '', $.extend({}, options, { expires: -1 }));
                return !$.cookie(key);
        };
 
}));
     
  $(".button_grid").click(function() {
     $.cookie("switchercookie", "grid");
     $(".prdlist").attr("id","product_list_grid");
  });
  $(".button_list").click(function() {
    $.cookie("switchercookie", "list");
    $(".prdlist").attr("id","product_list");
  });
  $(".button_minilist").click(function() {
    $.cookie("switchercookie", "minilist");
    $(".prdlist").attr("id","product_list_mini");
  });
});

function ps_round(value, precision)
{
	if (typeof(roundMode) === 'undefined')
		roundMode = 2;
	if (typeof(precision) === 'undefined')
		precision = 2;
	
	method = roundMode;
	if (method === 0)
		return ceilf(value, precision);
	else if (method === 1)
		return floorf(value, precision);
	precisionFactor = precision === 0 ? 1 : Math.pow(10, precision);
	return Math.round(value * precisionFactor) / precisionFactor;
}

function ceilf(value, precision)
{
	if (typeof(precision) === 'undefined')
		precision = 0;
	precisionFactor = precision === 0 ? 1 : Math.pow(10, precision);
	tmp = value * precisionFactor;
	tmp2 = tmp.toString();
	if (tmp2[tmp2.length - 1] === 0)
		return value;
	return Math.ceil(value * precisionFactor) / precisionFactor;
}

function floorf(value, precision)
{
	if (typeof(precision) === 'undefined')
		precision = 0;
	precisionFactor = precision === 0 ? 1 : Math.pow(10, precision);
	tmp = value * precisionFactor;
	tmp2 = tmp.toString();
	if (tmp2[tmp2.length - 1] === 0)
		return value;
	return Math.floor(value * precisionFactor) / precisionFactor;
}

function formatedNumberToFloat(price, currencyFormat, currencySign)
{
	price = price.replace(currencySign, '');
	if (currencyFormat === 1)
		return parseFloat(price.replace(',', '').replace(' ', ''));
	else if (currencyFormat === 2)
		return parseFloat(price.replace(' ', '').replace(',', '.'));
	else if (currencyFormat === 3)
		return parseFloat(price.replace('.', '').replace(' ', '').replace(',', '.'));
	else if (currencyFormat === 4)
		return parseFloat(price.replace(',', '').replace(' ', ''));
	return price;
}

//return a formatted price
function formatCurrency(price, currencyFormat, currencySign, currencyBlank)
{
	// if you modified this function, don't forget to modify the PHP function displayPrice (in the Tools.php class)
	blank = '';
	price = parseFloat(price.toFixed(6));
	price = ps_round(price, priceDisplayPrecision);
	if (currencyBlank > 0)
		blank = ' ';
	if (currencyFormat == 1)
		return currencySign + blank + formatNumber(price, priceDisplayPrecision, ',', '.');
	if (currencyFormat == 2)
		return (formatNumber(price, priceDisplayPrecision, ' ', ',') + blank + currencySign);
	if (currencyFormat == 3)
		return (currencySign + blank + formatNumber(price, priceDisplayPrecision, '.', ','));
	if (currencyFormat == 4)
		return (formatNumber(price, priceDisplayPrecision, ',', '.') + blank + currencySign);
	if (currencyFormat == 5)
		return (currencySign + blank + formatNumber(price, priceDisplayPrecision, '\'', '.'));
	return price;
}

//return a formatted number
function formatNumber(value, numberOfDecimal, thousenSeparator, virgule)
{
	value = value.toFixed(numberOfDecimal);
	var val_string = value+'';
	var tmp = val_string.split('.');
	var abs_val_string = (tmp.length === 2) ? tmp[0] : val_string;
	var deci_string = ('0.' + (tmp.length === 2 ? tmp[1] : 0)).substr(2);
	var nb = abs_val_string.length;

	for (var i = 1 ; i < 4; i++)
		if (value >= Math.pow(10, (3 * i)))
			abs_val_string = abs_val_string.substring(0, nb - (3 * i)) + thousenSeparator + abs_val_string.substring(nb - (3 * i));

	if (parseInt(numberOfDecimal) === 0)
		return abs_val_string;
	return abs_val_string + virgule + (deci_string > 0 ? deci_string : '00');
}

//change the text of a jQuery element with a sliding effect (velocity could be a number in ms, 'slow' or 'fast', effect1 and effect2 could be slide, fade, hide, show)
function updateTextWithEffect(jQueryElement, text, velocity, effect1, effect2, newClass)
{
	if(jQueryElement.text() !== text)
		if(effect1 === 'fade')
			jQueryElement.fadeOut(velocity, function(){
				$(this).addClass(newClass);
				if(effect2 === 'fade') $(this).text(text).fadeIn(velocity);
				else if(effect2 === 'slide') $(this).text(text).slideDown(velocity);
					else if(effect2 === 'show')	$(this).text(text).show(velocity, function(){});
			});
		else if(effect1 === 'slide')
			jQueryElement.slideUp(velocity, function(){
				$(this).addClass(newClass);
				if(effect2 === 'fade') $(this).text(text).fadeIn(velocity);
				else if(effect2 === 'slide') $(this).text(text).slideDown(velocity);
					else if(effect2 === 'show')	$(this).text(text).show(velocity);
			});
			else if(effect1 === 'hide')
				jQueryElement.hide(velocity, function(){
					$(this).addClass(newClass);
					if(effect2 === 'fade') $(this).text(text).fadeIn(velocity);
					else if(effect2 === 'slide') $(this).text(text).slideDown(velocity);
						else if(effect2 === 'show')	$(this).text(text).show(velocity);
				});
}

//show a JS debug
function dbg(value)
{
	var active = false;//true for active
	var firefox = true;//true if debug under firefox

	if (active)
		if (firefox)
			console.log(value);
		else
			alert(value);
}

/**
* Function : print_r()
* Arguments: The data  - array,hash(associative array),object
*            The level - OPTIONAL
* Returns  : The textual representation of the array.
* This function was inspired by the print_r function of PHP.
* This will accept some data as the argument and return a
* text that will be a more readable version of the
* array/hash/object that is given.
*/
function print_r(arr, level)
{
	var dumped_text = "";
	if (!level)
		level = 0;

	//The padding given at the beginning of the line.
	var level_padding = "";
	for (var j = 0 ; j < level + 1; j++)
		level_padding += "    ";

	if (typeof(arr) === 'object')
	{ //Array/Hashes/Objects 
		for (var item in arr)
		{
			var value = arr[item];
			if (typeof(value) === 'object') { //If it is an array,
				dumped_text += level_padding + "'" + item + "' ...\n";
				dumped_text += dump(value,level+1);
			}
			else
			{
				dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
			}
		}
	}
	else
	{ //Stings/Chars/Numbers etc.
		dumped_text = "===>" + arr + "<===("+typeof(arr)+")";
	}
	return dumped_text;
}

//verify if value is in the array
function in_array(value, array)
{
	for (var i in array)
		if (array[i] === value)
			return true;
	return false;
}

function resizeAddressesBox(nameBox)
{
	maxHeight = 0;

	if (typeof(nameBox) === 'undefined')
		nameBox = '.address';
	$(nameBox).each(function()
	{
		$(this).css('height', 'auto');
		currentHeight = $(this).height();
		if (maxHeight < currentHeight)
			maxHeight = currentHeight;
	});
	$(nameBox).height(maxHeight);
}

$(document).ready(function() {
	$.fn.checkboxChange = function(fnChecked, fnUnchecked) {
		if ($(this).prop('checked') && fnChecked)
			fnChecked.call(this);
		else if(fnUnchecked)
			fnUnchecked.call(this);
		
		if (!$(this).attr('eventCheckboxChange'))
		{
			$(this).live('change', function() { $(this).checkboxChange(fnChecked, fnUnchecked); });
			$(this).attr('eventCheckboxChange', true);
		}
	};
});


// Use it to simulate target blank link
$(function(){
    $('a.js-new-window').click(function(){
        window.open(this.href);
        return false;
    });
});

Edited February 14, 2014 by LucasSaraiva (see edit history)

[vekia]

1) no images copied: http://ervanariasantateresinha.pt/themes/default/img/mypresta/button_grid.png

2) no script in tools.js http://ervanariasantateresinha.pt/js/tools.js
 

[LucasSaraiva]

1)Done ( putted :http://ervanariasantateresinha.pt/themes/default/img/mypresta/directory/button_grid.png -- duuuhhh xD)

2) Done  (eddited the tools.js from theme - Omg XD )

 

Still not working and doesn't appear nothing

 

PS: IT WORKS ... OMFG SOO BEAUTIFUL THANKS THANKS THANKS 

 

 

Just a question .... how can i make grid default just for one category .... Just for one .....

 

This one:

http://ervanariasantateresinha.pt/100-plantas-medicinais

 

 

 

Please tell me that this work please

 

VEKIA YOU ARE THE BEST Thanks For real

Edited February 14, 2014 by LucasSaraiva (see edit history)

[vekia]

now press ctrl+F5

magic

 

 

[LucasSaraiva]

Yes Vekia it's working (*read my last post*) .... but can you please tell me how to putt 

 

http://ervanariasantateresinha.pt/100-plantas-medicinais    - Grid Default 

 

All the other categories  - List view 

 

 

Vekia- The Prestashop LEGEND

Edited February 14, 2014 by LucasSaraiva (see edit history)

[vekia]

hello

 

use this code instead of original:

 

<ul id="product_list{if isset($smarty.cookies.switchercookie) && $smarty.cookies.switchercookie=="grid"}_grid{/if}{if (isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="list") OR !isset($smarty.cookies.switchercookies)}{if $smarty.get.id_category==100}grid{/if}{/if}{if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}_mini{/if}" class="clear prdlist">

[LucasSaraiva]

 

hello

 

use this code instead of original:

 

<ul id="product_list{if isset($smarty.cookies.switchercookie) && $smarty.cookies.switchercookie=="grid"}_grid{/if}{if (isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="list") OR !isset($smarty.cookies.switchercookies)}{if $smarty.get.id_category==100}grid{/if}{/if}{if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}_mini{/if}" class="clear prdlist">

 

Hy vekia... i have traded on product-list.tpl

 

this

<ul id="product_list{if isset($smarty.cookies.switchercookie) && $smarty.cookies.switchercookie=="grid"}_grid{/if}{if (isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="list") OR !isset($smarty.cookies.switchercookies)}{/if}{if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}_mini{/if}" class="clear prdlist">

for this :

<ul id="product_list{if isset($smarty.cookies.switchercookie) && $smarty.cookies.switchercookie=="grid"}_grid{/if}{if (isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="list") OR !isset($smarty.cookies.switchercookies)}{if $smarty.get.id_category==100}grid{/if}{/if}{if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}_mini{/if}" class="clear prdlist">

and the result was :

 

 

 

:/ what was wrong?

Edited February 16, 2014 by LucasSaraiva (see edit history)

[vekia]

it was my typo, sorry

 

i suggested to use:

<ul id="product_list{if isset($smarty.cookies.switchercookie) && $smarty.cookies.switchercookie=="grid"}_grid{/if}{if (isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="list") OR !isset($smarty.cookies.switchercookies)}{if $smarty.get.id_category==100}grid{/if}{/if}{if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}_mini{/if}" class="clear prdlist">

 

and it should be:

<ul id="product_list{if isset($smarty.cookies.switchercookie) && $smarty.cookies.switchercookie=="grid"}_grid{/if}{if (isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="list") OR !isset($smarty.cookies.switchercookies)}{if $smarty.get.id_category==100}_grid{/if}{/if}{if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}_mini{/if}" class="clear prdlist">

[LucasSaraiva]

Working *-* thanks

[vekia]

you're welcome and thank you for your patience

[arthurcameron]

Works a treat. You are a PrestaShop Legend indeed

Yes, right. like legend

 

[dudikpal]

When i change to grid(this is the default btw), or minilist, the sorting is not working, only in list mode.

I added the script to productlist.tpl, because in the tools.js not worked.

 

This problem on PrestaShop™ 1.5.6.1

Edited February 18, 2014 by dudikpal (see edit history)

[vekia]

When i change to grid(this is the default btw), or minilist, the sorting is not working, only in list mode.

I added the script to productlist.tpl, because in the tools.js not worked.

 

This problem on PrestaShop™ 1.5.6.1

 

 

tools.js in main /js/ directory, not in tools.js in your theme directory.

about what sorting method you're talking? block layered? or standard sorting?

[dudikpal]

tools.js in main /js/ directory, not in tools.js in your theme directory.

about what sorting method you're talking? block layered? or standard sorting?

 

I added the right tools.js, same problem(the switch modification also working when the script in the productlist.tpl btw),

Dont working the block layered, and the standard sorting neither only in list mode.

Edited February 18, 2014 by dudikpal (see edit history)

[vekia]

check this: http://demo.mypresta.eu/en/3-music-ipods?&orderby=price&orderway=asc

sorting works

[dudikpal]

check this: http://demo.mypresta.eu/en/3-music-ipods?&orderby=price&orderway=asc

sorting works

Yes, I see. After sorting change, the entire page reloading, this is normal?

I did it again the code change, but still not working.

 

Anyway, when I made this modification, the add to cart is not working, only after I refresh the page...I dont know, maybe cohere this 2 things?

[vekia]

it's normal that page reloading while you changing the sort method

[vekia]

+ http://www.prestashop.com/forums/topic/264745-tutorial-quantity-field-in-home-featured-module/?p=1353838

[dudikpal]

it's normal that page reloading while you changing the sort method

On me in the list mode, dont load the entire page, just the java"clock" rounding, and the product list changing, like in my actual shop(1.4.8.2), try it.

 

Edit:

I found this, without solving, but this is exactly the problem:

The "Sort by" will not work when "Layered Nav" is active.

Everything works fine with "Layered Nav" disabled.

 

Edit2:

The problem still, when I adding template in the layered navigation module.

After deleting template, the product list sorting working fine.

Edited February 18, 2014 by dudikpal (see edit history)

[dudikpal]

+ http://www.prestashop.com/forums/topic/264745-tutorial-quantity-field-in-home-featured-module/?p=1353838

Thank You! Dunno why, escaped my attention

[ALMAJ]

Hi Vekia, I have follow your great tutorial here 

but unfortunately the "Layered navigation block" and "Sort by" it's not working

when the products are displayed in "Grid view" or in "mini list view" it works only in Normal "List view"

I've follow some tips here but it's not working...

Can you please help me please?

 

Prestashop 1.5.6.2

Default theme with design modifications (no core modification)

URL: www.tekcenter.pt/store

 

 

Best regards

[eburgaz]

Hello!
 I have problem too, like thath in to photo:

 

http://bigsam.net.ua/en/20-bigsam-men-tshirt 

 

Can do someone help me please?

[vekia]

Hello!

 I have problem too, like thath in to photo:

 

http://bigsam.net.ua/en/20-bigsam-men-tshirt 

 

Can do someone help me please?

 

 

i don't see there any problem,

can you describe it a bit, please?

[vekia]

ahhh now i understand!

you're talking about this gap

 

 

?

[eburgaz]

Yess

Thats right.

 

ahhh now i understand!

you're talking about this gap

 

 

?

[vekia]

i've noticed that your website is not based on tutorial described in this topic.

you use some different solution?

[eburgaz]

Like what and where?

 

i've noticed that your website is not based on tutorial described in this topic.

you use some different solution?

[vekia]

Like what and where?

 

i mean that this topic is a "tutorial" about creating own grid / list switcher on category pages: http://www.prestashop.com/forums/topic/290792-tutorial-grid-list-mini-list-products-view-switcher/

 

so i checked your page to see the switcher, and i've noticed that you use different solution. not solution provided in this topic.

[amorpheous]

Hi Vekia,

 

Is this solution working for 1.6 also?

 

Thanks,

Waj

[vekia]

if you're asking me about default bootstrap theme - prestashop 1.6 has got grid / list switcher by default.

if you want to use it in "default" theme from 1.5 in 1.6 it will work.

[cosmin.ignea]

Hello.

First of all, Thank you for this great tutorial. Everything works fine, except just one thing:

If I use grid view, i can't use layered navigation. I need to switch to list view to can use it.

 

Can you help me?

 

Thank you very much.

 

Link: http://mywallbed.co.uk/10-wallbeds

 

PS 1.5.6.1

Edited May 2, 2014 by cosmin.ignea (see edit history)

[Shido]

Hi Vekia

 

Do we have to replace the content of :

product-list.tpl

product_list.css

tools.js

or just add your code inside these files ?

[Shido]

So i decided to replace or add the content of the files and nothing happened.

Just the 3 icons appears...

 

Any help please ?

[vekia]

hello

after changes make sure that you:

- recompiled theme

- changed correct file mentioned in tutorial (especially related to tools.js file)

[Shido]

Yes ! I forgot to recompile the theme with a ctrl+F5 and it's perfectly functional !!

 

Thanks Vekia !!

Edited May 14, 2014 by Shido (see edit history)

[vekia]

you're welcome ;-)

glad to hear that i could help, even a little

 

with regards,

Milos

[cosmin.ignea]

Hi Vekia.

Any solution for my problem?

 

Thanks

[vekia]

problem is with css styles in this case and naming of the divs

i changed in this tutorial id="" param, this is because

instead of it its necessary to operate on class="" instead of id=""

[cosmin.ignea]

Thanks for answer. Can you tell me what and where I need to change?

 

Thanks

[sarole]

I'm sorry if i'm too late to reply to this post but i couldn't find one better to post my question.

 

I'm using prestashop 1.6 and the default theme Bootstrap. This theme already has the switcher but it don't have minilist that is the one i wanted.

 

I tried to adapt the code to fit 1.6 but it didn't came up very well.

 

Can you help me?

[amorpheous]

Hi Vekia,

 

Thank you so much for your work. It is truly appreciated by me and my customers who love this switcher and the different views.

 

Unfortunately, after applying this the sorting function is not working anymore. I know it must work since in your demo, sorting is working. I have modified the files as you have defined. Can you please help me figure out this sorting problem?

 

PS: 1.5.6.1

 

Thanks,

Waj

[frugalis]

Hello Vekia and everyone, could you please give me a hand in adapting the mini-list display to the Prestashop 1.6 ? I had laboriously done the following actions and need help for js and probably product-list.tpl files :

 

1) Add AWesome font icon in global.css  for a MiniList display

2) modify product-sort.tpl
    <li id="grid"><a rel="nofollow" href="#" title="{l s='Grid'}"><i class="icon-th-large"></i>{l s='Grid'}</a></li>
    <li id="list"><a rel="nofollow" href="#" title="{l s='List'}"><i class="icon-th-list"></i>{l s='List'}</a></li>
    <li id="list"><a rel="nofollow" href="#" title="{l s='MiniList'}"><i class="icon-list"></i>{l s='MiniList'}</a></li>

 

3) modify product-list.css (picked up from Vekia's tutorial ) I renamed product_list_mini  to product_list.mini. Only part related to minilist

  

4) What else for js ? and product-list.tpl ?

 

Thanks in advance to anyone for a support !

Edited September 23, 2014 by frugalis (see edit history)

[Gaëtan]

Hi,
I'm interested about minilist view with PS 1.6 too.
Is there someone could help us please ?

 

 

First step : I add this piece of code in product-sort.tpl (line 30) :

<li id="tableau"><a rel="nofollow" href="#" title="{l s='Tableau'}"><i class="icon-th"></i>{l s='Tableau'}</a></li>

juste after the code (line 26) :

<ul class="display hidden-xs">
    <li class="display-title">{l s='View:'}</li>
    <li id="grid"><a rel="nofollow" href="#" title="{l s='Grid'}"><i class="icon-th-large"></i>{l s='Grid'}</a></li>
    <li id="list"><a rel="nofollow" href="#" title="{l s='List'}"><i class="icon-th-list"></i>{l s='List'}</a></li>

Then, now I have a new icon next to the other in frontend (see attached file)

 

but after....???? What should we do ?

 

Thanks !

[frugalis]

On my website jobsdoma.com (jobsdoma.fr) the minilist works like a normal list. I'm trying to find out how to link the product-list.css to product-list.tpl  then to get rid of the pictures for a check-square icon.

[Gaëtan]

On my website jobsdoma.com (jobsdoma.fr) the minilist works like a normal list. I'm trying to find out how to link the product-list.css to product-list.tpl  then to get rid of the pictures for a check-square icon.

 

It work like a normal list because in your code :

    <li id="list"><a rel="nofollow" href="#" title="{l s='MiniList'}"><i class="icon-list"></i>{l s='MiniList'}</a></li>

you have  <li id"list"...

 

I think the step 2 is change this ID, and add custom CSS linked to it

[frugalis]

Your are right !. It's good to work in team. Now we have just to create a responsive minilist. Let's go !

[frugalis]

We will not sort out the minilist just with a custom CSS file. I noticed that Prestashop 1.6 sets the product listing with a boolean config parameter : 'PS_GRID_PRODUCT' using the themeconfigurator module. The admin panel gives the possibility to activate or not the GRID product listing.

The grid status is checked inside product-list.tpl by the following instruction
<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}">

In my opinion, one of the way to add minilist is to change the boolean variable to an enum type which will accept more than 2 cases.

The faster way is to use a new template file as recommanded by Vekia in the topic http://www.prestashop.com/forums/topic/362777-different-layout-for-different-products/ : Template file is called by ProductController.php located in /controllers/front/ directory

 

if ($this->product->id==5){
$this->setTemplate(_PS_THEME_DIR_.'theme-file-for-product-with-id-5.tpl');
} else {
         $this->setTemplate(_PS_THEME_DIR_.'product.tpl');
}

 

I will test the two cases.

[Gaëtan]

Have you test the two cases ?

[frugalis]

Hello Gaëtan, a bit busy, I haven't yet started the testing. Surely before the end of this week. Best regards !

[Gaëtan]

Hi Frugalis, I'm trying to find some solution this morning... I'll let you know if it works !

[frugalis]

Hello Gaëtan,

I give up digging the mini-list : the case 1, using a new template file is not satisfactory for me. In case2 allocating an additional value to the config parameter 'PS_GRID_PRODUCT' .  The  field is a text type which can be 0,1,2, etc .... I tried, but I'm not good enough at programming  to spend more time. I will simply replace the  normal list by a mini one by modifying the product-list CSS file. PS1.6.10  managing the display with cookies is probably the solution. We have to understand first the process.

 

Kind regards

[Gaëtan]

It's funny because that's exactly what I finally made! I am not so good either web programming to treat this kind of cases! As I better control the CSS ... I do like you!

Maybe, one day, Vekia or someone else will test the case 2 and find the solution !

In the meantime, good work! And thank you for trying as a team!

Regards.

[frugalis]

I'm very pleased to read from you. What about posting the topic on the french forum ? Après tout c'est chez nous.

[sarole]

Hello,

 

I think I have the answer for this, but I don't know how to add the code we need.

 

I already have the minilist button added in product-sort.tpl and the minilist css added to product_list.css

 

Now the thing is there is a class that changes the code is shown in the page.

 

In product-list.tpl we have to change line 41 to this:

<ul{if isset($id) && $id && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class && $class} {$class}{/if}{if isset($active) && $active && $active == 1} active{/if}">

And now comes the complicated one. I don't know how  to program in javascript but in /root/themes/bootstrap/js there is a file called global.js . This file contains the function that calls for id's and select a css type. Line 195

function display(view)
{
    if (view == 'list')
    {
        $('ul.product_list').removeClass('grid').addClass('list row');
        $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
        $('.product_list > li').each(function(index, element) {
            html = '';
            html = '<div class="product-container"><div class="row">';
                html += '<div class="left-block col-xs-4 col-xs-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
                html += '<div class="center-block col-xs-4 col-xs-7 col-md-4">';
                    html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
                    html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
                    var rating = $(element).find('.comments_note').html(); // check : rating
                    if (rating != null) {
                        html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
                    }
                    html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
                    var colorList = $(element).find('.color-list-container').html();
                    if (colorList != null) {
                        html += '<div class="color-list-container">'+ colorList +'</div>';
                    }
                    var availability = $(element).find('.availability').html();    // check : catalog mode is enabled
                    if (availability != null) {
                        html += '<span class="availability">'+ availability +'</span>';
                    }
                html += '</div>';    
                html += '<div class="right-block col-xs-4 col-xs-12 col-md-4"><div class="right-block-content row">';
                    var price = $(element).find('.content_price').html();       // check : catalog mode is enabled
                    if (price != null) {
                        html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
                    }
                    html += '<div class="button-container col-xs-7 col-md-12">'+ $(element).find('.button-container').html() +'</div>';
                    html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
                html += '</div>';
            html += '</div></div>';
        $(element).html(html);
        });        
        $('.display').find('li#list').addClass('selected');
        $('.display').find('li#grid').removeAttr('class');
        $.totalStorage('display', 'list');
    }
    else
    {
        $('ul.product_list').removeClass('list').addClass('grid row');
        $('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');
        $('.product_list > li').each(function(index, element) {
        html = '';
        html += '<div class="product-container">';
            html += '<div class="left-block">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="right-block">';
                html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
                html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
                var rating = $(element).find('.comments_note').html(); // check : rating
                    if (rating != null) {
                        html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
                    }
                html += '<p itemprop="description" class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
                var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
                    if (price != null) {
                        html += '<div class="content_price">'+ price + '</div>';
                    }
                html += '<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="button-container">'+ $(element).find('.button-container').html() +'</div>';
                var colorList = $(element).find('.color-list-container').html();
                if (colorList != null) {
                    html += '<div class="color-list-container">'+ colorList +'</div>';
                }
                var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
                if (availability != null) {
                    html += '<span class="availability">'+ availability +'</span>';
                }
            html += '</div>';
            html += '<div class="functional-buttons clearfix">' + $(element).find('.functional-buttons').html() + '</div>';
        html += '</div>';        
        $(element).html(html);
        });
        $('.display').find('li#grid').addClass('selected');
        $('.display').find('li#list').removeAttr('class');
        $.totalStorage('display', 'grid');
    }    
}

Now we have to add to this code the minilist type.

[frugalis]

Hi Sarole ! You got him. It's working now !!! Using firebug, i noticed what was wrong.
- No need to change something in the product-list.tpl file.
- I modified two functions inside the /themes/mytheme/js/global.js JS file : function bindGrid() &
function display(view) . Changes in blue
 
function bindGrid()
{
    var view = $.totalStorage('display');
    
    if (!view && (typeof displayList != 'undefined') && displayList)
        view = 'list';
    
    if (!view && (typeof displayList != 'undefined') && view != 'list')
        view = 'mini';
    
    if (view && view != 'grid')
        display(view);    
        
    else
        $('.display').find('li#grid').addClass('selected');
    
    $(document).on('click', '#grid', function(e){
        e.preventDefault();
        display('grid');
    });

    $(document).on('click', '#list', function(e){
        e.preventDefault();
        display('list');
    });
    
    $(document).on('click', '#mini', function(e){
        e.preventDefault();
        display('mini');
    });
}

function display(view)
{
    if (view == 'list')
    {
        $('ul.product_list').removeClass('grid').removeClass('mini').addClass('list row');
        $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
        $('.product_list > li').each(function(index, element) {
            html = '';
            html = '<div class="product-container"><div class="row">';
                html += '<div class="left-block col-xs-4 col-xs-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
                html += '<div class="center-block col-xs-4 col-xs-7 col-md-4">';
                    html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
                    html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
                    var rating = $(element).find('.comments_note').html(); // check : rating
                    if (rating != null) {
                        html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
                    }
                    html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
                    var colorList = $(element).find('.color-list-container').html();
                    if (colorList != null) {
                        html += '<div class="color-list-container">'+ colorList +'</div>';
                    }
                    var availability = $(element).find('.availability').html();    // check : catalog mode is enabled
                    if (availability != null) {
                        html += '<span class="availability">'+ availability +'</span>';
                    }
                html += '</div>';    
                html += '<div class="right-block col-xs-4 col-xs-12 col-md-4"><div class="right-block-content row">';
                    var price = $(element).find('.content_price').html();       // check : catalog mode is enabled
                    if (price != null) {
                        html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
                    }
                    html += '<div class="button-container col-xs-7 col-md-12">'+ $(element).find('.button-container').html() +'</div>';
                    html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
                html += '</div>';
            html += '</div></div>';
        $(element).html(html);
        });        
        $('.display').find('li#list').addClass('selected');
        $('.display').find('li#mini').removeAttr('class');
        $('.display').find('li#grid').removeAttr('class');
        $.totalStorage('display', 'list');
    }
    else
    if (view == 'mini')
    {
        $('ul.product_list').removeClass('grid').removeClass('list').addClass('mini row');
        $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
        $('.product_list > li').each(function(index, element) {
            html = '';
            html = '<div class="product-container"><div class="row">';
                html += '<div class="left-block col-xs-4 col-xs-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
                html += '<div class="center-block col-xs-4 col-xs-7 col-md-4">';
                    html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
                    html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
                    var rating = $(element).find('.comments_note').html(); // check : rating
                    if (rating != null) {
                        html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
                    }
                    html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
                    var colorList = $(element).find('.color-list-container').html();
                    if (colorList != null) {
                        html += '<div class="color-list-container">'+ colorList +'</div>';
                    }
                    var availability = $(element).find('.availability').html();    // check : catalog mode is enabled
                    if (availability != null) {
                        html += '<span class="availability">'+ availability +'</span>';
                    }
                html += '</div>';    
                html += '<div class="right-block col-xs-4 col-xs-12 col-md-4"><div class="right-block-content row">';
                    var price = $(element).find('.content_price').html();       // check : catalog mode is enabled
                    if (price != null) {
                        html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
                    }
                    html += '<div class="button-container col-xs-7 col-md-12">'+ $(element).find('.button-container').html() +'</div>';
                    html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
                html += '</div>';
            html += '</div></div>';
        $(element).html(html);
        });        
        $('.display').find('li#mini').addClass('selected');
        $('.display').find('li#list').removeAttr('class');
        $('.display').find('li#grid').removeAttr('class');
        $.totalStorage('display', 'mini');
    }
    else
    {
        $('ul.product_list').removeClass('list').removeClass('mini').addClass('grid row');
        $('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');
        $('.product_list > li').each(function(index, element) {
        html = '';
        html += '<div class="product-container">';
            html += '<div class="left-block">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="right-block">';
                html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
                html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
                var rating = $(element).find('.comments_note').html(); // check : rating
                    if (rating != null) {
                        html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
                    }
                html += '<p itemprop="description" class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
                var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
                    if (price != null) {
                        html += '<div class="content_price">'+ price + '</div>';
                    }
                html += '<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="button-container">'+ $(element).find('.button-container').html() +'</div>';
                var colorList = $(element).find('.color-list-container').html();
                if (colorList != null) {
                    html += '<div class="color-list-container">'+ colorList +'</div>';
                }
                var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
                if (availability != null) {
                    html += '<span class="availability">'+ availability +'</span>';
                }
            html += '</div>';
            html += '<div class="functional-buttons clearfix">' + $(element).find('.functional-buttons').html() + '</div>';
        html += '</div>';        
        $(element).html(html);
        });
        $('.display').find('li#grid').addClass('selected');
        $('.display').find('li#list').removeAttr('class');
        $('.display').find('li#mini').removeAttr('class');
        $.totalStorage('display', 'grid');
    }    
}

 

I still have to work on my CSS presentation and will welcome a mini-list sample. Anyway, I'm so happy that mini-list is working after all. You can have a look at my sandbox website http://jobsdoma.com or http://jobsdoma.fr

 

Let's go on testing. A great thank to the team for all contributions.

Regards

[sarole]

Thank you very much!! That's exactly right! You are a genius! I knew if I found where de js code that changes the class was someone like you would be able to change the code.

 

No I have it working in my page and i'm sooooo happy!!

 

You did a great job. This would help everyone with this problem.

[frugalis]

Hi all, I'm happy for our team work. We can summarize the steps for adapting  Grid/List/Mini views to Prestashop 1.6.xx as follow. Files to  edit :

1. global.css : definition of icons
2. product-list.css : Adding a responsive paragraph for the mini-list view
3. product-sort.tpl : calling icons
4. global.js : switching control

Could anyone share his CSS file ? We will then build a complete tutorial.

Kind regards !

 

[sarole]

/*******************************************************
Product list(Minilist) Styles 
********************************************************/
@media (max-width: 479px) {
  ul.product_list.minilist > li .left-block {
    width: 100%; } }
ul.product_list.minilist > li .product-container {
	border-top: 1px solid #D6D4D4;
	border-bottom: 1px solid #D6D4D4;
/* 	margin-bottom: 5px;
	background: #F4E3DD;
	padding: 30px 19px; */}
ul.product_list.minilist > li .left-block.col-xs-4.col-xs-5.col-md-4 {
width: 13%;}
ul.product_list.minilist > li .right-block.col-xs-4.col-xs-12.col-md-4 {
width: 30%;
;} 
ul.product_list.minilist > li .product-image-container {
  position: relative;
  /*border: 1px solid #d6d4d4;*/
  padding: 0px;
  width: 75px;  }
  @media (max-width: 479px) {
    ul.product_list.minilist > li .product-image-container {
      max-width: 290px;
      margin: 0 auto; } }
  ul.product_list.minilist > li .product-image-container .content_price {
    display: none !important; }
ul.product_list.minilist > li .product-flags {
  color: #333333;
  margin: -5px 0 10px 0; }
  ul.product_list.minilist > li .product-flags .discount {
    color: #f13340; }
ul.product_list.minilist > li h5 {
  padding-bottom: 8px; }
ul.product_list.minilist > li .product-desc {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
  font-family: josefin slab; 
  display: none;  }
  ul.product_list.minilist > li .product-descr {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
  font-family: josefin slab; }
@media (max-width: 479px) {
  ul.product_list.minilist > li .center-block {
    width: 100%; } }
ul.product_list.minilist > li .center-block .comments_note {
  margin-bottom: 12px; }
@media (min-width: 992px) {
  ul.product_list.minilist > li .right-block .right-block-content {
    margin: 0;
    /*border-left: 1px solid #d6d4d4;*/
/*     padding-left: 15px;
    padding-bottom: 16px; */ } }
ul.product_list.minilist > li .right-block {
    margin: 0;
	border: none;
	background: none;
	padding: 0px;}
@media (max-width: 991px) {
  ul.product_list.minilist > li .right-block .right-block-content {
    padding-top: 20px; } }
@media (max-width: 479px) {
  ul.product_list.minilist > li .right-block .right-block-content {
    padding-top: 5px; } }
ul.product_list.minilist > li .right-block .right-block-content .content_price {
  padding-bottom: 10px;
  width: 10px;
  float: right; }
  @media (max-width: 991px) {
    ul.product_list.minilist > li .right-block .right-block-content .content_price {
      padding-top: 13px;
      padding-bottom: 0; } }
  @media (max-width: 479px) {
    ul.product_list.minilist > li .right-block .right-block-content .content_price {
      padding-top: 0;
      width: 100%; } }
  ul.product_list.minilist > li .right-block .right-block-content .content_price span {
    display: inline-block;
    margin-top: 17px;
    margin-bottom: 14px; }
    ul.product_list.minilist > li .right-block .right-block-content .content_price span.old-price {
      margin-right: 8px;	  }
ul.product_list.minilist > li .right-block .right-block-content .button-container {
  overflow: hidden;
  padding-bottom: 0px;
  width: 150px;  }
  @media (max-width: 479px) {
    ul.product_list.minilist > li .right-block .right-block-content .button-container {
      width: 100%; } }
  ul.product_list.minilist > li .right-block .right-block-content .button-container .btn {
    margin-bottom: 0px; }
    @media (min-width: 992px) {
      ul.product_list.minilist > li .right-block .right-block-content .button-container .btn {
        float: left;
        clear: both; } }
@media (min-width: 992px) {
  ul.product_list.minilist > li .right-block .right-block-content .functional-buttons {
    overflow: hidden; } }
@media (max-width: 991px) {
  ul.product_list.minilist > li .right-block .right-block-content .functional-buttons {
    clear: both; }
    ul.product_list.minilist > li .right-block .right-block-content .functional-buttons > div {
      float: left;
      padding-top: 0 !important;
      padding-right: 20px; } }
@media (max-width: 479px) {
  ul.product_list.minilist > li .right-block .right-block-content .functional-buttons {
    float: none;
    display: inline-block; }
    ul.product_list.minilist > li .right-block .right-block-content .functional-buttons a i, ul.product_list.list > li .right-block .right-block-content .functional-buttons a:before, ul.product_list.list > li .right-block .right-block-content .functional-buttons label i, ul.product_list.list > li .right-block .right-block-content .functional-buttons label:before {
      display: none !important; } }
ul.product_list.minilist > li .right-block .right-block-content .functional-buttons a {
  cursor: pointer; }
ul.product_list.minilist > li .right-block .right-block-content .functional-buttons .wishlist {
  border: none; }
ul.product_list.minilist > li .right-block .right-block-content .functional-buttons .compare {
  padding-top: 10px; }
  ul.product_list.minilist > li .right-block .right-block-content .functional-buttons .compare a:before {
    margin-right: 10px; }
@media (min-width: 1200px) {
  ul.product_list.minilist > li:hover .product-image-container .quick-view {
    display: block; } }
@media (max-width: 479px) {
  ul.product_list.minilist > li {
    text-align: center; } }

This is my CSS, the code it's a bit messy but it works for me, at least it's a bit of help and it's not a fresh start if there is anyone who doesn't know how to program in CSS

 

My id for the class is minilist instead of mini like frugalis coded in the js. It doesn't matter if you call it mini or minilist, but it has to be called equally in both

[frugalis]

Hi Sarole, thank you for your kind answer and the template. For the minilist, I'm expecting a presentation like the product list in the backoffice. I 'm working on.

 

Best regards

[sarole]

If you want to I could make that template from bootstrap to get the minilist like you want it (I did that for my father that requested exactly that). When I finish it I'd better do a new post and do a tutorial compilling all the things we discover, what do you think?

[frugalis]

It's a super idea. I'm in the stage of self training to the bootstrap framekork. We look forward to viewing the template.

 

Kind regards

[foggy]

I have  added in  Vekias grid/list/minilist switcher into my sites using the default bootstrap - no problems once you know the js goes in the root not the theme.

 

So a bit of formatting and I am where I want to be except for a couple of issues hurting my brain !

 

First it would be nice for one site I have to ONLY Mini-List products in the view without options for Grid or List

(The products are just are not " picturable" !)

 

And second I cannot get rid of the original Grid List  buttons !

 

Ideas would be welcomed

 

Steve

 

[magic.mail.2016]

Anybody can help me on this related topic

https://www.prestashop.com/forums/topic/504704-mini-list-products-view-presa-16-help-me/

[vekia]

if anyone interested i released guide for PrestaShop 1.7.x

https://www.prestashop.com/forums/topic/604990-tutorial-grid-list-switcher-change-products-display-method-in-prestashop-17/

[امیر]

plz send code for presta 1.6

 i add icon in sort.tpl

 

my gride is in prouduct-list.tpl but list is global.js

 

plz help me

 

global.js

 

 

 

function bindGrid()
{
    var storage = false;
    if (typeof(getStorageAvailable) !== 'undefined') {
        storage = getStorageAvailable();
    }
    if (!storage) {
        return;
    }

    var view = $.totalStorage('display');

    if (!view && (typeof displayList != 'undefined') && displayList)
        view = 'list';

    if (view && view != 'grid')
        display(view);
    else
        $('.display').find('li#grid').addClass('selected');

    $(document).on('click', '#grid', function(e){
        e.preventDefault();
        display('grid');
    });

    $(document).on('click', '#list', function(e){
        e.preventDefault();
        display('list');
    });
}

function display(view)
{
    if (view == 'list')
    {
        $('ul.product_list').removeClass('grid').addClass('list row');
        $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4 col-lg-3').addClass('col-xs-12');
        $('.product_list > li').each(function(index, element) {
            var html = '';
            html = '<div class="product-container"><div class="row">';
            html += '<div class="left-block col-xs-5 col-sm-5 col-md-4 ">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="right-block col-xs-7 col-sm-7 col-md-8 "><div class="product-contents">';
            // html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
            html += '<h5 itemprop="name" class="product-name">'+ $(element).find('.product-name').html() + '</h5>';

            var price = $(element).find('.price-box').html();       // check : catalog mode is enabled
            if (price != null) {
                html += '<div class="price-box">'+ price + '</div>';
            }
            html += '<div class="product-desc">'+ $(element).find('.product-desc').html() + '</div>';
            html += '<div class="cart">'+ $(element).find('.cart').html() + '</div>';    
            html += '<div class="actions">'+ $(element).find('.actions').html() + '</div>';        
            var colorList = $(element).find('.color-list-container').html();
            if (colorList != null) {
                html += '<div class="color-list-container">'+ colorList +'</div>';
            }

            
            
            // html += '<div class="button-container col-xs-7 col-md-12">'+ $(element).find('.button-container').html() +'</div>';
            // html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
            html += '</div>';
            html += '</div></div>';
            $(element).html(html);
        });
        $('.display').find('li#list').addClass('selected');
        $('.display').find('li#grid').removeAttr('class');
        $.totalStorage('display', 'list');
    }
    else
    {
        $('ul.product_list').removeClass('list').addClass('grid row');
        $('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4 col-lg-3');
        $('.product_list > li').each(function(index, element) {
            var html = '';
            html += '<div class="product-container">';
            html += '<div class="left-block">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="right-block">';
            html += '<div class="product-contents">';
                // html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
        
                html += '<h5 itemprop="name" class="product-name">'+ $(element).find('.product-name').html() + '</h5>';

                 var price = $(element).find('.price-box').html(); // check : catalog mode is enabled
                 if (price != null) {
                     html += '<div class="price-box col-lg-9 col-md-9 col-sm-9 col-xs-9">'+ price + '</div>';
                 }
                html += '<div class="cart col-lg-3 col-md-3 col-sm-3 col-xs-3">'+ $(element).find('.cart').html() + '</div>';
                html += '<div itemprop="description" class="product-desc">'+ $(element).find('.product-desc').html() + '</div>';    
            html += '</div>';
            // html += '<div itemprop="offers" itemscope itemtype="https://schema.org/Offer" class="button-container">'+ $(element).find('.button-container').html() +'</div>';
            var colorList = $(element).find('.color-list-container').html();
            if (colorList != null) {
                html += '<div class="color-list-container">'+ colorList +'</div>';
            }
            var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
            if (availability != null) {
                html += '<span class="availability">'+ availability +'</span>';
            }
            html += '</div>';
            // html += '<div class="functional-buttons clearfix">' + $(element).find('.functional-buttons').html() + '</div>';
            html += '</div>';
            $(element).html(html);
        });
        $('.display').find('li#grid').addClass('selected');
        $('.display').find('li#list').removeAttr('class');
        $.totalStorage('display', 'grid');
    }
}

[امیر]

plz help me

[vekia]

tutorial in this topic is for prestashop 1.5 only,

if i will have a time i will create a similar guide for prestashop 1.6.

[archerman]

Hello!

I need this solution:  "Grid / list / mini-list products view switcher"  to prestashop 1.6.1.17

I need mini-list option for my shop.

Can you help me?

[vekia]

what theme you use ?

[archerman]

Hello! 

My theme is: Wheels & Tires Free PrestaShop Theme  by Templatemonster

https://www.templatemonster.com/free-templates/responsive-wheels-tires-prestashop-theme-52940.html

I modified the theme somewhere....

I need minilist to my site. 

PS version: 1.6.1.17 

[Ruman]

On 29/04/2014 at 1:42 PM, vekia said:

if you're asking me about default bootstrap theme - prestashop 1.6 has got grid / list switcher by default.

if you want to use it in "default" theme from 1.5 in 1.6 it will work.

Hi vekia,

Can you please help me to overcome my problem. The problem is I am creating a productenquiry module in that module I need to display grid view in frontend of my prestashop website for this I made a front controller  under module/modulename/front/enquiry.php and in that following code i have wrote 

class ProductEnquiryEnquiryModuleFrontController extends ModuleFrontController
{
    
    public $controller_name = 'enquiry';
    public $module_name = 'productenquiry';

    public function __construct()
    {
        parent::__construct();
    }

    public function init()
    {
        parent::init();
    }

    public function initContent()
    {
            $this->renderList();

        parent::initContent();
    }

    public function renderList()
    {

            $this->table_header = array(
                array(
                    'label' => $this->module->l('ID', 'enquiry'),
                    'align' => 'right',
                    'class' => '',
                    'width' => '60'
                ),
                array(
                    'label' => $this->module->l('First Name', 'enquiry'),
                    'align' => 'left',
                    'class' => '',
                ),
                array(
                    'label' => $this->module->l('Last Name', 'enquiry'),
                    'align' => 'left',
                    'class' => '',
                    'width' => '120',
                ),
                array(
                    'label' => $this->module->l('Email', 'enquiry'),
                    'align' => 'left',
                ),
                array(
                    'label' => $this->module->l('Mobile', 'enquiry'),
                    'align' => 'left',
                    'class' => '',
                ),
                array(
                    'label' => $this->module->l('ID_Product', 'enquiry'),
                    'align' => 'right',
                    'class' => '',
                    'width' => '90',
                ),
                array(
                    'label' => $this->module->l('Query', 'enquiry'),
                    'align' => 'left',
                    'width' => '80',
                )
            );

            $orderby = null;
            if (Tools::getIsset('orderby') && Tools::getValue('orderby') != '') {
                $orderby = Tools::getValue('orderby');
            }

            $orderway = null;
            if (Tools::getIsset('orderway') && Tools::getValue('orderway') != '') {
                $orderway = Tools::getValue('orderway');
            }

            $product_enquiry = Db::getInstance()->executeS(
                    'SELECT * FROM '._DB_PREFIX_.'product_enquiry'
                );
                

            foreach ($product_enquiry as $val) {
                $this->table_content[$val['id_product_enquiry']] = array(
                    array('value' => $val['id_product_enquiry']),
                    array('value' => $val['firstname']),
                    array('value' => $val['lastname']),
                    array('value' => $val['email']),
                    array('value' => $val['mobile']),
                    array('value' => $val['product']),
                    array('value' => $val['question']),
                );
            }
        $this->context->smarty->assign(array(
            'new_product_link' => $this->context->link->getModuleLink(
                $this->module_name,
                $this->controller_name,
                array('render_type' => 'form'),
                (bool)Configuration::get('PS_SSL_ENABLED')
            )
        ));

        $this->setTemplate('module:productenquiry/views/templates/front/enquiry/abaa.tpl');
    }

}

and in my abaa.tpl file the following code I had wrote

{extends file='page.tpl'}
{block name="content"}
<div class="kb-content">
    <div class="kb-content-header">
        <h1>{l s='Enquiry' mod='productenquiry'}</h1>

    </div>
    
</div>
{/block}

and the final output that i am getting is.  

 

 

and I want the output to be like

 

Thanks in advance. please help I am really stuck in this and couldn't  find any solution on google