Jump to content

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

NemoPS
 Share

Recommended Posts

compmo Newbie

compmo

Posted
Posted (edited)

Hello Everyone,

Please forgive me if i post in the wrong place but it is the closet topic to what i need to be done. i want to remove the large image 680px by 200px from every subcategories page and at same time keep the subcategories image on (category pages) attached two gif file the first one show my category page witch i wold like to keep it as is and the second image is for my subcategories page i would like to remove the large image marked by green arrow. i've search all css and tpl file withe no success so my question is what cods or div that control this image? any help appreciated.

Best Regards

Edited by compmo (see edit history)
Link to comment
Share on other sites
lannycordola Newbie

lannycordola

Posted
Posted

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

Xcuse me. Where do I put the line class="clearfix" to the containing ul. In which file???? Which path in prestashop could I find it???? Can you please expecificate it a little bit easier???? Thanks a lot..... I'm trying to change grid in subcategories. Can you please tell my a good tutorial for Prestashop 1.5????
Link to comment
Share on other sites
lannycordola Newbie

lannycordola

Posted
Posted (edited)

Well I use your tutorial for changing products to grid. It works without problems. Thanks a lot for it. Now I want to use it in the subcategories. I've try some codes here but I really can't realize it like in the products. Did I have to start like the tutorial for the products or is it another way??? Now I'm looking in my categories in order of 3 rows, but there is not a color, border, etc, but simple the image and the product line. The image inside the frame is also very small. Maybe you can give me a hand please... Thank you very much

 

 

Darius

Edited by lannycordola (see edit history)
Link to comment
Share on other sites
cointech Newbie

cointech

Posted
Posted (edited)

Hi,

I follow the tuto in prestashop 1.5.4 to display the products in grid and I've tried to display the subcategories in grid also but the result was not successful as you can see in the attached picture.

I need your help to display the subcategories in grid in the correct way,

 

category.css:

.inline_list li {

float:left;

/*margin-right: 10px;*/

width:120px;

padding:10px 0;

border-bottom:1px dotted #ccc;

margin-top: 10px;

text-align:center;

}

 

category.tpl:

<!-- Subcategories -->

<div id="subcategories">

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

<ul class="inline_list">

{foreach from=$subcategories item=subcategory}

<li class="clearfix">

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">

{if $subcategory.id_image}

<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{else}

<img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{/if}

</a>

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>

{if $subcategory.description}

<!--<p class="cat_desc">{$subcategory.description}</p>-->

{/if}

</li>

{/foreach}

</ul>

<br class="clear"/>

</div>

 

please help

post-545214-0-65848200-1367015609_thumb.jpg

Edited by cointech (see edit history)
Link to comment
Share on other sites
Kogkalidis Collaborator

Kogkalidis

Posted
Posted

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/gr...prestashop-1-5/

 

Cheers!

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.

 

I tried it, but there is some problem.. The image link has some bug and the image doesn't show.. So I changed it with the default image link and works nice! The rest is like you said! Nice tutorial my friend! Cheers!! :D :D

Link to comment
Share on other sites
  • 2 weeks later...
hideaki Newbie

hideaki

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

 

Awesome tutorial! Copying and pasting the final sources did not work in v1.5.4.1, but manually editing the files following the tutorial made it possible. Also, the product images aren't showing using the code on the tutorial, so just change line 32 to:

 

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

NOTE: THIS IS ONLY APPLICABLE TO v1.5.4.1

Link to comment
Share on other sites
  • 1 month later...
preserver Newbie

preserver

Posted
Posted

I was confused about the line 34 tag, too. I don't know if it has anything to with the problem with the grid I have though.

 

The grid has blanks in spaces 9 and 12. So it looks like this:

****

****

**

****

 

Anyone know how to fix this? Possibly it is to do with the height? That is not my own idea, just speculation from comments on Nemo's tutorial. Has anyone else had this happen and possibly knows how to fix the grid?

Link to comment
Share on other sites
preserver Newbie

preserver

Posted
Posted

Has anyone tried this? There were no comments to go on.

 

I don't know any code, but as I mentioned in my eariler post, the grid I installed from Nemo's tutorial has empty spaces. I don't know how to fix that, but perhaps this alternative method will work. I will post again to say if I got it to work or not.

Link to comment
Share on other sites
preserver Newbie

preserver

Posted
Posted

In the product list.tpl, it asks you to change the line <ul id="product_list" class="list">, but for the default them, the file actually reads <ul id="product_list" class="clear">. I couldn't easily find out if that is a meaningful difference. The other file it says to change, product-sort.tpl doesn't contain the lines the tutorial references.

 

