[How To] Grid-List view buttons on product list

[kingsinnersoul]

Hello,

I am using Prestashop 1.5.4.1 (default theme) and wanted to add two buttons to be able to switch from grid to list view. The following is a description of how I have done it:

 

After struggeling with few bugs in the original post, I chose to change it entirely and I am posting my entire categories and product-list files. You might gonna need button images, but I am sure you can handle it.

 

Make a backup of your theme and files. Or just do a backup of the files I am providing here.

 

In the categories and product compare tpl files add

{include file="./grid_list_view_buttons.tpl"}

where ever you want have the button.

 

The attachment has 5 files.

Put the *.css files in the theme/css folder.

The tpl files in the theme folder itself.

Add the image file to the theme/img folder.

 

Good luck.

gris_list.zip

Edited June 25, 2013 by kingsinnersoul (see edit history)

[Presta1.5.4.1Newbies]

It is compatible with 2 column theme only, isn' it? Will it automatically work with default mobile theme?

[kingsinnersoul]

It should. The reason I mentioned that it was for a two column theme was because in the global.css file I specify the width of the center_column as 735px !important (line 2123 or so) and that overrides the original width of 535px (line 47 or so). I actually changed my last css and moved it from global.css to product-list.css. Attached here are the new files with the new product-list.css file. The css file has the original css code from ps 1.5.4.1 from the default theme. and I added the css for the grid view. In this css you can find the width of each item to be 167px (line 173 or so). Modify this width so you will have as many items as you need in your column. 167px is a good fit for 4 items per row for a 735px column. So feel free to ignore the global.css file in the original post.

 

As for the mobile theme, I have not tested and cannot tell you if it does or doesnt. Feel free to test and let me, and the community know.

 

Thanks

Edited June 25, 2013 by kingsinnersoul (see edit history)

[kingsinnersoul]

I got around a problem where using the first method will paginate only for the list view and leaves the grid view at the same page.

 

So I updated the original post with the new files without the errors

Edited June 26, 2013 by kingsinnersoul (see edit history)

[Presta1.5.4.1Newbies]

@kingsinnersoul appreciate your contribution. I have implemented your file with my modifies theme. More work to do with CSS, though.

I keep that template on hold because my boss prefer the default product list view :-).

[kingsinnersoul]

@Xarapauy, I just figured that it will be nice to update the original post because it would not paginate correctly otherwise. It took me sometime to work out the css, but the new attached css file has the css for the grid and list views (although I did implement that for a two column theme).

@qugeniosh1, what are those images? the links are broken. And the reason I posted this is because I know how much people were asking for this for. Its the bare minimum I can give back to those who help me all the time.

[Arminder Singh]

Kindly attention Mr. Prestashop Apperentice .... I did as you write , But I am geting "PLACE HOLDER FOR PRODUCT FILTER " WRITTEN WITH grid and list buttons. Kindly let me know which file I have to edit. Thanks.

[vekia]

Kindly attention Mr. Prestashop Apperentice .... I did as you write , But I am geting "PLACE HOLDER FOR PRODUCT FILTER " WRITTEN WITH grid and list buttons. Kindly let me know which file I have to edit. Thanks.

 

where you've got it? can you show some screenshot ?

[Arminder Singh]

https://docs.google.com/file/d/0B-_6fWRoABHwanJyLVlwLUJCV2c/edit?usp=sharing

 

https://docs.google.com/file/d/0B-_6fWRoABHwclQ2ZjBLUVBWRVE/edit?usp=sharing

 

https://docs.google.com/file/d/0B-_6fWRoABHwRFk0Rlh1cF91cUE/edit?usp=sharing

 

Dear Mr.Vekia

 

Kindly have a look at the above links and guide me how to solve the problem. Thanks.

[Arminder Singh]

Dear Mr.Vekia

 

One more thing .... only above Grid/List view buttons are working below buttons are not working. Please Guide me .

[vekia]

okay, now it's clear what's going on there. Most of probles you've got are related to simple css problems. If it is possible - please share the url, without url it will be hard to debug it

[Arminder Singh]

Dear Mr.Vekia

 

This the the url .... Please Help

 

www.godeals.in

