List/Grid layout in Product List - Javascript in .tpl

Ricarditu · August 26, 2013

Hi!

I managed to created two layouts for the product list for the shop I'm creating: grid and list (last one by default). There are two different divs with different classes, each one for a type of layout. Depending on the main div class, it shows one or another.

I tried switching it manually and it works, so the product-list.tpl and product_list.css are working fine.

The problem is the javascript code I added to remove and add the classes. I put it in the category.tpl as well as the buttons to allow this switch (don't mind the buttons, they're still in test phase...). Please check it here:

http://174.132.166.124/~virtuall/loja/14-casquilho-grosso-e27#

The category.tpl is shown below:

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{include file="$tpl_dir./breadcrumb.tpl"}
{include file="$tpl_dir./errors.tpl"}
{literal}
<script type="text/javascript">
$('.a-button').on('click', function(){
 var el = document.getElementById("box");
 var button1 = document.getElementById("button-list");
 var button2 = document.getElementById("button-grid");

 if ($(el).hasClass ('display-product-list')) {

  $(button1).addClass('button').removeClass('button-active');
  $(button2).addClass('button-active').removeClass('button');
  $(el).animate({opacity: 0},-100);

   setTimeout(function() {
  $(el).addClass('display-product-grid');
  $(el).removeClass('display-product-list');
   }, 200);
   setTimeout(function() {
  $(el).animate({opacity:1});
   }, 350); 

 }
 else

  if ($(el).hasClass ('display-product-grid')) {

  $(button2).addClass('button').removeClass('button-active');
  $(button1).addClass('button-active').removeClass('button');
  $(el).animate({opacity: 0}, -100); 

  setTimeout(function() {
  $(el).addClass('display-product-list');
  $(el).removeClass('display-product-grid');
   }, 200);
  setTimeout(function() {
  $(el).animate({opacity:1});
   }, 350); 

  }
});
</script>
{/literal}
{if isset($category)}
{if $category->id AND $category->active}
 <h1>
  {strip}
   {$category->name|escape:'htmlall':'UTF-8'}
   {if isset($categoryNameComplement)}
 {$categoryNameComplement|escape:'htmlall':'UTF-8'}
   {/if}
  {/strip}
 </h1>

 <div class="resumecat category-product-count">
  {include file="$tpl_dir./category-count.tpl"}
 </div>

 {if $scenes || $category->description || $category->id_image}
 <div class="content_scene_cat">
  {if $scenes}
   <!-- Scenes -->
   {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
  {else}
   <!-- Category image -->
   {if $category->id_image}
   <div class="align_center">
 <img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />
   </div>
   {/if}
  {/if}
  {if $category->description}
   <div class="cat_desc">
   {if strlen($category->description) > 120}
 <p id="category_description_short">{$category->description|truncate:120}</p>
 <p id="category_description_full" style="display:none">{$category->description}</p>
 <a href="#" onclick="$('#category_description_short').hide(); $('#category_description_full').show(); $(this).hide(); return false;" class="lnk_more">{l s='More'}</a>
   {else}
 <p>{$category->description}</p>
   {/if}
   </div>
  {/if}
 </div>
 {/if}
 {if isset($subcategories)}
 <!-- Subcategories -->
 <div id="subcategories">
  <h3>{l s='Subcategories'}</h3>
  <ul class="inline_list">
  {foreach from=$subcategories item=subcategory}
   <li class="clearfix">
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
  {if $subcategory.id_image}
   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {else}
   <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {/if}
 </a>
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
 {if $subcategory.description}
  <p class="cat_desc">{$subcategory.description}</p>
 {/if}
   </li>
  {/foreach}
  </ul>
  <br class="clear"/>
 </div>
 {/if}
 {if $products}
  <div class="content_sortPagiBar">
   {include file="$tpl_dir./pagination.tpl"}
   <div class="sortPagiBar clearfix">
			 <div id="buttons">
  <div id="button-list" class="button-active">
	 <a class="a-button" href="#">Botão 1</a>
  </div>
  <div id="button-grid" class="button">
  <a class="a-button" href="#">Botão 2</a>
  </div>
 </div>
 {include file="./product-sort.tpl"}
 {include file="./product-compare.tpl"}
 {include file="./nbr-product-page.tpl"}
   </div>
  </div>

  {include file="./product-list.tpl" products=$products}

  <div class="content_sortPagiBar">
   <div class="sortPagiBar clearfix">
 {include file="./product-sort.tpl"}
 {include file="./product-compare.tpl"}
 {include file="./nbr-product-page.tpl"}
   </div>
   {include file="./pagination.tpl"}
  </div>
 {/if}
{elseif $category->id}
 <p class="warning">{l s='This category is currently unavailable.'}</p>
{/if}
{/if}

Thanks!

Ricarditu · August 26, 2013

Forgot to say, the button that will change for grid style is "Botão 2" in white, right in the black bar next to the "Compare" button.

Thanks once again!

vekia · August 26, 2013

and what about simple inline code like

onclick="$('#box').attr('class','display-product-list');"

onclick="$('#box').attr('class','display-product-grid');"

+ some cookie definition to "remember" selected method

Ricarditu · August 27, 2013

Ok... That's quite simpler... I'll give it a try!

Anyway, I coded this in codepen and it was working. Even if I use your suggestion, if you could tell what you think is wrong just for my knowledge and learning would be great!

Thanks once again vekia!

vekia · August 27, 2013

i checked your code on my demo store and it did not work well.

so i created simple code for buttons, and it worked

i will check your code once again, and if i find bugs, i will reply here

Ricarditu · August 27, 2013

Ok, thanks! But it's missing the product-list.tpl, where it's the two divs with different classes... You need it?

I agree, your code it's much more simpler and smaller!

Thanks!

Ricarditu · August 27, 2013

Another thing, can I use a custom cookie? Or there must be a variable for this in Prestashop? Not very familiarized with cookies... Except for the ones to eat!

vekia · August 27, 2013

yu can use custom cookie name, you can easily create own cookie with javascript,

little hint:

document.cookie

Ricarditu · August 27, 2013

Ok!

Another question, regarding the use of js for changing classes. The next step will be make the website responsive. For this, I was thinking of using js to change classes depending on the viewport size. This is one of the reasons I need to know how to integrate the js in the tpl file. For this specific case, in which tpl should I write it?

By the way, you think this js might not be working because of jquery? But it's called there...

Thanks!

Ricarditu · August 27, 2013

Any news?

Ricarditu · August 28, 2013

Can you give me a hand in how to set the cookie for this?

Did you notice anything wrong with the js code?

Thanks!

Ricarditu · August 28, 2013

I've been searching for setting cookies and fount something but I'm not sure how and where to do it...

Regarding the js code, I'd like to implement the code I wrote because I need to change some other classes, not just the main div...

Despite my search, js is not my strength and I'm kinda struggling with it...

Any help is welcome!

Thanks a lot!

Ricarditu · August 29, 2013

I've changed my previous javascript code to this:

{literal}
<script type="text/javascript"><!--
function display (view){
if ( $('#box').hasClass ('display-product-list')) {
 $('#button-list').addClass('button').removeClass('button-active');
 $('#button-grid').addClass('button-active').removeClass('button');
 $('#box').animate({opacity: 0},-100);
 setTimeout(function() {
  $('#box').addClass('display-product-grid');
  $('#box').removeClass('display-product-list');
 }, 200);
 setTimeout(function() {
  $('#box').animate({opacity:1});
 }, 350);

 $.cookie('display', 'grid');
}
else {
 $('#button-grid').addClass('button').removeClass('button-active');
 $('#button-list').addClass('button-active').removeClass('button');
 $('#box').animate({opacity: 0}, -100);
 setTimeout(function() {
  $('#box').addClass('display-product-list');
  $('#box').removeClass('display-product-grid');
 }, 200);
 setTimeout(function() {
  $('#box').animate({opacity:1});
 }, 350);

 $.cookie('display', 'list');
}
};
view = $.cookie('display');
if (view) {
display(view);
} else {
display('list');
}
//--></script>
{/literal}

And here's the code in category.tpl where I have the div with the buttons that change from grid to list and the opposite:

<div id="buttons">
  <div id="button-list" class="button-active">
	 <a class="a-button" onclick="display('list');">Botão 1</a>
  </div>
  <div id="button-grid" class="button">
  <a class="a-button" onclick="display('grid');">Botão 2</a>
  </div>
 </div>

and it works!!!

For the cookie, I tried this but it doesn't work... Any help with setting the cookie?

Thanks in advance!

Edited August 29, 2013 by Ricarditu (see edit history)

mircosarto · September 24, 2013

HI,

please can you help me in make the setting you describe above in order to have list and grid on product list ?

I'm also searching more info to remove category and sub-category images on producl list page (we need just the description)

Another question, I've seen your website at http://174.132.166.1...lho-grosso-e27#,

do you use the default theme or not ?

I've found interesting your layout of the top page with serch box on the right and big logo with phone on the left

Many thanks in advance for your help

Mirco

Ricarditu · September 24, 2013

Hi Mirco!

Yes, this is the default theme but I worked over it, there are plenty of changes.

Thank you!

In this case, I kept the images in the category listing, I'm still not sure if my client wants to keep it. But in order to remove them, in category.tpl you'll find a foreach that inserts the image and respective title (and link). Just have to remove that line regarding the image.

For creating the list/category listing, I used the code above (js) and inserted it on the top of category.tpl. Then, I adjusted the layout of the product.list.tpl according to what I needed. Basically, created two divs, one to the list and one to the grid, which change display whether the button for list or grid is pressed. The only thing that's still missing is the cookie for remembering the user choice.

Hope it helps!

mircosarto · September 25, 2013

Hi Ricarditu,

many thanks for your help.

Regarding category and sub-category images it's fine, I've commented the original code in category.tpl.

I've tried to insert your javascrit in the top of category.tpl but I don't understand where exacltly put the two divs

I'm not a programmer !!

This is my category.tpl right now:

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
* @author PrestaShop SA <[email protected]>
* @copyright 2007-2013 PrestaShop SA
* @license    http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*}

