Grid view instead of list view

[hlubach]

In search of Shopping software i see some Oscommerce programs all those programs had a feature to change the looks of the article shown in a grid view instead of a list .
Searching to the forum of Prestashop i noticed that there is a lot written about it but no real solution.
I find that strange is it so difficult to make such a module.
I walk into this problem with selling bulbs i have not enough of 1 page i need more much more. so for the custumors it is a long walk trough al the pages to find a special product.
So it looks better tha 4 x5 grid with smaller pictures and only a name is much nicer to face then a lonh list an again and agai.
Hope that someone can create such a module now further ith evaluating

[rocky]

PrestaShop doesn't have any hooks on the product listings page, so you can't create a module you can simply install. You'd have to modify PrestaShop to add a hook on the product listings page. It is easiest to just to modify global.css to display products in a grid.

[dixie]

I would also like to display my products in a grid, but don't know how to code. Is there sample code that I can copy, then paste into my css theme? Thank you.

[scottyboy]

I think this might be a solution although it wont display a description and is in a grid of three products per row : http://www.freeprestashopmodules.com/2009/06/30/change-sub-categories-to-grid-view/

If anyone does have a better solution to this could you please post some code for the rest of us.

Thanks.

[h4r15]

Thanks for the link, i will use it for my shop

[KillDa]

download link, not working, have anybody diferent link?

thank you very much

[perusi]

any new link for PS 1.4 version for the GRID VIEW ???

[rocky]

Just copy the code over from modules/homefeatured/homefeatured.tpl to product-list.tpl in your theme's directory, then remove all the mod='homefeatured' and the

line.

[perusi]

I`ve done that, but now no products are displayed (

I`m using the Prestashop_ALT theme... maybe is there another way?!....

thanks again

[rocky]

You must have done something wrong. It worked fine when I did it with the PrestaShop Alternative theme for Evicinhersey. I'll attach the product-list.tpl file in case it helps, though I have modified the format of the products compared to the default theme.

product-list.zip

[mysunflowerseed]

i love rocky even more now

[nigelvit]

Hi Guys

Rocky is right that you can use the code from homefeatured.tpl, I've just done this for v1.3.2 and works fine. Just remove

line and all instances of "mod='homefeatured'" and you're done.....

[nigelvit]

Actually ie9 (and probably earlier therefore) gives an issue, it doesn't like

height="{$homeSize.height}" width="{$homeSize.width}"

in the image tags (I assume because these are not defined so sets to 0?). Will not show images unless you remove these......

Nigel

[Rodolfo]

Hello, I tried rocky's answer, but I obtain all the products y one column, not 4 by row.

Do you know what I have to change?

RODOLFO

[nigelvit]

Hi,

can't say, worked fine for me. I can attach my version if that might help?

Nigel

[Rodolfo]

Yes please...I do not know where to cut or not¡¡¡

Thanks a lot
RODOLFO

[Rodolfo]

Well thank you very much, but now it is working,before I cut too much...

I put here what it worked for me...


<!-- MODULE Home Featured Products -->

{if isset($products) AND $products}

{assign var='liHeight' value=360}
{assign var='nbItemsPerLine' value=4}
{assign var='nbLi' value=$products|@count}
{assign var='nbLines' value=$nbLi/$nbItemsPerLine|ceil}
{assign var='ulHeight' value=$nbLines*$liHeight}

• 
  {foreach from=$products item=product name=homeFeaturedProducts}
  
• 
  

  {$product.name|truncate:27:'...'|escape:'htmlall':'UTF-8'}

  
  

  {$product.description_short|strip_tags|truncate:130:'...'}

  
  getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.legend|escape:htmlall:'UTF-8'}" />
  
  
  {if !$priceDisplay || $priceDisplay == 2}

  {convertPrice price=$product.price}{if $priceDisplay == 2} {l s='+Tx' mod='homefeatured'}{/if}

  {/if}
  {if $priceDisplay}

  {convertPrice price=$product.price_tax_exc}{if $priceDisplay == 2} {l s='-Tx' mod='homefeatured'}{/if}

  {/if}
  {l s='View' mod='homefeatured'}
  {if ($product.quantity > 0 OR $product.allow_oosp) AND $product.customizable != 2}
  {l s='Add to cart' mod='homefeatured'}
  {else}
  {l s='Add to cart' mod='homefeatured'}
  {/if}
  
  
  
  {/foreach}
  

{else}

{l s='No featured products' mod='homefeatured'}

{/if}

<!-- /MODULE Home Featured Products -->



Before, I deleted second line...

And now I did not.

Now it is working

Thank you, thank rocky, and this forum¡¡¡

RODOLFO

[chance]

You must have done something wrong. It worked fine when I did it with the PrestaShop Alternative theme for Evicinhersey. I'll attach the product-list.tpl file in case it helps, though I have modified the format of the products compared to the default theme.

hi rocky, i have download ur file and replace with mine, but the result 1 item in each row, and no add to cart button display pls find the attachment pic as the result show.

 

pls help for it, any thing i need to change on the coding?

thanks alot

[Xenocide]

It's possible

 

http://xenocide.info/dev/photoimaging/prestashop/category.php?id_category=6

 

Steal the CSS From that if you want .

[chance]

It's possible

 

http://xenocide.info/dev/photoimaging/prestashop/category.php?id_category=6

 

Steal the CSS From that if you want .

hi

thanks for ur reply, but how to i steal it? need a guide pls

[platnumcn]

Thanks rocky, you are great.

[chance]

You must have done something wrong. It worked fine when I did it with the PrestaShop Alternative theme for Evicinhersey. I'll attach the product-list.tpl file in case it helps, though I have modified the format of the products compared to the default theme.

hi rocky, i have download ur file and replace with mine, but the result 1 item in each row, and no add to cart button display pls find the attachment pic as the result show.

 

pls help for it, any thing i need to change on the coding?

thanks alot

any body can help?

still look for the solution

thanks

[jhnstcks]

You need to add a float code in your css somewhere to make the products list horizontal instead of vertical