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

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

pjsc979 · October 4, 2012

Hi, great post.

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

Thanks!

archproject · October 5, 2012

good share thanks

benjamin utterback · 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.

NemoPS · October 5, 2012

Thanks benjamin, glad I could help!

gen_2000 · October 8, 2012

Nice a big applaus !

gen_2000 · 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 ?

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

gen_2000 · 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 ?

NemoPS · October 9, 2012

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

guest* · 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.

catharina · 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)

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

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

NemoPS · October 10, 2012

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

catharina · 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)

mic84 · October 12, 2012

hello,

thanks for tutorial

Michel

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

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

innocuous · October 15, 2012

Hi,

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

Thanks

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

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

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

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

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

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

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

gen_2000 · October 18, 2012

Hi Guys,

This is what I did.

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

the_el_man · 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)

NemoPS · October 18, 2012

Hi,

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

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

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

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

}

NemoPS · 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)

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

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

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

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

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

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

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

NemoPS · 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)

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

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

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

Bejo · October 31, 2012

Thank for nice share! It's valuable

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

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

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

NemoPS · November 5, 2012

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

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

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

deroseforniture · November 21, 2012

This work with prestashop 1.4.9.0?

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

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

kip · December 19, 2012

thanks.. going to try it

AntWale · December 24, 2012

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

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

letrof · 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?

NemoPS · January 8, 2013

Add the class "inline_list" to the subcategories ul

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

letrof · January 9, 2013

I've changed the

<ul class="clearfix">

to

<ul class="inline_list">

but now the description falls down. Can you help?

NemoPS · January 9, 2013

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

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

letrof · January 9, 2013

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

<ul class="clearfix inline_list">

still no luck

NemoPS · January 9, 2013

Can you show me the page?

letrof · January 9, 2013

Can you show me the page?

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

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

sempersweetheart · January 14, 2013

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

NemoPS · January 14, 2013

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

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

Ariadne · 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)

charliehaha · 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)

Ariadne · January 28, 2013

great Charlie

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

Detelin Markov · 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

qoeme · February 4, 2013

time saver dude....tx

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

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

kangaroobaby · February 8, 2013

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 · February 10, 2013

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 · February 15, 2013

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

thanx for advanced

kangaroobaby · February 18, 2013

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 · February 18, 2013

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}

All22 · February 18, 2013

O.K., here is my product_list.css.

Be sure to use developer tools and make adsjustments you need, because your layout may differ! It depends on parts you use in your product pages. Just use "inspect element" tool, find appropriate css and change its value. Usually adjusting width/heigth, float: left should do the things.

ul#product_list {list-style-type: none;}

#li .ajax_block_product first_item item clearfix {width:130px;padding:0;}

#li .ajax_block_product last_item item clearfix {clear:right;}

div.left_block {padding-top:2px;padding-left:2px;height:18px;}

#product_list li {margin: 0 5px 8px 0;padding: 2px 0px;width:132px;float:left;

border: 1px solid #eee;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px}

#product_list li a {color: #374853;text-decoration: none}

#product_list li .left_block {float:left;padding-top:0px;width:126px}

#product_list li .left_block .compare label {display:none;}

#product_list li p.compare input {vertical-align: text-bottom}

#product_list li .center_block {float: left;padding-left:2px;padding-right:0px;width: 126px;border-right:1px dotted #ccc}

#product_list a.product_img_link {overflow:hidden;position:relative;float: left;display:block;margin-right: 0px;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;

transform: rotate(45deg); /* Newer browsers */

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */}

.ie9 #product_list li span.new{top:-18px;right:-38px}

.ie8 #product_list li span.new{top:-18px;right:-38px}

.ie7 #product_list li span.new {top:-30px;right:-25px}

.lt-ie6 #featured-products_block_center .product_image span.new {top:-30px;right:-25px}

#product_list li h3 {padding:0 0 10px 0;font-size:13px;color:#000}

#product_list li a {color: #000;text-decoration: none;}

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

#product_list li p.product_desc,#product_list li p.product_desc a {color:#666;}

#product_list li .right_block {position:relative;float: left;width: 145px;text-align: right}

#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {display: block;font-weight: bold;

color: #990000;text-transform: uppercase}

#product_list li .discount {float:right;font-weight: bold;padding: 0 2px 4px 4px;

font-size: 10px;color: #fff;text-transform: uppercase;background: none repeat scroll 0 0 #9B0000}

#product_list li .online_only {margin:0 0 5px 0;width:126px;}

#product_list li .content_price {margin:0px;width:126px;}

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

#product_list li span.availability {color: #488C40}

#product_list li .ajax_add_to_cart_button {padding-left: 20px;margin-right:17px;}

#product_list li .ajax_add_to_cart_button span {display: block;position: absolute;top: -1px;left: -12px;

height: 26px;width: 26px;background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent}

#product_list li .lnk_view {width:108px;display: block;margin-top:5px;padding:0 10px;border:none;font-weight:bold;color:#0088CC;

background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent}

#product_list li .lnk_view:hover {text-decoration:underline}

prestaku · February 22, 2013

thank u very much ALL22. it works now.

and the other problem is when I type a long description couse the product colums shift down. plz help

Edited February 25, 2013 by prestaku (see edit history)

All22 · February 22, 2013

<p>In your product_list.tpl find statements like this:</p>

<p><h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:<span style="color:#ff0000;">19</span>:'...'}</a></h3></p>

<p>Change truncate value - it's a length of string which will be displayed and ended with ... Don't forget, that "m" is larger then "i" so be careful with the value you set... Better may be smaller, but not too short...</p>

<p>Just behind iffed strings (e.g. availability, only online...) I put </p>

<p>where class is the same as for the rest of the statement. If attribute is not set, it will keep the place, so whether attribute is displayed or not, the height is the same...</p>

<p>For <span style="color:#0000cd;">availability</span> class it looks like this:</p>

<div>{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="<span style="color:#0000ff;">availability</span>">{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><span style="color:#ff0000;">{else}<span class="availability">&nbsp</span></span>{/if}</div></div>

<div>The similar spans I will use in my product page as well, and if there's need, for subcategories, too.</div>

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

yoligrana · February 26, 2013

Hi Nemo1, I need to show by default the category products in a list not a grid and delete the grid/list option on header.

It is easy to implement? How can I do it?

Thanks in advance.

NemoPS · February 26, 2013

Hi Nemo1, I need to show by default the category products in a list not a grid and delete the grid/list option on header.

It is easy to implement? How can I do it?

Thanks in advance.

? I don't understand, Prestasho displayes the lsit view by default. What is your problem?

yoligrana · February 26, 2013

? I don't understand, Prestasho displayes the lsit view by default. What is your problem?

Hi Nemo, my prestashop (template) displays grid by default: http://www.vinosmontesol.es/index.php?id_category=2&controller=category with option to choose grid or list ¿can you see it?.

I want to delete the grid or list option and to display list by default. How can I do this?

NemoPS · February 26, 2013

You've got to ask the theme's developer for this

prestaku · February 28, 2013

hi nemo.

-how to display the short description?

-& how to display the entire title of the product without the dots?. for example the title product: not xxxx xxxx xxx.......

thanx in advance

Edited February 28, 2013 by prestaku (see edit history)

prestaku · March 1, 2013

<p>In your product_list.tpl find statements like this:</p>

<p> </p>

<p><h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:<span style="color:#ff0000;">19</span>:'...'}</a></h3></p>

<p> </p>

<p>Change truncate value - it's a length of string which will be displayed and ended with ... Don't forget, that "m" is larger then "i" so be careful with the value you set... Better may be smaller, but not too short...</p>

<p> </p>

<p>Just behind iffed strings (e.g. availability, only online...) I put </p>

<p> </p>

<p></span><span style="color:#ff0000;">{else}<span class="availability">&nbsp</span></span>{/if}</p>

<p> </p>

