Jump to content

Change sub-category view to Grids instead of List v1.4

jhnstcks
 Share

Recommended Posts

jhnstcks Newbie

jhnstcks

Posted
Posted

Instructions to change sub-categories layout to grid view rather than list view.

Upload both the files to your folders, product-list.tpl should be in root/themes/yourtheme/ and product-list.css should be in root/themes/yourtheme/css/

If you want the view button to be displayed on your site edit the product-list.tpl and uncomment line 56. (delete {* and *} from the begining and end of the line).

If you don't want the short description displayed edit the product-list.css and uncomment line 49. (delete the /* and */)

Please make sure to force compile and disable cache on your preferences > performance tab before uploading the files, otherwise the changes will not be displayed.

This alteration is based on the default v1.4 prestashop theme, so you may need to alter the colours. Please note this is not compatible with the new Prestashop default theme from v1.4.6.

If someone would like to test it on their installation and give some feedback.

Thanks

product_list_grid_view.zip

41293_G9530T7k8D4IkTACtnby_t

  • Like 11
Link to comment
Share on other sites
  • 2 weeks later...
htech Newbie

htech

Posted
Posted

thanks man! looking very cool!

have noticed on my custom theme that i need to do some css configs, but the concept is there :) :) :)
not sure why it isnt picking up on the search results, let me know if u got any ideas about the search results :)

thanks man

Link to comment
Share on other sites
mint^^ Newbie

mint^^

Posted
Posted

hey, thanks for ur help.
i have 2 questions
1\
how to delete the "add to cart button" ?

i delete the code in product-list.tpl

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'}
                   {else}
{l s='mint come'}



and then refresh the page, but there is still the button"add to cart"
i donno how to do with it.

2\ about how to delete the decriptions on index page,
the featured products, how to delete the descriptions ?

i tried to delete this code in prestashop/modules/homefeatured/homfeatured.tpl



and then save, refresh the page, but , there still is "products description" , i donno why.

please help me.

{$product.description_short|strip_tags|truncate:130:'...'}
getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />
Link to comment
Share on other sites
maildemon Newbie

maildemon

Posted
Posted
Hi thanks. but i encounter a few problem. I am very new to create a website.

How to make all short description in place?
And my compare button move up and not in place. please help me with it thanks.



I have the same problem. Can anyone help me? Thanks a lot.

M.

EDIT: You have to change p.product_desc in product-list.css
Link to comment
Share on other sites
mint^^ Newbie

mint^^

Posted
Posted

thanks,

i tried, the previous next button is ok now, but compare is still up up
how to do with "compare"button ?

i tried to add "clear" at product-list.tpl

in front of 

<input type="checkbox"> {l s='Select to compare'}



but it doesn't work,

how to get compare button down ?

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

kenza750

Posted
Posted

Tried this on my PS 1.3.7 installation, but doesn't work.
My category-page is still in list mode; the only difference I noticed was a missing In Cart-button.

maybe something went wrong, I'll try again tonight when I'm at home.

Link to comment
Share on other sites
kenza750 Newbie

kenza750

Posted
Posted

I noticed that on my installation of PS 1.3.7, there is no product_list.css in the ../themes/mytheme/css folder. CSS of product-list.tpl is part of ../themes/mytheme/css/global.css.

should I replace the code of product_list.css into the /* product-list.tpl */ -section of global.css?

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

Rayan

Posted
Posted

I installed this and it's working perfectly fine. However, I am experiencing many difficulties in setting the css file. I want to make a few modifications listed below:-

I want to display short-description instead of long description which is been displayed currently.

I've attached the image of how my website looks right now. It's all messed up.
Product descriptions are marked in RED.

Please note:- I already tried editing the 49th line of my product_list.css

THis is how it looks currently

ul#product_list li p.product_desc { 
   margin-bottom: 0;
   display:none;
   height:220px;
   text-align: justify;
   font-size: 0.92em

49093_PvX3FRITj6YggjVh7Ty0_t

Link to comment
Share on other sites
Rayan Newbie

Rayan

Posted
Posted
Instructions to change sub-categories layout to grid view rather than list view.

