[FREE TUTORIAL] Change the default list display to a grid (1.5)

12.6k · October 3, 2012

Hey guys! I just finished a new tutorial on how to change the default product list into a grid, unsing prestashop 1.5's default template.

If anybody is interested, here is the link:

http://nemops.com/grid-display-prestashop-1-5/

Cheers!

October 4, 2012

Hi, great post.

I was looking for this, it will be great for my shop.

Thanks!

October 5, 2012

good share thanks

5.6k · October 5, 2012

Hello all, thank you Nemo for this contribution. We are trying to clean up the forum and I will PIN tutorials that will certainly help other Merchants for now.

12.6k · October 5, 2012

Thanks benjamin, glad I could help!

October 8, 2012

Nice a big applaus !

October 8, 2012

Thanks benjamin, glad I could help!

How can I set to total of products to display in the row for featured products ? Let say now is 4, I want to make it 6 ?

12.6k · October 8, 2012

For featured products? You mean the homefeatured module? it's about the same, you should change the nbitemsperline (or something like this) in the module's TPL

October 9, 2012

For featured products? You mean the homefeatured module? it's about the same, you should change the nbitemsperline (or something like this) in the module's TPL

Yes, is for homfeatured module.

I found the nbitemperline var and changed it from 4 to 6 or 2, but it can't reflect after that ? ( I have forced complile )

Cant you please help ?

12.6k · October 9, 2012

Have you tried changng the css too? If i can recall, the width of each single element is also hardcoded there

12.1k · October 10, 2012

Great, thanks for the valuable contribution. I will have use of this, cause my 2-column-theme with list-or-grid-switch isnt' working anymore on PS 1.5.X. I prefere too to have a grid instead of a list, specially when you aren't using short-descriptions.

October 10, 2012

hi, i've tried using your tutorial step by step:

1. deleting all code in product_list.css

2. change the code in product-list.tpl

but the category page become blank.....

did i make some mistake???

oh, and i change the column from 3 to 2...it works but when i click on the product, the product still display its original width but the description below it already stretch out. any code should modified for this?

below is the screenshot

it also happen on the front page at the slide show

Edited October 10, 2012 by catharina (see edit history)

12.6k · October 10, 2012

Hi,

Try to force recompiling, maybe its just that. For the product page, you'll have to go to css/product.css and edit pb_right_column and pb_left_column ( If i can recall correctly) and stretch them to the full size. Also, if the page is totally blank, maybe there's some little typo in the code, turn on errors and see what happens

Fabio

October 10, 2012

Hi Fabio,

i've rechecked all the code and force compiling.

i've noticed that there's a little bit differences between the code on the step by step screen and the code on the final source screen. so i decided to follow the code on the final source but the page is still blank.

i'm totally lost......

12.6k · October 10, 2012

Weird! But is it totally blank? Can you link it?

October 11, 2012

i'll give you my website....

it's totally blank on the category

www.fancygiftmart.com

Edited October 11, 2012 by catharina (see edit history)

October 12, 2012

hello,

thanks for tutorial

Michel

October 13, 2012

Hi,

I noticed that if the title text is long, it shows trailing dots (Folio...)

How can we show the full text? Wrap it to 2-3 lines?

Thanks

12.6k · October 13, 2012

Hi,

to which "title" are you exactly referring to? The product name? if so, increase or remove the value after "|truncate" in the product name part (h3). At the moment it's set to 26

Cheers!

Fabio

October 15, 2012

Hi,

If the product is on sale, how can we show the discount in % next to the "on sale" text?

Thanks

12.6k · October 15, 2012

Here:

{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}

October 15, 2012

Hi, the code is same as in your tutorial.

It doesn't show discount %.

In product.tpl the following code is used to display % reduction (I think!)

<p id="reduction_percent" {if !$product->specificPrice OR $product->specificPrice.reduction_type != 'percentage'} style="display:none;"{/if}><span id="reduction_percent_display">{if $product->specificPrice AND $product->specificPrice.reduction_type == 'percentage'}-{$product->specificPrice.reduction*100}%{/if}</span></p>

I tried adding to your code but it doesn't work

12.6k · October 15, 2012

Right. Sorry, i misread what you wrote.

I don't have time to go and check out right now, but I think it will be enough to convert the product object to array, so that

$product->specificPrice

will be

$product.specificPrice

Again, I'm not sure, you should check variable names, since they might change.

Fabio

October 15, 2012

You mean I should add the following to your code?