I did try changing class="clear" to class="grid', but the site was still in list format. I did clear the history and refresh the site- does that bring it up to date with present changes to the code? Anyhow, when I changed it back to the original code...

 

I tried leaving a comment saying as much on their site, but it somehow outwitted me. :-/

 

Perhaps the tutorial was written with a different version of Prestashop in mind. I'm using version 1.5.4.1 with the default theme.

 

So going back to Nemo's grid- anyone know how to fix the spaces that appear in the third or fourth line- spaces 9 and 12 or 13 and 17?

 

Thank you!

Link to comment
Share on other sites
shoulders Newbie

shoulders

Posted
Posted

i just copied and pasted the project files from nemo1 site and it worked. i am using ps 1.5.4.0 i think. It also seems to have some of the other suggestions by this thread ie 'reduced price'. I have not tried the category thing yet. what would be helpful if some who has go this working including the category thing and any of the suggestions formt his thred to post their files as 'attachments' rather that copy and pasting (without the code tags).

 

The project files work but i have some posistioning issues for the compare tick box which is at the top and not the bottom.

Link to comment
Share on other sites
JANDSCLOTHINGCO Newbie

JANDSCLOTHINGCO

Posted
Posted (edited)

Works perfectly. Is there a way to incorporate the multiple color choices on the product list via the dropdown box like on the actual product page as well right above the add to cart option? Or even just adding the product description to the search results as well.

 

EDIT: Figured it out. Just copied the product_desc fields from the original product_list.tpl file to the modified grid.tpl to include the short description above the price

Edited by JANDSCLOTHINGCO (see edit history)
Link to comment
Share on other sites
JANDSCLOTHINGCO Newbie

JANDSCLOTHINGCO

Posted
Posted (edited)

Quick question. How would I fix this one page that is displaying the products weird?

 

http://www.jandsclot...prices-drop?p=2

 

This is the ONLY page that is doing this so I don't know what is wrong here.

 

EDIT: Figured out how to fix it. Added a specific height entry to #product_list li in PRODUCT_LIST.CSS

Edited by JANDSCLOTHINGCO (see edit history)
Link to comment
Share on other sites
preserver Newbie

preserver

Posted
Posted

JandS Clothing Co, I can see your grid display looks just fine. Did you have a problem with blanks spaces showing up in the grid?

I ask because I am having that problem and have suspected the height entry is the issue. I do now know code, so I don't want to try changing things (especially if I'm not even in the right area!)

 

Please pass along word about what exactly you changed (if blanks in the grid had been your issue).

 

THANK YOU very much in advance. I have had this issue going for about a month and am not sure how to deal with changing the height.

Link to comment
Share on other sites
JANDSCLOTHINGCO Newbie

JANDSCLOTHINGCO

Posted
Posted (edited)

JandS Clothing Co, I can see your grid display looks just fine. Did you have a problem with blanks spaces showing up in the grid?

I ask because I am having that problem and have suspected the height entry is the issue. I do now know code, so I don't want to try changing things (especially if I'm not even in the right area!)

 

Please pass along word about what exactly you changed (if blanks in the grid had been your issue).

 

THANK YOU very much in advance. I have had this issue going for about a month and am not sure how to deal with changing the height.

 

Yes there was a problem with one image showing up on its own line and leaving blank space.

 

I added a specific height entry to #product_list li in PRODUCT_LIST.CSS it starts on LINE 4

 

#product_list li {
text-align: center;
float: left;
width: 142px;
height: 240px;
padding: 16px;
margin-bottom: 14px;
margin-right: 20px;
background-color: #f9f9f9
}

 

You can change the height value to whatever suits your needs

Edited by JANDSCLOTHINGCO (see edit history)
Link to comment
Share on other sites
  • 1 month later...
ggupta77 Newbie

ggupta77

Posted
Posted

Hi

I have used this code but I'm facing one problem with the code.

 

Whenever the product name comes in two lines, the grid view of the products gets disturbed.

In the next row the products are displayed after the product with names in two lines as shown in the thumbnail.I think the issue is coming due to spacing.

Please check this out and provide a solution

 

Thank in advance.

post-671970-0-23730800-1378449579_thumb.png

Link to comment
Share on other sites
Neapix Newbie

Neapix

Posted
Posted (edited)

Thanks for this tutorial!

 

 

Hi

I have used this code but I'm facing one problem with the code.

 

Whenever the product name comes in two lines, the grid view of the products gets disturbed.

In the next row the products are displayed after the product with names in two lines as shown in the thumbnail.I think the issue is coming due to spacing.