Upload both the files to your folders, product-list.tpl should be in root/themes/yourtheme/ and product-list.css should be in root/themes/yourtheme/css/

If you want the view button to be displayed on your site edit the product-list.tpl and uncomment line 56. (delete {* and *} from the begining and end of the line).
If you don't want the short description displayed edit the product-list.css and uncomment line 49. (delete the /* and */)

This alteration is based on the default prestashop theme, so you may need to alter the colours.

If someone would like to test it on their installation and give some feedback.

Thanks


I want to display short description but it always displays the larget description. What shall I do ?
Link to comment
Share on other sites
BobPour Newbie

BobPour

Posted
Posted

Thanks for the mod, mostly works as I wanted it.
My only problem is that “Sort By” option under category page not working anymore! (No biggy in my case, I end up removing the sort option all together)
Anybody else having this problem?

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

jhnstcks

Posted
  • Author
Posted

Thanks for this wonderfull files / modification. I however is stuck @ the name and description laying on top of eachother.... :S See: http://www.blingskal...tter-bling-skal

 

edit: Seems to be fixed now, don't know what I did though ... :S Anyhow, now I don't get were I'm supposed to change the code for the short desc option.

I expect that as a cache issue.

 

As for the description, line 37 currently reads 

<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|truncate:460:'...'|strip_tags:'UTF-8'|escape:'htmlall':'UTF-8'}">{$product.description|truncate:150:'...'|strip_tags:'UTF-8'}</a></p>

 

change it to

 

<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|truncate:460:'...'|strip_tags:'UTF-8'|escape:'htmlall':'UTF-8'}">{$product.description_short|truncate:150:'...'|strip_tags:'UTF-8'}</a></p>

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

jolvil

Posted
Posted

I just remove second compare include in category.tpl and it's ok

 

 

{include file="$tpl_dir./product-compare.tpl"}
{include file="$tpl_dir./product-sort.tpl"}
{include file="$tpl_dir./product-list.tpl" products=$products}
{* {include file="$tpl_dir./product-compare.tpl"} *}
{include file="$tpl_dir./pagination.tpl"}

  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
Mehdi72 Newbie

Mehdi72

Posted
Posted

This alteration is based on the default prestashop theme, so you may need to alter the colours.

If someone would like to test it on their installation and give some feedback.

Thanks

 

Hi

 

The price bleeds over the product name and the compare button is not aligned correctly. How do I fix this?

post-302158-0-38781900-1322069913_thumb.jpg

Link to comment
Share on other sites
SpoiledK Newbie

SpoiledK

Posted
Posted (edited)

I'm having a really hard time with this mod. I've install a fresh copy of the latest version v1.4.6.1. Then I tried to apply this mod without success. I'm getting the same issue as Mehdi72 screen shot. I'm having a hard time modifying the "product-list.tpl" file.

 

I've deleted and changed everything in the file, but when I refresh the website, nothing changed. The only time the website change is when I delete the whole file, then nothing show up.

 

I'm new to PrestaShop, I hope someone can help.

 

 

EDIT:

After some more searching, found out that I have to turn on "Force Compile" to be able to see the changes...

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

jhnstcks

Posted
  • Author
Posted

 

Hi

 

The price bleeds over the product name and the compare button is not aligned correctly. How do I fix this?

 

Did you force compile and disable cache? Otherwise changes will not be displayed immediately. The product title should be above the image and not below it.

  • Like 1
Link to comment
Share on other sites
Mehdi72 Newbie

Mehdi72

Posted
Posted

 

Did you force compile and disable cache? Otherwise changes will not be displayed immediately. The product title should be above the image and not below it.

 

Thanks. I've done as you suggested just a small issue now, the alignment of the compare box.

post-302158-0-46829900-1322147522_thumb.jpg

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

rturner

Posted
Posted

Thank you for the great script! It worked perfectly first time. I do have one minor issue that I haven't found anyone else with. In Internet Explorer, the grid works perfectly and I can click on the thumbnails to see the product. In Firefox I can click on the stock number or description to see the product but not the thumbnail itself. Maybe it's my Firefox settings? Thx.

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