<p id="reduction_percent" {if !$product.specificPrice OR $product.specificPrice.reduction_type != 'percentage'} style="display:none;"{/if}><span id="reduction_percent_display">{if $product.specificPrice AND $product.specificPrice.reduction_type == 'percentage'}-{$product.specificPrice.reduction*100}%{/if}</span></p>

It doesn't work.

12.6k · October 15, 2012

As i said i don't remember if the variables you need are assigned in the category pages (and how they're named). You can try to print a debug of each product and check for the reduction like this {$product|@debug_print_var}

October 16, 2012

Thanks Nemo1! I'll try and see if I can solve. Newbie coder so don't know how far I'll get.

October 17, 2012

Hi Nemo,

I have used your tutorial to get it so it just shows just an image. However I am having a few problems.

I cannot rezise the image, and I also have an uneven grey borders around the image to the bottom and right. I have made it to do 5 images wide as I am using full page width. Any ideas where I have messed up?

Here is an image of the problem.

http://imgur.com/jjCDK

Its the extended grey bits (I have added Yellow dashes)

Thanks

October 18, 2012

Hi Guys,

This is what I did.

12.6k · October 18, 2012

Hi Nemo,

I have used your tutorial to get it so it just shows just an image. However I am having a few problems.

I cannot rezise the image, and I also have an uneven grey borders around the image to the bottom and right. I have made it to do 5 images wide as I am using full page width. Any ideas where I have messed up?

Here is an image of the problem.

http://imgur.com/jjCDK

Its the extended grey bits (I have added Yellow dashes)

Thanks

To change the image size, you should switch to another type of image (which you can se in back office)

{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}

"Home" to something else. In this case, remove the width/height, otherwise the image will still retain its dimensions. You can hardcode them, of course.

OR

You can change the size for the home image type

For the border, you will need to change the css

Fabio

October 18, 2012

To change the image size, you should switch to another type of image (which you can se in back office)
{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}
"Home" to something else. In this case, remove the width/height, otherwise the image will still retain its dimensions. You can hardcode them, of course.

OR

You can change the size for the home image type

For the border, you will need to change the css

Fabio

Thanks for the reply. I hav e changed the image size of home before but it does not change the size of what you see on the category page (125x125 roughly). If you go "view image" it views it at what I changed it to (250x250), which is the un squashed image size.

Regarding the CSS, I figured it was this, however it seems like there is a double up somewhere of the padding, related to the margin. As you change the margin-right and bottom it increases/decreases the padding, as well as the margin. I have tried iwth firebug but cannot find out why this is. Any ideas what line the img is getting its properties from?

Thanks for your time

EDIT: I have just noticed that an additional set of image sizes which appeared after trying a template has been affecting the images even though they are unticked. This fix the issue., The CSS is not fixed but as I increased the size it looked correct for me. The issue is more masked than fixed if anyone else had a similar problem to me

Edited October 18, 2012 by the_el_man (see edit history)

12.6k · October 18, 2012

Hi,

can you please make me an example of this "double up"?

October 19, 2012

Hi,

I copied the tutorial and everything works fine except my product images do not show in the category. So, I downloaded your project files and copied from there and still no good. I did force compilation. Any advice? The link is http://boite-a-savon.com/shop/index.php?id_category=3&controller=category&id_lang=1

Also, is there an easy way to keep the left column on the other pages except the category page (home, product, etc.)

12.6k · October 19, 2012

Are you using 1.5.1? If so, change the image type from "home" to "home_default". It should fix it

For the left column, you can try somethig like {if $page_name == 'category'} etc...

Fabio

October 19, 2012

How can we change subcategories displayed on Category page to grid view too?

Here is CSS for default theme PS1.5.1

--------------------------------------------------

/* ************************************************************************************************

SUB CATEGORIES

************************************************************************************************ */

#subcategories {margin-top:15px}

#subcategories h3 {

padding:14px 12px;

font-size:13px;

color:#fff;

text-transform:uppercase;

text-shadow:0 1px 0 #666;

background:url(../img/bg_table_th.png) repeat-x 0 0 #999

}

.inline_list {

list-style-type:none;

margin-top:10px;

}

.inline_list li {

padding:10px 0;

border-bottom:1px dotted #ccc

}

.inline_list li .img {

float:left;

margin-right:15px

}

.inline_list li img {

border:1px solid #ccc

}

.inline_list li .cat_name {

font-weight:bold;

font-size:13px

}

12.6k · October 19, 2012

Try changing this:

.inline_list li {
padding:10px 0;
border-bottom:1px dotted #ccc
}

To:

.inline_list li {
float:left;
margin-right: 10px;
width: /* THE WIDTH YOU WaNT*/
padding:10px 0;
border-bottom:1px dotted #ccc
}

