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

[NemoPS 1,857]

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!

[pjsc979 0]

Hi, great post.

 

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

 

Thanks!

[archproject 11]

good share thanks

[benjamin utterback 858]

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.

[NemoPS 1,857]

Thanks benjamin, glad I could help!

[gen_2000 2]

Nice a big applaus !

[gen_2000 2]

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 ?

[NemoPS 1,857]

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

[gen_2000 2]

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 ?

[NemoPS 1,857]

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

[guest* 1,020]

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.

[catharina 2]

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)

[NemoPS 1,857]

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

[catharina 2]

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

[NemoPS 1,857]

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

[catharina 2]

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)

[mic84 1]

hello,

thanks for tutorial

 

Michel

[innocuous 14]

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

[NemoPS 1,857]

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

[innocuous 14]

Hi,

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

 

Thanks

[NemoPS 1,857]

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}

[innocuous 14]

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

[NemoPS 1,857]

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

[innocuous 14]

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.

[NemoPS 1,857]

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}

[innocuous 14]

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

[the_el_man 2]

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

[gen_2000 2]

Hi Guys,

 

This is what I did.

 

[NemoPS 1,857]

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

[the_el_man 2]

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)

[NemoPS 1,857]

Hi,

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

[Samantha57820 1]

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

[NemoPS 1,857]

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

[innocuous 14]

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

}

[NemoPS 1,857]

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)

[Samantha57820 1]

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 #?

[innocuous 14]

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!

[NemoPS 1,857]

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!

[redtango2 8]

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

[NemoPS 1,857]

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

[redtango2 8]

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

and i win with your experience

 

Many thanks have a good day

 

Best regard

[Samantha57820 1]

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

 

<!-- Left -->

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

[NemoPS 1,857]

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)

[Samantha57820 1]

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

[NemoPS 1,857]

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

[gen_2000 2]

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.

[Bejo 11]

Thank for nice share! It's valuable

[bepped 0]

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

[NemoPS 1,857]

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

[bepped 0]

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

[NemoPS 1,857]

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

[TurtlePie 2]

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

[NemoPS 1,857]

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

[deroseforniture 0]

This work with prestashop 1.4.9.0?

[NemoPS 1,857]

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

[deroseforniture 0]

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}

 

[kip 3]

thanks.. going to try it

[AntWale 0]

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

[malcek 30]

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

<p> </p>

<p> </p>

<div>/* ************************************************************************************************</div>

<div>      SUB CATEGORIES</div>

<div>************************************************************************************************ */</div>

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

<div>#subcategories h3 {</div>

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

<div>font-size:13px;</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>}</div>

<div> </div>

<div>.inline_list {</div>

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

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

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

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

<div>}</div>

<div>}</div>

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

<div>float:left;</div>

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

<div>}</div>

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

<div>border:none</div>

<div>}</div>

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

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

<div>font-size:13px</div>

<div>}</div>

<div> </div>

 

[letrof 3]

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?

[NemoPS 1,857]

Add the class "inline_list" to the subcategories ul

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

[letrof 3]

I've changed the

<ul class="clearfix">

to

<ul class="inline_list"> 

but now the description falls down. Can you help?

[NemoPS 1,857]

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

 

<ul class="clearfix inline_list">

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

[letrof 3]

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

 

<ul class="clearfix inline_list">

 

still no luck

[NemoPS 1,857]

Can you show me the page?

[letrof 3]

Can you show me the page?

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

[NemoPS 1,857]

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

[sempersweetheart 0]

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

[NemoPS 1,857]

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

[letrof 3]

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

[Ariadne 1]

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

<!-- Products list -->

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

<p class="clear"></p>

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

<div class="content_price">

 

{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{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}

<span style="height:16px; margin: 5px 0; display: block"></span>

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

<span class="exclusive"><span></span>{l s='Add to cart'}</span><br />

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

 

</div>

</li>

 

 

{/foreach}

</ul>

<!-- /Products list -->

{/if}

 

 

my subcategory section in "category.tpl"

 

<!-- Subcategories -->

<div id="subcategories">

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

<ul class="clearfix 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}

 

 

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)

[charliehaha 3]

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)

[Ariadne 1]

great Charlie

 

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

[Detelin Markov 9]

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

[qoeme 4]

time saver dude....tx

[kangaroobaby 2]

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.

[kangaroobaby 2]

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.

[kangaroobaby 2]

By any chance

 

If we could make the Sub Category in Grid display instead of List Display.

 

the whole page too long.

Thanks in advance.