{include file="$tpl_dir./breadcrumb.tpl"}
{include file="$tpl_dir./errors.tpl"}

{literal}
<script type="text/javascript"></script>
{/literal}

{if isset($category)}
   {if $category->id AND $category->active}
       <h1>
           {strip}
               {$category->name|escape:'htmlall':'UTF-8'}
               {if isset($categoryNameComplement)}
                   {$categoryNameComplement|escape:'htmlall':'UTF-8'}
               {/if}
           {/strip}
       </h1>

       <div class="resumecat category-product-count">
           {include file="$tpl_dir./category-count.tpl"}
       </div>

       {if $scenes || $category->description || $category->id_image}
       <div class="content_scene_cat">
       {*
           {if $scenes}
               
               {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
           {else}
               
               {if $category->id_image}
               <div class="align_center">
                   <img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />
               </div>
               {/if}
           {/if}
       *}
           {if $category->description}
               <div class="cat_desc">
               {if strlen($category->description) > 120}
                   <p id="category_description_short">{$category->description|truncate:120}</p>
                   <p id="category_description_full" style="display:none">{$category->description}</p>
                   <a href="#" onclick="$('#category_description_short').hide(); $('#category_description_full').show(); $(this).hide(); return false;" class="lnk_more">{l s='More'}</a>
               {else}
                   <p>{$category->description}</p>
               {/if}
               </div>
           {/if}
       </div>
       {/if}
       {if isset($subcategories)}
       
       <div id="subcategories">
       {*
       <h3>{l s='Subcategories'}</h3>
       *}
           <ul class="inline_list">
           {foreach from=$subcategories item=subcategory}
               <li class="clearfix">
                   <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
       {*
                       {if $subcategory.id_image}
                           <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                       {else}
                           <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                       {/if}
       *}
                   </a>
                   <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
                   {if $subcategory.description}
                       <p class="cat_desc">{$subcategory.description}</p>
                   {/if}
               </li>
           {/foreach}
           </ul>
           <br class="clear"/>
       </div>
       {/if}

       {if $products}
           <div class="content_sortPagiBar">
               {include file="$tpl_dir./pagination.tpl"}
               <div class="sortPagiBar clearfix">
                   {include file="./product-sort.tpl"}
                   {include file="./product-compare.tpl"}
                   {include file="./nbr-product-page.tpl"}
               </div>
           </div>

           {include file="./product-list.tpl" products=$products}

           <div class="content_sortPagiBar">
               <div class="sortPagiBar clearfix">
                   {include file="./product-sort.tpl"}
                   {include file="./product-compare.tpl"}
                   {include file="./nbr-product-page.tpl"}
               </div>
               {include file="./pagination.tpl"}
           </div>
       {/if}
   {elseif $category->id}
       <p class="warning">{l s='This category is currently unavailable.'}</p>
   {/if}
{/if}

I hope you can help me to set your nice feature

Regards

Mirco

Ricarditu · September 25, 2013

Hi Mirco!

The javascript is in the correct place, however, the two divs I was talking about are in the product-list.tpl.

I can show you mine. See below:

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

{if isset($products)}

	<!-- Products list -->
    <div id="box" class="display-product-grid">
    
    <div class="list-list">
    
	<ul id="product_list" class="clear">
	{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">
			{if isset($comparator_max_item) && $comparator_max_item}
                <div class="left_block">
                    
                        <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} /> 
                            <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
                        </p>
                </div>
            {/if}
			<div class="center_block">
				<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
					<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" 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><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:100:'...'}</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 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!'}{if $product.specific_prices.reduction_type == 'percentage'} {$product.specific_prices.reduction*100}%{/if}</span>
					{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                    	<span class="discount">{l s='Reduced price!'}{if $product.specific_prices.reduction_type == 'percentage'}%nbsp;{$product.specific_prices.reduction*100}%{/if}</span>
                {/if}
				{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.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE) || (isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE)}
                    	<span class="price-line-through">{convertPrice price=$product.price_without_reduction}</span> <span class="on_sale" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />
                    	{elseif 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}{l s='Out of stock'}{/if}</span>{/if}
				</div>
				{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only'}</span>{/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)}" title="{l s='Buy'}"><span></span>{l s='Buy'}</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)}" title="{l s='Buy'}"><span></span>{l s='Buy'}</a>
						{/if}						
					{else}
						<span class="exclusive"><span></span>{l s='Buy'}</span>
					{/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>
    
    </div>
	<!-- /Products list -->
    
    <!-- Products grid -->
	<div class="list-grid">
    
    <ul id="product_list" class="clearfix">
    {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.iteration%4 == 0}last_row_item{else}item{/if}">
	<a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
    <div class="img_align_center" style="{if isset($homeSize)} width:{$homeSize.width}px; height:{$homeSize.height}px;{/if}">
        <div class="hover_over" style="position:relative;"> 
        	{if ($product.quantity > 0 OR $product.allow_oosp)}
		        <a class="product-add-to-cart ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart'}"></a>
		        <a class="product-cart" href="{$product.link}" title="{l s='View'}"></a>  
		       
			        {/if}
        </div>
        <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
	        <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" 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>
    </div>
	    <h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:50:'...':true}</a></h3>
		<div class="content_price">
        
        	{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
            	<span class="price-line-through">{convertPrice price=$product.price_without_reduction}</span><span class="on_sale" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>
		 		{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                	<span class="price-line-through">{convertPrice price=$product.price_without_reduction}</span><span class="on_sale" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>
                	{elseif 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>
            {/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}{l s='Out of stock'}{/if}</span>{/if}
         </div>
		 {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&id_product={$product.id_product|intval}&token={$static_token}", true)}" title="{l s='Buy'}"><span></span>{l s='Buy'}</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&id_product={$product.id_product|intval}", true)}" title="{l s='Buy'}"><span></span>{l s='Buy'}</a>
			        {/if}                       
			    {else}
			        <span class="exclusive"><span></span>{l s='Buy'}</span>
			    {/if}
			{/if}
			{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} /> 
                    <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
                </p>
			{/if}		 
	</li>
    {/foreach}
    </ul>
    </div>
    <!-- /Products list -->

    </div>

{/if}

Cheers!

Jiten rash (away) · September 25, 2013

is it working for u guys? im trying with this (function($) {
$(function() {

   function createCookie(name,value,days) {
       if (days) {
           var date = new Date();
           date.setTime(date.getTime()+(days*24*60*60*1000));
           var expires = "; expires="+date.toGMTString();
       }
       else var expires = "";
       document.cookie = name+"="+value+expires+"; path=/";
   }
   function readCookie(name) {
       var nameEQ = name + "=";
       var ca = document.cookie.split(';');
       for(var i=0;i < ca.length;i++) {
           var c = ca;
           while (c.charAt(0)==' ') c = c.substring(1,c.length);
           if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
       }
       return null;
   }
   function eraseCookie(name) {
       createCookie(name,"",-1);
   }

   $('ul.product_view').each(function(i) {
       var cookie = readCookie('tabCookie'+i);
       if (cookie) $(this).find('li').eq(cookie).addClass('current').siblings().removeClass('current')
           .parents('#center_column').find('.box').hide().eq(cookie).show();
   })

   $('ul.product_view').delegate('li:not(.current)', 'click', function() {
       $(this).addClass('current').siblings().removeClass('current')
           .parents('#center_column').find('.box').hide().eq($(this).index()).show();
       var ulIndex = $('ul.product_view').index($(this).parents('ul.product_view'));
       eraseCookie('tabCookie'+ulIndex);
       createCookie('tabCookie'+ulIndex, $(this).index(), 365);
   })

})
})(jQuery)

Edited September 25, 2013 by Jiten rash (see edit history)

Ricarditu · September 25, 2013

The code I used is working fine!

The only thing missing is the cookie... Is your cookie working? Did you only used this code or do you have something else for the cookie? This is my only difficulty...

Thanks!

Jiten rash (away) · September 25, 2013

ya this cookie is working ,only this cookie>

i used with this html on product sort.tpl have to work on css <ul class="product_view">
<li id="product_view_grid" class="current"></li>
<li id="product_view_list"></li>
</ul>

Edited September 25, 2013 by Jiten rash (see edit history)

Ricarditu · September 25, 2013

Ok, great!

Did you write that javascript in that file, product-sort.tpl? Or it's indifferent? My structure is identical to yours so I guess changing the css class you use is enough for it to work.

Thanks!

Ricarditu · September 25, 2013

I just noticed that you use <ul> and <li> while I use divs. How can I change the js code to use with my layout? Can you give me a hand?

Thanks in advance!

Jiten rash (away) · September 25, 2013

added on js directory ,am adding html on product-sort.tpl are u adding it on category?

so ur using id

$('#buttons').each(function(i) {
       var cookie = readCookie('tabCookie'+i);
       if (cookie) $(this).find('li').eq(cookie).addClass('current').siblings().removeClass('current')
           .parents('#center_column').find('.box').hide().eq(cookie).show();
   })

   $('button-grid').delegate('li:not(.current)', 'click', function() {   //gird is default
       $(this).addClass('current').siblings().removeClass('current')
           .parents('#center_column').find('.box').hide().eq($(this).index()).show();
       var ulIndex = $('#button-list').index($(this).parents('#button-list'));
       eraseCookie('tabCookie'+ulIndex);
       createCookie('tabCookie'+ulIndex, $(this).index(), 365);
   })
ur html

<div id="buttons">
     <div id="button-list" class="button-active">
         <a class="a-button" onclick="display('list');">Botão 1</a>
     </div>
     <div id="button-grid" class="button">
     <a class="a-button" onclick="display('grid');">Botão 2</a>
     </div>
     </div>

Edited September 25, 2013 by Jiten rash (see edit history)

Ricarditu · September 25, 2013

No, I'm adding on the product-list.tpl.

This javascript is enough? I know some javascript but the cookie stuff is someting I don't know about... I've been looking for it for a while but I still hadn't found the answer.

Thanks a lot!

Jiten rash (away) · September 25, 2013

No, I'm adding on the product-list.tpl.

This javascript is enough? I know some javascript but the cookie stuff is someting I don't know about... I've been looking for it for a while but I still hadn't found the answer.

Thanks a lot!

i just sorted out scripts without cokies see all

Ricarditu · September 25, 2013

I'm sorry but I didn't understand your answer...

Ricarditu · September 27, 2013

Hi again!

I tried your code but it didn't work... I put this code in the same place I wrote the other js (inside category.tpl, between {literal}{/literal}):

$('#buttons').each(function(i) {
        var cookie = readCookie('tabCookie'+i);
        if (cookie) $(this).find('li').eq(cookie).addClass('current').siblings().removeClass('current')
            .parents('#center_column').find('.box').hide().eq(cookie).show();
    })

    $('button-grid').delegate('li:not(.current)', 'click', function() {   //gird is default 
        $(this).addClass('current').siblings().removeClass('current')
            .parents('#center_column').find('.box').hide().eq($(this).index()).show();
        var ulIndex = $('#button-list').index($(this).parents('#button-list'));
        eraseCookie('tabCookie'+ulIndex);
        createCookie('tabCookie'+ulIndex, $(this).index(), 365);
    })

The code in .tpl - html - I used for the button is this one:

<div id="buttons">
						<div id="button-list" class="button">
					    	<a class="a-button" onclick="display('list');" title="Lista"><span>Lista</span></a>
						</div>
						<div id="button-grid" class="button-active">
							<a class="a-button" onclick="display('grid');" title="Grelha"><span>Grelha</span></a>
						</div>
					</div>

And the structure I used for the grid/list view is this:

<!-- Products list -->
    <div id="box" class="display-product-grid">
    
    <div class="list-list">
    
	<ul id="product_list" class="clear">
	{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">
			{if isset($comparator_max_item) && $comparator_max_item}
                <div class="left_block">
                    
                        <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} /> 
                            <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
                        </p>
                </div>
            {/if}
			<div class="center_block">
				<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
					<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" 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><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:100:'...'}</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 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!'}{if $product.specific_prices.reduction_type == 'percentage'} {$product.specific_prices.reduction*100}%{/if}</span>
					{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                    	<span class="discount">{l s='Reduced price!'}{if $product.specific_prices.reduction_type == 'percentage'}%nbsp;{$product.specific_prices.reduction*100}%{/if}</span>
                {/if}
				{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.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE) || (isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE)}
                    	<span class="price-line-through">{convertPrice price=$product.price_without_reduction}</span> <span class="on_sale" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />
                    	{elseif 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}{l s='Out of stock'}{/if}</span>{/if}
				</div>
				{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only'}</span>{/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)}" title="{l s='Buy'}"><span></span>{l s='Buy'}</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)}" title="{l s='Buy'}"><span></span>{l s='Buy'}</a>
						{/if}						
					{else}
						<span class="exclusive"><span></span>{l s='Buy'}</span>
					{/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>
    
    </div>
	<!-- /Products list -->
    
    <!-- Products grid -->
	<div class="list-grid">
    
    <ul id="product_list" class="clearfix">
    {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.iteration%4 == 0}last_row_item{else}item{/if}">
	<a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
    <div class="img_align_center" style="{if isset($homeSize)} width:{$homeSize.width}px; height:{$homeSize.height}px;{/if}">
        <div class="hover_over" style="position:relative;"> 
        	{if ($product.quantity > 0 OR $product.allow_oosp)}
		        <a class="product-add-to-cart ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart'}"></a>
		        <a class="product-cart" href="{$product.link}" title="{l s='View'}"></a>  
		       
			        {/if}
        </div>
        <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
	        <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" 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>
    </div>
	    <h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:50:'...':true}</a></h3>
		<div class="content_price">
        
        	{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
            	<span class="price-line-through">{convertPrice price=$product.price_without_reduction}</span><span class="on_sale" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>
		 		{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                	<span class="price-line-through">{convertPrice price=$product.price_without_reduction}</span><span class="on_sale" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>
                	{elseif 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>
            {/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}{l s='Out of stock'}{/if}</span>{/if}
         </div>
		 {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&id_product={$product.id_product|intval}&token={$static_token}", true)}" title="{l s='Buy'}"><span></span>{l s='Buy'}</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&id_product={$product.id_product|intval}", true)}" title="{l s='Buy'}"><span></span>{l s='Buy'}</a>
			        {/if}                       
			    {else}
			        <span class="exclusive"><span></span>{l s='Buy'}</span>
			    {/if}
			{/if}
			{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} /> 
                    <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
                </p>
			{/if}		 
	</li>
    {/foreach}
    </ul>
    </div>
    <!-- /Products list -->

    </div>

Can you give me one more hand? I'm not understanding what might not be working.

Thanks!

Jiten rash (away) · September 27, 2013

css?

Ricarditu · September 27, 2013

Here it is:

/* ///// CUSTOM CODE ///// */
.img_align_center{
	overflow: hidden;
	border:1px solid #d1d1d1;
	display: block;
    margin: auto;
}

.img_align_center a.product-cart {
	width: 30px;
	height: 30px;
	background: url(../img/ver-mais.png) no-repeat 0 0 #dcdb05;
	position: absolute;
	top: 45px;
	right: -30px;
	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	z-index:1;
}

#box.display-product-grid #product_list li div.img_align_center a.product-add-to-cart.ajax_add_to_cart_button {
	width: 30px;
	height: 30px;
	padding: 0 !important;
	background: url(../img/add-to-cart.png) no-repeat 0 0 #dcdb05;
	position: absolute;
	top: 45px;
	left: -30px;
	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	z-index:1;
}

.img_align_center a.product-cart:hover {
	box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-ms-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-o-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7);
}

#box.display-product-grid #product_list li div.img_align_center a.product-add-to-cart.ajax_add_to_cart_button:hover {
	box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-ms-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-o-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7);
}

#box .ajax_block_product .img_align_center:hover a.product-cart {
	right: 17%;
}

#box.display-product-grid #product_list li div.img_align_center:hover a.product-add-to-cart.ajax_add_to_cart_button {
	left: 17%;
}

#box .ajax_block_product {
	overflow: hidden;
}

/* ///// END CUSTOM CODE ///// */



#box.display-product-list .list-list {
	display: block;
}

#box.display-product-list .list-grid {
	display:none;
}

#box.display-product-grid .list-list {
	display:none;
}

#box.display-product-grid .list-grid {
	display:block;
}