Please check this out and provide a solution

 

Thank in advance.

 

Have the same problem + my grid showes only 2 products in a row, not 4. how can I change that?

 

There is one more issue - In case your title is too big, how can you change the title width section?

Edited by Neapix (see edit history)
Link to comment
Share on other sites
  • 1 month later...
sehgalanurag Newbie

sehgalanurag

Posted
Posted (edited)

Hi Everyone,

 

First of all Thanks Nemo for publishing this wonderful tutorial, I successfully converted the the product list on my website to Grid view the way I wanted. 

 

Everything is fine except for a minor glitch, whenever a product is added to the cart, the first image on the page flies off towards the cart no matter which product is added, it should be like only that product's image should fly off, although every time a product is added to the cart, the right 'product' goes into the cart, it is just the wrong image. 

 

How can I fix it? I could not find any solution to this problem anywhere. This is the first time I have ever created a website, thanks to Prestashop and its wonderful community.

 

Regards.

 

 

I am using version 1.5.5.

Edited by sehgalanurag (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
BJng Newbie

BJng

Posted
Posted

Hi Nemo,
thanks for tutorial but I need a little help!
 
I'm trying to convert from list to grid using this tutorial in ps 1.4.7 with a different template (Sa Plume by Studio Equilon).

 

This is my product-list.tpl:

 

{*
* 2007-2011 PrestaShop 
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2011 PrestaShop SA
*  @version  Release: $Revision: 1.4 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
 
{if isset($products)}
<!-- Products list -->
<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.iteration%2 == 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')}" 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:100:'...':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}
<!--Inizio pezzo modificato-->
{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
{l s='Listino: '}<span class="price-discount">{displayWtPrice p=$product.price_without_reduction}</span><br>{/if}
{* fine aggiunta *}
{if ((isset($product.on_sale) && $product.on_sale) || (isset($product.reduction) && $product.reduction)) && $product.price_without_reduction > $product.price && $product.show_price AND !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
{if $product.specific_prices.reduction_type == 'amount'} Risparmi <span style="color:#598559; font-weight:bold;">
{$product.specific_prices.reduction|string_format:"%.2f"}</span><span class="prezzo_originale"><br/>
<!--{convertPrice price=$product.price_without_reduction}-->
</span>
{/if}
{if $product.specific_prices.reduction_type == 'percentage'}Risparmi il
<span style="color:#790003; font-weight:bold; font-size:12px;">{$product.specific_prices.reduction*100} % </span><span class="prezzo_originale"><br/>
{/if}
{if $product.price >= 200}Spedizione Gratuita{/if}
</span>{else}
{if $product.price >= 200}Spedizione Gratuita{/if}
{/if}
<!--Fine pezzo modificato-->
{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}
 
 
 
 
</div>
</li>
{/foreach}
</ul>
<!-- /Products list -->
{/if}
 
 
This is my product-list.css:
 
/* product-list.tpl */
ul#product_list {
list-style-type: none;
padding: 0px;
}
 
#product_list li {
text-align: left;
float: left;
width: 245px;
padding: 15px;
margin: 40px 0px 0px 0px;
/*padding: 15px 0px 0px 0px;*/
/*margin-bottom: 10px;*/
/*margin-right: 0px;*/
/*background-color: #f9f9f9*/
background: #fff url('../img/sfondo_img.jpg') no-repeat top left;
 
}
#product_list li.last_row_item {margin-right: 0;}
 
 
* html ul#product_list li {
height: auto !important;
height: 130px
}
ul#product_list li a {
text-decoration: none;
color: #595A5E;
}
 
 
ul#product_list a.product_img_link {
 
}
 
ul#product_list a.product_img_link img {
vertical-align: bottom;
border: solid 5px #efefef;
 
-moz-box-shadow: 0px 0px 5px #999;  
-webkit-box-shadow: 0px 0px 5px #999;
box-shadow: 0px 0px 5px #999;
 
display: block;
margin-right: 20px;
margin-bottom: 5px;
/*margin: 0 auto;*/
float:left;
}
 
ul#product_list li h3 {
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size: 18px;
font-weight:normal;
margin: 0px 0 2px 0;
}
 