Then, to avoid the container being collapsed, add class="clearfix" to the containing ul

Hope this helps

Fabio

Edited October 19, 2012 by Nemo1 (see edit history)

October 19, 2012

Are you using 1.5.1? If so, change the image type from "home" to "home_default". It should fix it

For the left column, you can try somethig like {if $page_name == 'category'} etc...

Fabio

Thanks! that fixed the images. Where would I put the {if $page_name == 'category'} to keep the left column on the other pages? What line #?

October 19, 2012

Try changing this:
.inline_list li {
padding:10px 0;
border-bottom:1px dotted #ccc
}
To:
.inline_list li {
float:left;
margin-right: 10px;
width: /* THE WIDTH YOU WaNT*/
padding:10px 0;
border-bottom:1px dotted #ccc
}
Then, to avoid the container being collapsed, add class="clearfix" to the containing ul

Hope this helps

Fabio

You are the man! Thanks once again!

12.6k · October 19, 2012

Thanks! that fixed the images. Where would I put the {if $page_name == 'category'} to keep the left column on the other pages? What line #?

Can't check right now, but it's right before <div id="left_column"> in header.tpl

You are the man! Thanks once again!

Glad it helped!

October 20, 2012

Hello,

i try the change but in category i have not return image

this is my product_list

where is the mistake ?

Thanks for a reply

ul#product_list {

list-style-type: none

}

#product_list li {

text-align: center;

float: left;

width: 142px;

padding: 16px;

margin-bottom: 14px;

margin-right: 20px;

background-color: #f9f9f9

}

#product_list li.last_row_item {margin-right: 0;}

#product_list li a {

color: #374853;

text-decoration: none

}

#product_list a.product_img_link {

overflow:hidden;

position:relative;

float: left;

display:block;

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

-ms-transform: rotate(45deg);

background-color: #990000

}

#product_list li h3 {

padding:0 0 10px 0;

font-size:13px;

color:#000

}

#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 .discount, ul#product_list li .on_sale, ul#product_list li .online_only {

display: block;

font-weight: bold;

margin: 5px 0;

padding: 1px 5px;

color: #990000;

text-transform: uppercase

}

#product_list li .discount {

display: inline-block;

font-size: 10px;

color: #fff;

background: none repeat scroll 0 0 #9B0000

}

#product_list li .content_price {

width: 142px;

float: left;

}

#product_list li .price {

display: block;

padding-bottom: 15px;

font-weight:bold;

font-size: 16px;

color:#990000

}

#product_list li span.availability {