/* ///// LIST VIEW ///// */
#box.display-product-list ul#product_list {
	list-style-type: none
}

#box.display-product-list #product_list li {
	margin-bottom: 14px;
	padding: 12px 8px;
	border: 1px solid #eee;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
#box.display-product-list #product_list li:hover {
	box-shadow: 0 0 10px rgba(0,0,0,0.7);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.7);
	-ms-box-shadow: 0 0 10px rgba(0,0,0,0.7);
	-o-box-shadow: 0 0 10px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.7);
}

#box.display-product-list #product_list li a {
	color: #374853;
	text-decoration: none
}

#box.display-product-list #product_list li .left_block {
	float:left;
	padding-top:58px;
	width:15px
}

#box.display-product-list #product_list li .left_block  .compare label {display:none;}

#box.display-product-list #product_list li p.compare input {
	vertical-align: text-bottom
}

#box.display-product-list #product_list li .center_block {
    float: left;
	padding:0 7px;
    width: 327px;/* 356 */
}

#box.display-product-list #product_list a.product_img_link {
	overflow:hidden;
	position:relative;
	float: left;
	display:block;
	margin-right: 14px;
	border: 1px solid #ccc
}

#box.display-product-list #product_list a.product_img_link img {
	display: block;
	vertical-align: bottom
}

