Jump to content
NemoPS

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

Recommended Posts

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)

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

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

hey guys same i want to do this for right column plz help want are the chnages i need to do in this code

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

hello, I have a problem,

 

my products grid works with safari and explorer but its not working for firefox

 

Do you know why firefox keeps showing products as list?

 

Thank you

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Could anyone help me with one thing -> How to have the two prices (if there's any reduction) displayed? Like on the specials block?

So for example:

€179.00 €143.20

rather then just the final price

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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 license@prestashop.com 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 <contact@prestashop.com>
*  @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

Share this post


Link to post
Share on other sites

No one :-(

 

your website is online? if so please share url (im asking because on screen i see localhost only)

Share this post


Link to post
Share on other sites
#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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

There is still a little problem with the layout... 
 
What do I have to modify, padding or margin?
 
Thank again
Stefano

 

 

what kind of problems? i don't see any right now

Share this post


Link to post
Share on other sites

Thanks, I modified a little bit the paddings and now It's perfect :-)

Ciao

Share this post


Link to post
Share on other sites

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 license@prestashop.com 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 <contact@prestashop.com>
*  @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!

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

Any solution for list\grid view switcher compatbile with layeredblock ? Vekia solution is great but incompatbile. Werehouse premium template have list\grid switcher working with blocklayered :)

Share this post


Link to post
Share on other sites

hello kiss

it's because i changed id="" of product list

instead of changing id="" i should use class="" to define styles

i will modify guide then

Share this post


Link to post
Share on other sites

Is there a way to change to a grid view by default in 1.6, so when user first comes to the shop, all products are shown in grid view when inside a category. I feel like there should be an option for it, but I can't find it.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More