display:none; /* remove to show 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 p.compare {padding-bottom: 0;margin-top: 10px;}

12.6k · October 20, 2012

See my psot here http://www.prestashop.com/forums/index.php?/topic/192005-free-tutorial-change-the-default-list-display-to-a-grid-15/page__view__findpost__p__970706

October 20, 2012

I try it again (product-list.tpl was not good)

and i win with your experience

Many thanks have a good day

Best regard

October 20, 2012

Can't check right now, but it's right before <div id="left_column"> in header.tpl

Ok when I put

{if $page_name == 'category'} <div id="left_column" class="column grid_2 alpha">

{$HOOK_LEFT_COLUMN}

</div>

I get a server error page.

When I put

{if $page_name == 'category'} {*<div id="left_column" class="column grid_2 alpha">

{$HOOK_LEFT_COLUMN}

</div>*}

I get a server error page

So,what am I doing wrong?

Also, DW is saying there is a syntax error in this line

var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};

12.6k · October 20, 2012

You're leaving off the closing if

You have to add {/if} where you want to close the if statement. In your case, right after the end of the left column div

Edited October 20, 2012 by Nemo1 (see edit history)

October 21, 2012

You're leaving off the closing if

You have to add {/if} where you want to close the if statement. In your case, right after the end of the left column div

Ok that worked but now My index page and product page is all off alignment. http://boite-a-savon.com/shop/index.php & http://boite-a-savon.com/shop/index.php?id_product=7&controller=product&id_lang=1

I tried changing the left and right widths in the product.css as you mentioned before but nothing changes on any pages. How can I fix this?

Thanks!!

12.6k · October 21, 2012

You have to add grid values to the center and right, according to what has been removed. In this case, call the center one "grid_7 alpha" as a class.

Fabio

October 22, 2012

See my psot here http://www.prestasho...post__p__970706

How can I make the top menu or footer to full width or 100% of the page size?

Currently the menu or footer are set to centered width of the page content.

Please refer to attached for sample.

Thanks.

October 31, 2012

Thank for nice share! It's valuable

November 5, 2012

Hello,

nice post. I was wondering how it would be possible to show the manufacturers_list as a grid, this way: http://www.menlook.com/fr/marques-mode-homme (Prestashop website) or this way http://www.asos.com/it/Men/A-To-Z-Of-Brands/Cat/pgehtml.aspx?cid=1361&via=top&xr=1&mk=VOID&r=3

I guess it should be simple, but i'm not yet very accustomed to smarty

12.6k · November 5, 2012

Hi Bepped,

That's a bit complex, especially the alphabetic fashion. If you don't care of the letters, you can use about the same method, by floating each list item to the left and giving them a fixed size that fits into the center column. It's a bit too comlplex to explain the whole thing in a single post, maybe I'll make a tut about the alphabetic sorting!

Fabio

November 5, 2012

Thanks, i understand the alphabetic fashion would be complex. I would like to have the brands listed in a grid like the products in your tutorial. I guess i have to change the manufacturers_list.tpl and global.css, using same method you showed about products

12.6k · November 5, 2012

The css is probably stored in manufacturer.css (not that I'm sure of it though!)

November 16, 2012

I try it, but doesn't seems work with prestashop 1.5.2

I copy and replace tpl and css file.

the result like this...

12.6k · November 16, 2012

Hi,

You're definitely missing something, perhaps the "last item of the line" thing that removes the fourth item's margin, since that's the only thing i can think about that may cause the last element of the line to be pulled down. Or, maybe, you don't have enough space

November 21, 2012

This work with prestashop 1.4.9.0?

12.6k · November 21, 2012

Not just by copying/pasting i suppose. It's created with 1.5, so you'll have to have a closer look at what you do, but it can give you a hand indeed

November 22, 2012

Thank you! I need a help!

This is my product-list.tpl:

{if isset($products)}
<!-- Products 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">
  <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} /></a>
  <div class="center_block">
   <div class="product_flags">
 {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</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}{if isset($product.online_only) && $product.online_only} ({l s='Online only!'}){/if}</span>{/if}
   </div>
   <h3><a class="product_link" 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 class="product_descr" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'|escape:'htmlall':'UTF-8'}">{$product.description_short|truncate:270:'...'|strip_tags:'UTF-8'}</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!'}</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}
   {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
 {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</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)}
  <a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
 {else}
  <span class="exclusive">{l s='Add to cart'}</span>
 {/if}
   {/if}
   <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
   {if isset($comparator_max_item) && $comparator_max_item}
 <p class="compare checkbox"><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{/if}/> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p>
   {/if}   
  </div>
 </li>
{/foreach}
</ul>
<!-- /Products list -->
{/if}

December 19, 2012

thanks.. going to try it

December 24, 2012

Great tutorial, explained in a very easy way to understand. Makes my site look way more professional. Thanks Nemo.

January 7, 2013

<p>a littel bit of playing around with design </p>

<div> SUB CATEGORIES</div>

<div>#subcategories {margin-top:5px}</div>

<div>#subcategories h3 {</div>

<div>padding:14px 12px;</div>

<div>color: #C00;</div>

<div>text-transform:uppercase;</div>

<div>text-shadow:0 1px 0 #666;</div>

<div>background:url(../img/bg_table_th.png) repeat-x 0 0 #999</div>

<div>.inline_list {</div>

<div>list-style-type: none;</div>

<div>margin-top:10px;</div>

<div>.inline_list li {</div>

<div>width: 100px;</div>

<div>height: 110px;</div>

<div>float:left;</div>

<div>margin: 10px;</div>

<div>padding:5px 0;</div>

<div>border:1px solid #ccc;</div>

<div>-moz-border-radius: 3px;</div>

<div>-webkit-border-radius: 3px;</div>

<div>border-radius: 3px;</div>

<div>text-align:center;</div>

<div>.inline_list li:hover { background-color: #999;</div>

<div>.inline_list li .img {</div>

<div>float:left;</div>

<div>margin-right:15px</div>

<div>.inline_list li img {</div>

<div>border:none</div>

<div>.inline_list li .cat_name {</div>

<div>font-weight:bold;</div>

January 8, 2013

Try changing this:
.inline_list li {
padding:10px 0;
border-bottom:1px dotted #ccc
}
To:
.inline_list li {
float:left;
margin-right: 10px;
width: /* THE WIDTH YOU WaNT*/
padding:10px 0;
border-bottom:1px dotted #ccc
}
Then, to avoid the container being collapsed, add class="clearfix" to the containing ul

Hope this helps

Fabio