#box.display-product-list #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 */
}

#box.display-product-list .ie8 #product_list li span.new{top:111px;right:0;width:94%}
#box.display-product-list .ie7 #product_list li span.new {top:111px;right:0;width:94%}

#box.display-product-list #product_list li h3 {
	padding:0 0 10px 0;
	font-size:13px;
	color:#000
}

#box.display-product-list #product_list li a {
	color: #000;
	text-decoration: none;
}

#box.display-product-list #product_list li p.product_desc {
	overflow: hidden;
	padding:0;
	line-height:16px;
}

#box.display-product-list #product_list li p.product_desc,
#box.display-product-list #product_list li p.product_desc a {
	color:#666;
}

#box.display-product-list #product_list li .right_block {
	position:relative;
	float: right;
	width: 157px;
	text-align: right;
	padding: 0 7px;
}

#box.display-product-list #product_list li .discount,
#box.display-product-list ul#product_list li .on_sale,
#box.display-product-list ul#product_list li .online_only {
	display: block;
	font-weight: bold;
	color: #dcdb05;
	text-transform: uppercase;
	font-size: 18px;
	margin-bottom: 10px;
}

#box.display-product-list #product_list li .discount {
	display: block;
	font-weight: bold;
	color: #dcdb05;
	text-transform: uppercase;
	font-size: 18px;
	margin-bottom: 10px;
}

