Jump to content

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


vekia

Recommended Posts

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

 

grid-list-switcher.gif

 

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/
 

Link to comment
Share on other sites

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 :P)

 

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

Edited by closeupman (see edit history)
Link to comment
Share on other sites

  • 3 weeks later...

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"> 
Link to comment
Share on other sites

  • 3 weeks later...

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

Link to comment
Share on other sites

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 :) )

Link to comment
Share on other sites

  • 4 weeks later...

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! =)

Link to comment
Share on other sites

  • 3 weeks later...

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 by LucasSaraiva (see edit history)
Link to comment
Share on other sites

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 :D 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 :D Thanks :) For real

Edited by LucasSaraiva (see edit history)
Link to comment
Share on other sites

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">
Link to comment
Share on other sites

 

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 :

 

CqM7oUl.png

 

 

:/ what was wrong?

Edited by LucasSaraiva (see edit history)
Link to comment
Share on other sites

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">
  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by dudikpal (see edit history)
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by dudikpal (see edit history)
Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

  • 3 weeks later...

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.

Link to comment
Share on other sites

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 by cosmin.ignea (see edit history)
Link to comment
Share on other sites

  • 2 weeks later...
  • 2 months later...

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?

Link to comment
Share on other sites

  • 4 weeks later...

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

Link to comment
Share on other sites

  • 1 month later...

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 by frugalis (see edit history)
Link to comment
Share on other sites

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)

post-810754-0-23348000-1411551135_thumb.png

 

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

 

Thanks !

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 !

 

Link to comment
Share on other sites

/*******************************************************
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

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 1 month later...

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

 
Link to comment
Share on other sites

  • 1 year later...
  • 1 year later...
  • 3 months later...

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');
    }
}

Link to comment
Share on other sites

  • 1 month later...
  • 6 months later...
  • 1 month later...
  • 1 month later...
  • 5 months later...
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.  5bea87cf9433e_Screenshotfrom2018-11-1313-43-46.png.ef46dc6fbbcd9534a7787e3496c63062.png

 

 

and I want the output to be like

5bea870903f62_Screenshotfrom2018-11-1313-40-08.png.1a1e26933dba0d625e4f2a6116e6c2b1.png 

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...