Edited July 25, 2013 by Arminder Singh (see edit history)

[Arminder Singh]

Dear Mr.Vekia Please Reply ....

[vekia]

2) it's because you've got there ONLINE ONLY option displayed

objects where you don't have it, have got other "height" value so the whole block looks different (different height)

 

in this case add height:30px; to the:

ul#product_list.GRID_VIEW li div.product_availability {
display: block;
float: left;
overflow: hidden;
width: 100%;
margin-bottom: 10px;
height: 30px;
}

file: http://godeals.in/themes/Prince/css/product_list.css

[vekia]

3) in your theme there is no place for the right column. New products is attached to the right column.

So it is below the center block.

[Arminder Singh]

Dear Mr.Vekia

I am so thankful to you for your replies.

Please have a kind look on an another small issue. Actually my Grid/List buttons on below side are not working. Please see the attachment link.

 

https://docs.google....dit?usp=sharing

 

And my grid is not drawn properly every time ex.

1) Log on to godeals.in

2) Click on Kurtis (Every thing fine till now !)

 

https://docs.google....dit?usp=sharing

 

3)From drop down sorting select In-Stock First

 

https://docs.google....dit?usp=sharing

 

 

Notice GRID is not drawn properly

 

5) Why "PPLACE HOLDER FOR PRODUCT FILTER" is written there , how to get rid of this ?

 

https://docs.google.com/file/d/0B-_6fWRoABHwVUIyZXE3dUd3SGc/edit?usp=sharing

 

 

Please Help.

Edited July 25, 2013 by Arminder Singh (see edit history)

[SweetDreamHome]

Hi I am having a similar problem. Sorry to intrude on this talk. The function overall is working brilliantly fine apart from the place holder. I understand almost none of css and I am learning as I go along,so please be kind

 

This is the link to my website/issue http://94.136.40.103/~sweetdreamhome.co.uk/en/33-candles-holders

 

Thank you in advance for your kind help

[vekia]

Hi I am having a similar problem. Sorry to intrude on this talk. The function overall is working brilliantly fine apart from the place holder. I understand almost none of css and I am learning as I go along,so please be kind

 

This is the link to my website/issue http://94.136.40.103...candles-holders

 

Thank you in advance for your kind help

 

similar problem to? can you shed some light on your problem? thanks in advance

[Arminder Singh]

Thanks Mr. Vekia for your kind help and guidance . Also thanks Mr. SweetDreamHome for your reply.

 

Actually by changing and altering/deleting some code , I have solved my problem.

 

I have seen the link of SweetDreamHome, and I have also faced the same problem that, below Gdid/List buttons are not working.

So I have removed them by deleting the appropriate code.

 

www.godeals.in

 

Thanks have a nice day.

[SweetDreamHome]

Hi Vekia The main problem I am referring to is the message under compare "PLCAE HOLDER FOR PRODUCT FILTER" . How can I get rid of that message? I have looked at everything and it seems to be all aligned. Thank You

[SweetDreamHome]

Hello. I am still wondering for some help. I really like this grid function. Please can someone help me remove: "PLCAE HOLDER FOR PRODUCT FILTER" under the compare button?

 

http://94.136.40.103/~sweetdreamhome.co.uk/en/46-stationery

 

Could it be because I haven't changed my name servers to the server where I have Prestashop installed yet?

 

Thank you

[vekia]

you probably has got this code in pagination.tpl file, you should check it first

[SweetDreamHome]

Thank You. I will have a look there

[SweetDreamHome]

Hello again. I have looked in that file but still couldn't find the phrase. I can see t when i click on Inspect Element on Chrome but I have no clue on which file that is at...

[vekia]

can you show contents of your pagination.tpl file?

[SweetDreamHome]

Sure

 

Sorry if this is too much but I wasn't sure of what is relevant and what isn't. Thank you so much for your help

 