#box.display-product-list #product_list li .online_only {
	margin:0 0 10px 0
}

#box.display-product-list #product_list li .content_price {
	margin: 16px 0 15px 0;
}

#box.display-product-list #product_list li .price {
	display: block;
	margin-bottom: 15px;
	font-weight:bold;
	font-size: 18px;
	color:#000;
}

#box.display-product-list #product_list li span.availability {
	color: #000
}

#box.display-product-list #product_list li .ajax_add_to_cart_button {
	float:right;
	padding-right: 34px;
	padding-top: 7px;
	padding-bottom: 7px;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}

#box.display-product-list #product_list li .ajax_add_to_cart_button:hover {
	box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-ms-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-o-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7);
}
   
#box.display-product-list #product_list li .ajax_add_to_cart_button span {
	position:absolute;
	top: 1px;
	right: 3px;
	display:block;
	height:26px;
	width:26px;
	background:url(../img/icon/pict_add_cart.png) no-repeat 0 0
}	

#box.display-product-list #product_list li .lnk_view {
    float: right;
	color: #000;
    padding: 7px 10px 7px 10px;
	margin-right: 5px;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}

#box.display-product-list #product_list li .lnk_view:hover {
	box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-ms-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-o-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7);
}

/* ///// GRID VIEW ///// */
#box.display-product-grid ul#product_list {
	list-style-type: none
}