ul#product_list li .new {
background: transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
/*border: 1px solid #488C40;*/
color: white;
font-size: 0.6em;
font-weight: bold;
margin: 0 1em 0 0;
padding: 0 0.4em;
text-transform: uppercase;
vertical-align: 0.3em
}
ul#product_list li p.product_desc {
margin-bottom: 20px;
font-size: 0.92em
}
ul#product_list li div.center_block {
/*float: left;
width: 74%*/
}
ul#product_list li div.right_block {
float: left;
width: 11em;
text-align: left;
margin-top: 0
}
ul#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
display: block
}
ul#product_list li .reduction {
display: block;
margin-bottom: 0.3em
}
ul#product_list li .price {
display: block;
font-size: 1.5em;
margin-bottom: 0.2em
}
ul#product_list li span.availability {
color: #aaa;
font-size: 0.9em
}
ul#product_list li a.button { margin-top: 0.5em }
ul#product_list li p.compare input { vertical-align: text-bottom }
 

And this is the problem that I get:

every few products I get a blank...

 

shot-2013-10-25_10-21-04.jpg

 

What can be? 

Thanks in advance

 

Stefano

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted 
#product_list li {
display: inline-block;
text-align: left;
width: 250px;
padding: 15px;
margin: 40px 0px 0px 0px;
padding: 15px 0px 0px 0px;
margin-bottom: 10px;
margin-right: 0px;
background-color: #f9f9f9;
background: #fff url('../img/sfondo_img.jpg') no-repeat top left;
}

use these styles in product_list.css

Link to comment
Share on other sites
BJng Newbie

BJng

Posted
Posted

Thanks Vekia! It's seem almost to work!

 

I used

 

#product_list li {
display: inline-block;
text-align: left;
width: 250px;
padding: 15px;
margin: 40px 0px 0px 0px;
padding: 15px 0px 0px 0px;
margin-bottom: 10px;
margin-right: 0px;
/*background-color: #f9f9f9;*/
/*background: #fff url('../img/sfondo_img.jpg') no-repeat top left;*/
}
 
because I do not want any background color or image
There is still a little problem with the layout... 
 
What do I have to modify, padding or margin?
 
Thank again
Stefano
Link to comment
Share on other sites
BJng Newbie

BJng

Posted
Posted

Hi Vekia! :-) Now is ok

 

#product_list li {
display: inline-block;
text-align: left;
width: 250px;
padding: 15px;
margin: 40px 0px 0px 0px;
padding: 20px 20px 0px 0px;
margin-bottom: 10px;
margin-right: 0px;
/*background-color: #f9f9f9;*/
/*background: #fff url('../img/sfondo_img.jpg') no-repeat top left;*/
}
 
Thanks again!
Ciao
Stefano
Link to comment
Share on other sites
  • 1 month later...
ck-iridium Newbie

ck-iridium

Posted
Posted

Hi Nemo,

thanks for tutorial but I need a little help!

 

I'm trying to convert from list to grid using this tutorial in ps 1.4.7 with a different template (Sa Plume by Studio Equilon).

 

This is my product-list.tpl:

 

{*
* 2007-2011 PrestaShop 
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2011 PrestaShop SA
*  @version  Release: $Revision: 1.4 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
 
{if isset($products)}
<!-- Products list -->
<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.iteration%2 == 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')}" 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:100:'...':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}
<!--Inizio pezzo modificato-->
{if isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
{l s='Listino: '}<span class="price-discount">{displayWtPrice p=$product.price_without_reduction}</span><br>{/if}
{* fine aggiunta *}
{if ((isset($product.on_sale) && $product.on_sale) || (isset($product.reduction) && $product.reduction)) && $product.price_without_reduction > $product.price && $product.show_price AND !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
{if $product.specific_prices.reduction_type == 'amount'} Risparmi <span style="color:#598559; font-weight:bold;">
{$product.specific_prices.reduction|string_format:"%.2f"}</span><span class="prezzo_originale"><br/>
<!--{convertPrice price=$product.price_without_reduction}-->
</span>
{/if}
{if $product.specific_prices.reduction_type == 'percentage'}Risparmi il
<span style="color:#790003; font-weight:bold; font-size:12px;">{$product.specific_prices.reduction*100} % </span><span class="prezzo_originale"><br/>
{/if}
{if $product.price >= 200}Spedizione Gratuita{/if}
</span>{else}
{if $product.price >= 200}Spedizione Gratuita{/if}
{/if}
<!--Fine pezzo modificato-->
{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}
 
 
 
 
</div>
</li>
{/foreach}
</ul>
<!-- /Products list -->
{/if}
 
 
This is my product-list.css:
 
/* product-list.tpl */
ul#product_list {
list-style-type: none;
padding: 0px;
}
 
#product_list li {
text-align: left;
float: left;
width: 245px;
padding: 15px;
margin: 40px 0px 0px 0px;
/*padding: 15px 0px 0px 0px;*/
/*margin-bottom: 10px;*/
/*margin-right: 0px;*/
/*background-color: #f9f9f9*/
background: #fff url('../img/sfondo_img.jpg') no-repeat top left;
 
}
#product_list li.last_row_item {margin-right: 0;}
 
 
* html ul#product_list li {
height: auto !important;
height: 130px
}
ul#product_list li a {
text-decoration: none;
color: #595A5E;
}
 
 
ul#product_list a.product_img_link {
 
}
 