benknackan

Posted
Posted

I have a little problem I can't figure out, I copied the product-list file and renamed it homefeatured for the homefeatured module. Sofor so good no problem and looking fine, however the text for availabilty and add to cart defaults to english even though my shop is in swedish. How do i fix that ?

Link to comment
Share on other sites
Aldeag Community Regular

Aldeag

Posted
Posted

I have a little problem I can't figure out, I copied the product-list file and renamed it homefeatured for the homefeatured module. Sofor so good no problem and looking fine, however the text for availabilty and add to cart defaults to english even though my shop is in swedish. How do i fix that ?

 

You should go to Translations in the back office

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

saif421

Posted
Posted

Thanx for the nice modification.

1) I need the same editing on featured products how can i have it(default featured product not displaying add to cart)?

2) I want to resize length by removing empty gap between price and picture how to do that?

Link to comment
Share on other sites
dawnflights Newbie

dawnflights

Posted
Posted

Hello,

I am a new member and just recently started working with prestashop. I have no knowledge of how to write all of the different codes to change things.

I am using prestashop 1.4.6.2 default templete and I would like to change the product list formatt to a grid view. Is there a simple easy way for me to do this?

 

Also, I have a really stupid question. I am currently adding products to my catalog and I just about have my first page filled, how can you add additional pages to the same category?

 

Can someone please help me?

Link to comment
Share on other sites
jhnstcks Newbie

jhnstcks

Posted
  • Author
Posted

@saif421 you should contact @benknackan as I have helped him with his translation problem and he might be willing to share his conversion to the homefeatured module.

 

@dawnflightsIts very easy to change your product list to grid view, just download the files that are in my first post and follow the instructions in the read me file.

 

You can have as many categories as you need/want they will overflow into the next page. You can change the filters on that page to show more categories.

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

haki

Posted
Posted

Bonsoir

 

j ai une question j aimerais mettre par defaut l affichage en grille es ce possible ? et que dois je faire dans le code car je suis vraiment perdu ?

 

2ieme question et ensuite enlever l icon en haut a gauche pour selectionner l affichage comme ca j insiste les gens a utiliser l affichage en grille merci de m aiderpost-287809-0-02247400-1332543405_thumb.jpg

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

lape

Posted
Posted

How do i remove the lines around the picture? the 2 square boxes around the picture + how do i align the picture?, it's too much to the right at the moment

also how do i remove the add to cart button and the compare stuff

 

i only want it to show the title the picture and the price

post-81109-0-96666200-1334841280_thumb.png

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

otexito

Posted
Posted (edited)

How do i remove the lines around the picture? the 2 square boxes around the picture + how do i align the picture?, it's too much to the right at the moment

also how do i remove the add to cart button and the compare stuff

 

i only want it to show the title the picture and the price

 

Picture alignment:

Go to product-list.css and find ul#product_list a.product_img_link {

 

...then change float and margins according to your pictures size.

 

Don't forget force compiling and cache disabling to view the changes applied.

 

Remove View:

Go to pruduct-list.tpl and Delete this line...

<a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>

 

Remove the Compare checkboxes:

Go to pruduct-list.tpl and Delete all this...

{if isset($comparator_max_item) && $comparator_max_item}

<p class="compare"><input type="checkbox" onclick="checkForComparison({$comparator_max_item})" class="comparator" id="comparator_item_{$product.id_product}" value="{$product.id_product}" /> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p>

{/if}

 

Remove the Add to cart button:

Go to product-list.css and Delete all this...

ul#product_list li a.button { margin-top: 0.5em }

 

input.exclusive, input.exclusive_disabled, a.exclusive, span.exclusive { margin-top:6px; background-image: url('../img/button-medium_exclusive.png') }

div.pagination {clear:both; padding: 1em 0 }

 

Remove the Compare buttons:

Go to Category.tpl and Find twice... include file="$tpl_dir./product-compare.tpl"

...then change it to... {* include file="$tpl_dir./product-compare.tpl" *}

 

 

And that is all :)