#box.display-product-grid #product_list li {
	text-align: center;
	position: relative;
	overflow: hidden;
	float: left;
	width: 126px;
	padding: 6px 2px 10px;
	margin-bottom: 20px;
	margin-right: 5px;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
#box.display-product-grid #product_list li:hover {
	background: #f9f9f9;
	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
}

#box.display-product-grid #product_list li.last_row_item {margin-right: 0;}
	
#box.display-product-grid #product_list li a {
	color: #374853;
	text-decoration: none
}

#box.display-product-grid #product_list a.product_img_link {
	overflow:hidden;
	position:relative;
	display:block;
}

#box.display-product-grid #product_list a.product_img_link img {
	display: block;
	vertical-align: bottom;
	margin: auto;
}
	
#box.display-product-grid #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);
	-ms-transform: rotate(45deg);
	background-color: #990000
}

#box.display-product-grid #product_list li h3 {
	padding:4px 0 0 0;
	font-size:12px;
	color:#000;
	min-height: 55px;
}

#box.display-product-grid #product_list li p.product_desc {
	overflow: hidden;
	padding:0;
	line-height:16px;
}

#box.display-product-grid #product_list li p.product_desc,
#box.display-product-grid #product_list li p.product_desc a {
	color:#666;
}

#box.display-product-grid #product_list li .discount,
#box.display-product-grid ul#product_list li .on_sale,
#box.display-product-grid ul#product_list li .online_only {
	display: block;
	font-weight: bold;
	margin: 5px 0;
	padding: 1px 5px;
	color: #dcdb05;
	text-transform: uppercase;
	font-size: 18px;
}