I did this but it didn't work well:

My category.css is:

.inline_list  li {
float:left;
margin-right: 10px;
width: 40px;
padding:10px 0;
border-bottom:1px dotted #ccc

and my category tpl:

<h3>{l s='Subcategories'}</h3>
  <ul class="clearfix">
  {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}

Any ideas why it looks messy?

12.6k · January 8, 2013

Add the class "inline_list" to the subcategories ul

Edited January 8, 2013 by Nemo1 (see edit history)

January 9, 2013

I've changed the

<ul class="clearfix">

to

<ul class="inline_list">

but now the description falls down. Can you help?

12.6k · January 9, 2013

No, I you have to ADD it, not replace it

Edited January 9, 2013 by Nemo1 (see edit history)

January 9, 2013

No, I you have to ADD it, not replace it

<ul class="clearfix inline_list">

still no luck

12.6k · January 9, 2013

Can you show me the page?

January 9, 2013

Can you show me the page?

sure thing it's http://mebleprowansalskie.com

12.6k · January 9, 2013

Uhm, Actually I can see them correctly, you just set the width to a far too small amount, increase it and they'll be okay

January 14, 2013

Hi there, great tutorial! I seem to be having a problem with the main thumbnail not loading now, any ideas?

12.6k · January 14, 2013

be sure you name them like "nameoftheimage_default", with the "_default" suffix

January 15, 2013

Uhm, Actually I can see them correctly, you just set the width to a far too small amount, increase it and they'll be okay

You were right! I've changed it and now it's ok, thank you!

Three things still driving me crazy:

In subcategories there is that annoying margin right next to the last item in a row, can't figure where to get rid of it...

On main page I want to display 5 products instead of four so I changed

{if $smarty.foreach.products.iteration%4 == 0}last_row_item

to

{if $smarty.foreach.products.iteration%5 == 0}last_row_item

but nothing happened. Force compile is on.

The other issue is that I have no add to cart button visible...

Thanks in advance:)

January 25, 2013

Hi!

Got this tutorial working brilliantly for most pages..(sorted out one issue - needed to lower truncation limit as one of the products was throwing it out)

Subcategories in http://www.painefree...s-stitch-charts doesn't work very well - the tiling is different for both top two and bottom 2 categories.

my product_list.tpl

*}

{if isset($products)}

{foreach from=$products item=product name=products}

<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:40:'...':true}</a></h3>

{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}{l s='Out of stock'}{/if}</span>{/if}

{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>

{else}

{/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&id_product={$product.id_product|intval}&token={$static_token}", true)}" 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&id_product={$product.id_product|intval}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>

{/if}

{else}

{/if}

{if isset($comparator_max_item) && $comparator_max_item}

<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>

</p>

{/if}

</div>

</li>

{/foreach}

</ul>

{/if}

my subcategory section in "category.tpl"

<h3>{l s='Subcategories'}</h3>

{foreach from=$subcategories item=subcategory}

<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}

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

</div>

{/if}

and category.css shows:

.inline_list li {

float:left;

margin-right: 10px;

width: 200;

padding:10px 0;

border-bottom:1px dotted #ccc

any ideas? I really would appreciate the help, as it is *almost* right and looking a lot better than the default list view.

Edited January 25, 2013 by Ariadne (see edit history)

January 26, 2013

Ariadne, you had saved me... The tutorial did not work for me, but i what i did was copying your code then it worked

Edited January 26, 2013 by charliehaha (see edit history)

January 28, 2013

great Charlie

Subcategories are still looking weird for me though, I was hoping someone would be able to help :/

January 28, 2013

Hallo people.

I want to adding little description, view button and price in my grid pages - how to make that?

Please help my with basic code how to add this thing. I can make final adjustments.

My shop: http://bijutaniki.com/

Category page in my shop: http://bijutaniki.com/24-damski-prysteni

2 pictures

1. My home featured page - i wont to make category list page be like home featured page in my shop. LINK

2. How look my category page now - almost no changes from the nemos code. LINK

2. Final result that i want in category page. LINK

my productlist.tpl and my product_list.css

Regards.

Dodi Markov

February 4, 2013

time saver dude....tx

February 7, 2013

Thanks so much for this great tutorial.

I would like to know is, is it possible to keep both left column and right column and have 3 or 4 items listed next to each other in the middle? Which is similar to Home Featured Products?

Could you give me some idea on how to do that?

Or still to follow your guide and where to make some changes to get the result?

I am running on 1.5.3.1.

Really appreacite your help and time.

[FREE TUTORIAL] Change the default list display to a grid (1.5)

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites