Jump to content
NemoPS

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

Recommended Posts

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 ?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

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

th_Snapshot2012-10-1021-34-53.jpg

 

it also happen on the front page at the slide show

Edited by catharina (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hi,

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

 

Thanks

Share this post


Link to post
Share on other sites

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}

Share this post


Link to post
Share on other sites

Hi, the code is same as in your tutorial.

It doesn't show discount %.

 

post-692-0-86712200-1350307021_thumb.jpg

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by the_el_man (see edit history)

Share this post


Link to post
Share on other sites

Hi,

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

}

Share this post


Link to post
Share on other sites

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 by Nemo1 (see edit history)
  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

and i win with your experience

 

Many thanks have a good day

 

Best regard

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Nemo1 (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

post-433168-0-81473900-1353046537_thumb.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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}

 

produc-list.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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:sub.jpg

 

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?

Share this post


Link to post
Share on other sites

I've changed the

<ul class="clearfix">

to

<ul class="inline_list"> 

but now the description falls down. Can you help?

Share this post


Link to post
Share on other sites

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

 

<ul class="clearfix inline_list">

 

still no luck :(

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Ariadne (see edit history)

Share this post


Link to post
Share on other sites

great Charlie :)

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :rolleyes: . 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! B)

 

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

post-321816-0-69948900-1360463254_thumb.png

Edited by All22 (see edit history)

Share this post


Link to post
Share on other sites

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

thanx for advanced

Share this post


Link to post
Share on other sites

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 :rolleyes: . 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! B)

 

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

Share this post


Link to post
Share on other sites

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}

Share this post


Link to post
Share on other sites