#box.display-product-grid #product_list li .discount {
	display: inline-block;
	font-size: 10px;
	color: #fff;
	background: none repeat scroll 0 0 #9B0000
}

#box.display-product-grid #product_list li .content_price {
	margin-bottom: 6px;
}

#box.display-product-grid #product_list li .price {
	display: block;
	padding-bottom: 15px;
	font-weight:bold;
	font-size: 18px;
	color:#000;
}

#box.display-product-grid #product_list li span.availability {
	display:none; /* remove to show availability */
	color: #000;
}

#box.display-product-grid #product_list li .ajax_add_to_cart_button {
	padding-right: 34px;
	padding-top: 7px;
	padding-bottom: 7px;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	display:block;
    width: 40%;
    margin: auto;
}

#box.display-product-grid #product_list li .ajax_add_to_cart_button:hover {
	box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-ms-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-o-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7);
}

#box.display-product-grid #product_list li .ajax_add_to_cart_button span {
	position:absolute;
	top: 1px;
	right: 3px;
	display:block;
	height:26px;
	width:26px;
	background:url(../img/icon/pict_add_cart.png) no-repeat 0 0
}

#box.display-product-grid #product_list li p.compare {padding-bottom: 0;margin-top: 10px;}

.price-line-through {
	text-decoration: line-through;
	color: #000;
}

#box.display-product-grid #product_list li a.lnk_view {
    position: absolute;
    top: -24px;
    left: 0px;
    width: 90%;
	color: #000;
	z-index: 9999;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
#box.display-product-grid #product_list li:hover a.lnk_view {
    top: 0px;
}

#box.display-product-grid #product_list li a.lnk_view:hover {
	box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-ms-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-o-box-shadow: 0 0 5px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7);
}

Ricarditu · October 16, 2013

Hi Jiten rash!

Any idea why it's not working? The shop is going to be launched soon and this is quite urgent...

Thanks!

List/Grid layout in Product List - Javascript in .tpl

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites