Jump to content

Product View - Grid or List Option


Recommended Posts

  • 2 weeks later...

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

 

 

 

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...

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 :-)

Link to comment
Share on other sites

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 by Guillaumeb59 (see edit history)
Link to comment
Share on other sites

  • 4 months later...
  • 4 months later...
×
×
  • Create New...