Product View - Grid or List Option

[PCsh.ro]

Hi everyone .

How can I set , the default listing products to be " list " ? Now it's set by default on grid and these doesn't help me

Edited March 18, 2014 by PCsh.ro (see edit history)

[goldenegg]

As I understand it, in Version 1.6 the "Grid" or "List" option is selected by the retail website visitor.

Unfortunately, though, after upgrading to Version 1.6 I still don't see the "Grid/List" selection button on the Front Office product listings pages.

Can anyone else clarify?

 

(I would actually like to have "Grid" as the default on our website:  http://www.goldeneggstudio.net/shop .)

 

 

 

[dioniz]

Goldenegg you are still using old theme. You should change theme to default-bootstrap to see Grid List view

[PCsh.ro]

Ok , but what I have to do to be LIST for every visitor by default ( because now it's GRID , as you can see .. ) ?

[vekia]

i've noticed that you use theme for prestashop 1.5

it doesnt have grid / list display method by default.

 

if you want this feature follow this: grid list product view in 1.5 theme

but if you're on 1.6, it will be much easier if you will just turn on default-bootstrap template instead of old theme.

 

this should be a first step in whole process, then it will be necessary to modify the product-list.tpl file code to display list instead of grid.

[arlys]

If you have prestashop 1.6 and the default-bootstrap theme

 

When you want to force  list as view by default i found an easy way:

 

go to

/themes/default-bootstrap/js/global.js

 

find the function:

function display(view) (line 195 or so)

 

just at the end of the function (line 275) add:

 

display('list');

 

and it is, by default list will be the view mode.

 

if you don't want to allow users to change view mode go to:

product-sort.tpl

and erase or comment:

 

<ul class="display hidden-xs">
    <li class="display-title">{l s='View:'}</li>
    <li id="grid"><a rel="nofollow" href="#" title="{l s='Grid'}"><i class="icon-th-large"></i>{l s='Grid'}</a></li>
    <li id="list"><a rel="nofollow" href="#" title="{l s='List'}"><i class="icon-th-list"></i>{l s='List'}</a></li>
</ul>

 

this will hide the buttons that allow users to chage view mode.

 

For me this is the easy mode to force list view

 

hope it was usefull

[vekia]

very nice thank you for this tip.

so, basically whole layout thing is based on .js files not on .css modification as i supposed before

[arlys]

Yes it is!

 

there is aproblem with the solution above, I didn't notice till was a little late that this affected too to my featured products in home page.... (I don't have them in tabs, and can't say if it happens in tabs...)

 

To solve this i did something simple:

1) go top in the global.js page and ad a global variable (you can call it as you want, since I'm spanish i called it webActual, so I'm sure that there will no collide with any prestashop default variable) like this:

var webActual = document.location.toString().toLowerCase();

this will capture our actual URL

 

then below the display(view) functions, instead of display('list') I add a simple function (and yes you can rename it!):

 

function eselHome(){

     if(webactual != "http://www.yoursite.com"){

        display('list')

    }

}

eselHome();

 

and it works, maybe is not the best way, but it works fine

very nice thank you for this tip.

so, basically whole layout thing is based on .js files not on .css modification as i supposed before

[vekia]

your solution changes view to "list" method all the time, even if i select "grid" method - then after refresh website - i see list.

i described whole process to change grid to list here:  list default products view prestashop 1.6

[Guillaumeb59]

Vekia, thank your for this tutorial for prestashop 1.6.

 

It works fine on the product-list but it change the display of all the products on the home page wich could be a problem. 

Maybe you have a solution to apply your tutorial only to the product list and not to the home page  ? 

And again, thank you for all your work on prestashop forum :-)

[Guillaumeb59]

Finally, I've found the solution in one of your other topics, we need to use this updated code instead of the one in the tutorial :

 

<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}{if isset($active) && $active == 1} active{/if}">

 

And It's working fine for me !

 

Thank you again Vekia !

Edited May 14, 2014 by Guillaumeb59 (see edit history)

[SebastienSerre]

Hello

 

I've followed Vekia's Tuto but I still have Grid on home page (PS 1.6.0.9) in DisplayHomeTab.

 

I'd Like to have the List in Home Page too, Someone can help me please?

[piterek]

Refresh: Anyone can say how to change view grid -> list on Home Page?