Edited by otexito (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
zandrauppzala Newbie

zandrauppzala

Posted
Posted

Hi,

I'm using this and it works great in 1.4.2.8 (default theme), except for one small issue. When in the home screen the cart and check out buttons are aligned, however as soon as one clicks into a category, the buttons become unaligned. The check out button is slighly lower than the cart button. Any idea why that is?

Link to comment
Share on other sites
DK-Peter Newbie

DK-Peter

Posted
Posted

This is a great hack - I've used it for a while (with a custom theme in 1.4.7)

Does anyone know where to chance from 10 to 12 products per page?

Currently 10 products are shown per page. In my case that gives 3 rows of 3 products and 1 row of 1 product. I would like to display 12 products, as that will show 'a full page' and thus better lead the customer to click on the following pages to see more products.

Thanks a lot in advance!

Link to comment
Share on other sites
DK-Peter Newbie

DK-Peter

Posted
Posted

This is a great hack - I've used it for a while (with a custom theme in 1.4.7)

Does anyone know where to chance from 10 to 12 products per page?

Currently 10 products are shown per page. In my case that gives 3 rows of 3 products and 1 row of 1 product. I would like to display 12 products, as that will show 'a full page' and thus better lead the customer to click on the following pages to see more products.

Thanks a lot in advance!

Anyone? Please?

Link to comment
Share on other sites
  • 1 month later...
  • 4 weeks later...
jhnstcks Newbie

jhnstcks

Posted
  • Author
Posted

I have prolem, I can not see button "View" How can I move a litle bit up?

 

You need to change the height value of the box, in the css file.

 

 

how to edit size ? I want to make it smaller for 6 product in row

 

Just change the width value

Link to comment
Share on other sites
  • 4 weeks later...
jhnstcks Newbie

jhnstcks

Posted
  • Author
Posted

please help i just installed it but cant find it on my list of installed modules where will it be ? even when i type the name in it doesnt show up im using prestashop verson 1.4.8.2 is there away of getting it to work please help

 

Its not a module, its a template change

Link to comment
Share on other sites
n1912 Newbie

n1912

Posted
Posted

Hi jhnstcks!

 

I've been looking around for a solution like this and this one seems to be perfect. I tried it with this theme - http://themes.presta.../template15/en/ and it gets a bit cluttered. I've removed left and right columns in my store so this one would fit perfectly...

 

Is there a (kind of) quick coding solution to implement it into this theme. I've been trying to change the values in both files but I always get stuck somewhere.

 

Thanks a lot!

post-42042-0-26943700-1347131990_thumb.jpg

Link to comment
Share on other sites
digisli Newbie

digisli

Posted
Posted (edited)

It works on Mac with safari 6.0 with PS 1.4.9.0. PC works with IE, Google Crome and FireFox

 

But how can i make it works with Firefox? The original default theme showed in firefox as a list, and not as a grid.

So only on the mac firefox shows wrong?? How can i resolved it?

Edit: Works now need to clean cache.

 

How let the client choose between grid or list view? Is it possible to make a button for it?

 

 

thx

Edited by digisli (see edit history)
Link to comment
Share on other sites
  • 1 month later...
  • 2 weeks later...
zZet Newbie

zZet

Posted
Posted

this is what happened with my site.

any idea how to make the bottom bar stays and the bottom ?

 

and off course, make the bar (with the compare, sort, and amount of product per page item) stay at the bottom doesn't mean removing it :)

post-365673-0-37981400-1352369707_thumb.jpg

Link to comment
Share on other sites
  • 1 month later...
  • 5 months later...
digitalcrate Newbie

digitalcrate

Posted
Posted

Thanks for the mod, mostly works as I wanted it.

My only problem is that “Sort By” option under category page not working anymore! (No biggy in my case, I end up removing the sort option all together)

Anybody else having this problem?

 

I'll second this, I have just carried out the mods with Force Compile switched off etc and with a few minor css issues it all works great as you can see here www.replacement-handles.co.uk but the "Sort by" function no longer works???

 

I would appreciate some thought on how to fix this if possible pleaase

Link to comment
Share on other sites

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