ul#product_list a.product_img_link img {
vertical-align: bottom;
border: solid 5px #efefef;
 
-moz-box-shadow: 0px 0px 5px #999;  
-webkit-box-shadow: 0px 0px 5px #999;
box-shadow: 0px 0px 5px #999;
 
display: block;
margin-right: 20px;
margin-bottom: 5px;
/*margin: 0 auto;*/
float:left;
}
 
ul#product_list li h3 {
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size: 18px;
font-weight:normal;
margin: 0px 0 2px 0;
}
 
ul#product_list li .new {
background: transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
/*border: 1px solid #488C40;*/
color: white;
font-size: 0.6em;
font-weight: bold;
margin: 0 1em 0 0;
padding: 0 0.4em;
text-transform: uppercase;
vertical-align: 0.3em
}
ul#product_list li p.product_desc {
margin-bottom: 20px;
font-size: 0.92em
}
ul#product_list li div.center_block {
/*float: left;
width: 74%*/
}
ul#product_list li div.right_block {
float: left;
width: 11em;
text-align: left;
margin-top: 0
}
ul#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
display: block
}
ul#product_list li .reduction {
display: block;
margin-bottom: 0.3em
}
ul#product_list li .price {
display: block;
font-size: 1.5em;
margin-bottom: 0.2em
}
ul#product_list li span.availability {
color: #aaa;
font-size: 0.9em
}
ul#product_list li a.button { margin-top: 0.5em }
ul#product_list li p.compare input { vertical-align: text-bottom }
 

And this is the problem that I get:

every few products I get a blank...

 

shot-2013-10-25_10-21-04.jpg

 

What can be? 

Thanks in advance

 

Stefano

 

This is cause ur showing 3 items per row,

 

u need to show 2 items x row in ur case.

 

Hugs!

Link to comment
Share on other sites
  • 1 month later...
Yanoura Newbie

Yanoura

Posted
Posted (edited)

Hi people,

 

First, thanks Nemo for the tutorial, really easy for noobs like me.

 

Then I used it and instead of left column, I removed right column and put center "grid_7 omega"

It works except the product name:

-in some cases the name is displayed under the image but too close

-in the other cases the name is split in 2 with one part next to the image and the other part under the image.

see examples here: http://www.modeandyou.com/fr/9-pret-a-porter-accessoires-mode  http://www.modeandyou.com/fr/5-pret-a-porter-tops--tuniques 

 

My product list css goes like that:

 

ul#product_list {
list-style-type: none
}
 
#product_list li {
display:inline;
text-align: left;
float: left;
width: 190px;
height:240px;
padding: 20px;
margin-bottom: 14px;
margin-right: 10px;
background-color: #f9f9f9
 
I changed padding and margin but nothing good.
Could someone help me fix that?
 
Thanks
 
PS: I am on PS 1.5.6.1 and would like to achieve a 3 columns grid
Edited by Yanoura (see edit history)
Link to comment
Share on other sites
Yanoura Newbie

Yanoura

Posted
Posted

 

Hi people,

 

First, thanks Nemo for the tutorial, really easy for noobs like me.

 

Then I used it and instead of left column, I removed right column and put center "grid_7 omega"

It works except the product name:

-in some cases the name is displayed under the image but too close

-in the other cases the name is split in 2 with one part next to the image and the other part under the image.

see examples here: http://www.modeandyou.com/fr/9-pret-a-porter-accessoires-mode  http://www.modeandyou.com/fr/5-pret-a-porter-tops--tuniques

 

My product list css goes like that:

 

ul#product_list {
list-style-type: none
}
 
#product_list li {
display:inline;
text-align: left;
float: left;
width: 190px;
height:240px;
padding: 20px;
margin-bottom: 14px;
margin-right: 10px;
background-color: #f9f9f9
 
I changed padding and margin but nothing good.
Could someone help me fix that?
 
Thanks
 
PS: I am on PS 1.5.6.1 and would like to achieve a 3 columns grid

 

 

Nevermind, it's fixed:

I added <p class="clearfix"></p> above the product name in productlist.tpl

Link to comment
Share on other sites
  • 1 month later...
  • 3 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...