<p>where class is the same as for the rest of the statement. If attribute is not set, it will keep the place, so whether attribute is displayed or not, the height is the same...</p>

<p> </p>

<p>For <span style="color:#0000cd;">availability</span> class it looks like this:</p>

<p> </p>

<p> </p>

<div>{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="<span style="color:#0000ff;">availability</span>">{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><span style="color:#ff0000;">{else}<span class="availability">&nbsp</span></span>{/if}</div></div>

<div> </div>

<div>The similar spans I will use in my product page as well, and if there's need, for subcategories, too.</div>

thanks. it works but when i displayed 5 more products the "short by bar" always moves to the middle. how to fix it?and how to display prices like nemo has? thanks in advance

Davallen · March 2, 2013

Hi Nemo1,

Relly nice tutorial and it work flawlessly! I would like to show the discount in % the same way as in product page instead of "Reduced price"?

I've added this code from another post and it works fine, but it also shows the "reduced price" on products without a reduced price. Could you tell why?

{if $product.price_without_reduction neq $product.price}

							 <span class="price-discount">{if !$priceDisplay}{displayWtPrice p=$product.price_without_reduction}{else}{displayWtPrice p=((($product.price_without_reduction) / (1 + ((($product.rate|intval) / 100)|floatval)))|floatval)}{/if}</span>
								{if $product.specific_prices}{assign var='pro_specific_prices' value=$product.specific_prices}
									 {if $pro_specific_prices.reduction_type eq 'percentage' && ($pro_specific_prices.from eq $pro_specific_prices.to OR ($smarty.now|date_format:'%Y-%m-%d %H:%M:%S' <= $pro_specific_prices.to && $smarty.now|date_format:'%Y-%m-%d %H:%M:%S' >= $pro_specific_prices.from))}
									 (-{$pro_specific_prices.reduction * 100|floatval}%)
									 {/if}
								{/if}
							{/if}

Best regards

Umut

Edited March 2, 2013 by Davallen (see edit history)

March 5, 2013

Thanks man! Very helpful!

Michedou · March 9, 2013

Hi,

Searching how to display only the categories as grid - as in 1.4 - I came in this topic from Google on page 2 and missed the link to the tuto itself ;-)

In spite of this it works fine (lyse.be/tires) even using a template (Graphileom, free, nice for the price) and many thanks for that tuto and also to all newbies like me for their questions. Still need to resize images but going on reading...

One last thing, any idea how to put the description below the image in place of next to?

[sOLVED] after resizing the images

Michel

Edited March 15, 2013 by Michedou (see edit history)

BuB · March 10, 2013

I'm also using this, thanks for sharing with us. My shop (in progress) looks a lot nicer this way. But how can I make my product page use the free space from the deleted left column? It now looks as you can see on the attached screensho. I'v read something about editing pb_right_column and pb_left_column. Is that right? Can I fill out 100% there or something?

Edited March 10, 2013 by BuB (see edit history)

BuB · March 15, 2013

On the homepage my products aren't showing correctly as you can see at the image. How to fix this?

Kami Solutions · March 25, 2013

what a headache...I have 1.5.3.1 prestashop and the first time doesn't worked, so I decided to do it later.

I don't know why prestashop doesn't allows you to change a list view of the products to a grid view, for example zencart is a native option. Is possible to make a module that changes de view?It'll be awesome

angGG · March 26, 2013

If i add this towards my website will it destroy the left side of my website in thsi page?

http://cosmeticall.ro/35-manichiura-gel

it looks pretty crap now imo

leowls · March 28, 2013

A noob question, why is there a need to create a new theme in the beginning of the tutorial?

Can I follow the tutorial without creating a new theme?

Thanks.

kangaroobaby · April 3, 2013

hi there:

It is great guide.

Just wonder if I could hide right column and keep left column.NOt for Home page, Only for the Category. I can not find the Right Column in Header.tpl.

Could you suggest How to hide Right Column and make Center Column expand to the right.

Thanks in advance

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

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

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