[All22 2]

This method works in 1.5.3. However, some adjustments are needed. My method is: open product_list.css in any text editor (notepad).

Open your product page and use developer tools in your browser (Chrome, FF), edit css metrics and make adjustments in product_list.css.

 

If you like to work with default 3 columns - it's 535px wide. Ok, just simple math. If you want to have 4 columns with product thumbs, one should be 130px - it is 4x130 = 520, the rest 15px is for 3 free spaces, e.g. 5px per one space. That means - width of "#product_list li" in .css is 130px and margin-right is 5px. Add float:left;. Just go on and adjust the rest of the elements with this method.

 

When finished, test it. I encountered difficulties with reduced prices tag, so I had to change its position in product-list.tpl. I placed it on the top.

 

Another problem was with "compare" div. I just added "clear: left" to ".content_sortPagiBar" in global.css and everything went well.

 

Above mentioned principle applies at sub-categories as well, the only difference is it's much less work . I decided to have two of them in line. Remember the math? 535 px / 2 =260 px, right margin 15 px... Edited ".inline_list li" in category.css.

 

Similarly apply at any layout you preffer. It's just easy playing, no difficult coding. Good luck!

 

P.S. You can see how does it look at www.kvetshop.sk (still under contruction...)

Edited February 10, 2013 by All22 (see edit history)

[prestaku 0]

helppp. could you share complete codes grid display for ps 1.5.3 default theme 3 columns?

thanx for advanced

[kangaroobaby 2]

This method works in 1.5.3. However, some adjustments are needed. My method is: open product_list.css in any text editor (notepad).

Open your product page and use developer tools in your browser (Chrome, FF), edit css metrics and make adjustments in product_list.css.

 

If you like to work with default 3 columns - it's 535px wide. Ok, just simple math. If you want to have 4 columns with product thumbs, one should be 130px - it is 4x130 = 520, the rest 15px is for 3 free spaces, e.g. 5px per one space. That means - width of "#product_list li" in .css is 130px and margin-right is 5px. Add float:left;. Just go on and adjust the rest of the elements with this method.

 

When finished, test it. I encountered difficulties with reduced prices tag, so I had to change its position in product-list.tpl. I placed it on the top.

 

Another problem was with "compare" div. I just added "clear: left" to ".content_sortPagiBar" in global.css and everything went well.

 

Above mentioned principle applies at sub-categories as well, the only difference is it's much less work . I decided to have two of them in line. Remember the math? 535 px / 2 =260 px, right margin 15 px... Edited ".inline_list li" in category.css.

 

Similarly apply at any layout you preffer. It's just easy playing, no difficult coding. Good luck!

 

P.S. You can see how does it look at www.kvetshop.sk (still under contruction...)

 

Thanks for your reply.

 

Just wonder if you could share the whole codes and which files we should edit for Grid display for SUBcategory..

 

Just feel a bit confused.

 

As you mentioned , we only need to edit the "category.css“ to make subcategories to Grid Display.

 

Is it right?

 

Please help. \

 

Thanks

[All22 2]

Hi all, here is my category.css.

 

 

h1{margin-bottom:10px;color:#fb4d0f;}

 

.resumecat {margin:15px 0 10px 0;padding:8px 7px;font-weight:bold;color:#0088CC;;background:#f2c31a;}

 

.content_scene_cat {padding:5px;border:1px solid #ccc;-moz-border-radius: 3px;

-webkit-border-radius: 3px;border-radius: 3px;-moz-box-shadow: 0 1px 1px #e2e2e2;

-webkit-box-shadow: 0 1px 1px #e2e2e2;box-shadow: 0 1px 1px #e2e2e2;}

 

.cat_desc {font-size:12px;line-height:18px;}

.cat_desc p {padding:0 10px 5px 10px}

.cat_desc .lnk_more {padding:0 10px;color:#0088CC;background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent;}

 

 

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

SUB CATEGORIES

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

#subcategories {margin-top:15px;background:#383838; height:30px;}

#subcategories h3 {padding:8px 12px;font-size:13px;color:#fb4d0f;text-transform:uppercase;background:#383838}

 

.inline_list {list-style-type:none;margin-top:10px;}

.inline_list li {padding:5px 0;margin-right:5px;border-bottom:1px dotted #ccc;width:260px;min-height:80px;float:left;}

.inline_list li .img {float:left;margin-right:15px}

.inline_list li img {border:1px solid #ccc;height:60px;width:60px;}

.inline_list li .cat_name {font-weight:bold;font-size:13px}