{*

* 2007-2013 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:

* http://opensource.org/licenses/afl-3.0.php

* 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-2013 PrestaShop SA

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

 

{if isset($no_follow) AND $no_follow}

{assign var='no_follow_text' value='rel="nofollow"'}

{else}

{assign var='no_follow_text' value=''}

{/if}

 

{if isset($p) AND $p}

{if isset($smarty.get.id_category) && $smarty.get.id_category && isset($category)}

{if !isset($current_url)}

{assign var='requestPage' value=$link->getPaginationLink('category', $category, false, false, true, false)}

{else}

{assign var='requestPage' value=$current_url}

{/if}

{assign var='requestNb' value=$link->getPaginationLink('category', $category, true, false, false, true)}

{elseif isset($smarty.get.id_manufacturer) && $smarty.get.id_manufacturer && isset($manufacturer)}

{assign var='requestPage' value=$link->getPaginationLink('manufacturer', $manufacturer, false, false, true, false)}

{assign var='requestNb' value=$link->getPaginationLink('manufacturer', $manufacturer, true, false, false, true)}

{elseif isset($smarty.get.id_supplier) && $smarty.get.id_supplier && isset($supplier)}

{assign var='requestPage' value=$link->getPaginationLink('supplier', $supplier, false, false, true, false)}

{assign var='requestNb' value=$link->getPaginationLink('supplier', $supplier, true, false, false, true)}

{else}

{assign var='requestPage' value=$link->getPaginationLink(false, false, false, false, true, false)}

{assign var='requestNb' value=$link->getPaginationLink(false, false, true, false, false, true)}

{/if}

<!-- Pagination -->

<div id="pagination" class="pagination">

{if $start!=$stop}

<ul class="pagination">

{if $p != 1}

{assign var='p_previous' value=$p-1}

<li id="pagination_previous"><a {$no_follow_text} href="{$link->goPage($requestPage, $p_previous)}">« {l s='Previous'}</a></li>

{else}

<li id="pagination_previous" class="disabled"><span>« {l s='Previous'}</span></li>

{/if}

{if $start==3}

<li><a {$no_follow_text} href="{$link->goPage($requestPage, 1)}">1</a></li>

<li><a {$no_follow_text} href="{$link->goPage($requestPage, 2)}">2</a></li>

{/if}

{if $start==2}

<li><a {$no_follow_text} href="{$link->goPage($requestPage, 1)}">1</a></li>

{/if}

{if $start>3}

<li><a {$no_follow_text} href="{$link->goPage($requestPage, 1)}">1</a></li>

<li class="truncate">...</li>

{/if}

{section name=pagination start=$start loop=$stop+1 step=1}

{if $p == $smarty.section.pagination.index}

<li class="current"><span>{$p|escape:'htmlall':'UTF-8'}</span></li>

{else}

<li><a {$no_follow_text} href="{$link->goPage($requestPage, $smarty.section.pagination.index)}">{$smarty.section.pagination.index|escape:'htmlall':'UTF-8'}</a></li>

{/if}

{/section}

{if $pages_nb>$stop+2}

<li class="truncate">...</li>

<li><a href="{$link->goPage($requestPage, $pages_nb)}">{$pages_nb|intval}</a></li>

{/if}

{if $pages_nb==$stop+1}

<li><a href="{$link->goPage($requestPage, $pages_nb)}">{$pages_nb|intval}</a></li>

{/if}

{if $pages_nb==$stop+2}

<li><a href="{$link->goPage($requestPage, $pages_nb-1)}">{$pages_nb-1|intval}</a></li>

<li><a href="{$link->goPage($requestPage, $pages_nb)}">{$pages_nb|intval}</a></li>

{/if}

{if $pages_nb > 1 AND $p != $pages_nb}

{assign var='p_next' value=$p+1}

<li id="pagination_next"><a {$no_follow_text} href="{$link->goPage($requestPage, $p_next)}">{l s='Next'} »</a></li>

{else}

<li id="pagination_next" class="disabled"><span>{l s='Next'} »</span></li>

{/if}

</ul>

{/if}

{if $nb_products > $products_per_page}

<form action="{if !is_array($requestNb)}{$requestNb}{else}{$requestNb.requestUrl}{/if}" method="get" class="pagination">

<p>

{if isset($search_query) AND $search_query}<input type="hidden" name="search_query" value="{$search_query|escape:'htmlall':'UTF-8'}" />{/if}

{if isset($tag) AND $tag AND !is_array($tag)}<input type="hidden" name="tag" value="{$tag|escape:'htmlall':'UTF-8'}" />{/if}

<input type="submit" class="button_mini" value="{l s='OK'}" />

<label for="nb_item">{l s='items:'}</label>

<select name="n" id="nb_item">

{assign var="lastnValue" value="0"}

{foreach from=$nArray item=nValue}

{if $lastnValue <= $nb_products}

<option value="{$nValue|escape:'htmlall':'UTF-8'}" {if $n == $nValue}selected="selected"{/if}>{$nValue|escape:'htmlall':'UTF-8'}</option>

{/if}

{assign var="lastnValue" value=$nValue}

{/foreach}

</select>

{if is_array($requestNb)}

{foreach from=$requestNb item=requestValue key=requestKey}

{if $requestKey != 'requestUrl'}

<input type="hidden" name="{$requestKey|escape:'htmlall':'UTF-8'}" value="{$requestValue|escape:'htmlall':'UTF-8'}" />

{/if}

{/foreach}

{/if}

</p>

</form>

{/if}

</div>

<!-- /Pagination -->

{/if}

[vekia]

okay everything is fine in this file

so we have another 3 files to check:

1. product-sort.tpl
   
2. product-compare.tpl
   
3. nbr-product-page.tpl
   

[SweetDreamHome]

Perfect. Thank you so much. I will go through those

[minister.boss]

there is the option of ready solutions with сookie to maintain the position of the products?

[Arminder Singh]

Hi Sweet Dream Home .... You can get rid of this message .... Edit category.tpl file search ( PLACE HOLDER FOR PRODUCT FILTER) ....

 

You will find following lines at line no 255 ....

 

<tr class="pagination_bottom_row">

<td>

{l s=' PLCAE HOLDER FOR PRODUCT FILTER '} ( DELETE THIS TEXT )

</td>

 

 

Just Delete the text and save .... Your problem will be solved ....

[vekia]

Hi Sweet Dream Home .... You can get rid of this message .... Edit category.tpl file search ( PLACE HOLDER FOR PRODUCT FILTER) ....

 

You will find following lines at line no 255 ....

 

<tr class="pagination_bottom_row">

<td>

{l s=' PLCAE HOLDER FOR PRODUCT FILTER '} ( DELETE THIS TEXT )

</td>

 

 

Just Delete the text and save .... Your problem will be solved ....

 

 

he pasted cateogy.tpl file contents, there is no place holder text

[stottycabanas]

SweetDreamHome, you posted the contents of the default 1.5.4.1 category.tpl, but you're actually using the category.tpl file that was in the zip file in the original post - that's where that unwanted text is.

 

So, find where you extracted that version of category.tpl and edit line 255 as Arminder suggests above.

[stottycabanas]

SweetDreamHome, you posted the contents of the default 1.5.4.1 category.tpl,

 

Sorry, ignore that bit - it was pagination.tpl, as requested.

 

I got a bit excited when I found the solution ....

[Arminder Singh]

Dear Mr. Vekia .... The text is there .... in the above given files ....

 

Otherwise Download the category.tpl file , Search and Delete the required line, Upload and overwrite with the existing one to solve the issue ....

 

Download Category.tpl

[SweetDreamHome]

My dear friends. BIG, HUGE THAAAAANK YOUUUUU. It worked fandabidousy. It was not a big issue but was annoying me lol. No words to thank you all. I am actually enjoying the challenge as I had never done this css coding before

[vekia]

thanks for confirmation that you solved this issue :)I did not see correct the file, my bad.

 

regards

[Ki sign]

Hi,

 

PS 1.5.6.2 - using theme default

I have a problem when using chrome browser.

The list or grid buttons are not working properly, also grid(first) AND list(after) are both displayed.

Also product placed in a category which is containing sub-category is not displayed at the bottom of the page

Any idea ?

 

Buttons are working fine with firefox.

Also product placed in a category which is containing sub-category are not displayed at the bottom of the page

 

Thanks

Marc

Edited July 31, 2014 by Ki sign (see edit history)

[vekia]

please share url to your store, cases like that needs inspection

[Guest locen]

Hi, i would enable list view default for only one page.

For other all pages i would default grid view.

 

How I can do this? 

Thanks for reply