Jump to content


Photo

change default product view to list in prestashop 1.6

grid list prestashop default product view category

  • Please log in to reply
7 replies to this topic

#1 rikardo

rikardo

    Member

  • Members
  • PipPip
  • 27 posts

Posted 12 April 2014 - 12:36 AM

I use default-bootstrap template in my prestashop 1.6

this theme has got feature to switch product list view method, we can select grid or list.

 

by default, this theme uses "grid" view. I just wondering what i can do to change the default "view" of product listing to "list" method:

 

Posted Image



looking for the best presta addons with outstanding support? check this: PrestaShop Modules

#2 vekia

vekia

    Advanced Member

  • Members
  • PipPipPip
  • 10166 posts

Posted 12 April 2014 - 12:46 AM

of course - it's available to achieve. but it needs some customization of js file.   open this file located in your theme directory: /themes/default-bootstrap/js/global.js then in code search for: bindGrid()     there is a code like: finally i analysed code a little and  change:
        var view = $.totalStorage('display');	if (view && view != 'grid')		display(view);	else		$('.display').find('li#grid').addClass('selected'); 
to:
	var view = $.totalStorage('display');	if (view && view != 'list')	    display(view);	else {	    $('.display').find('li#list').addClass('selected');            display("list");    }
in: themes/default-bootstrapjsglobal.js   then go to themes/default-bootstrap/product-list.tpl and change:
<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}">
to:
<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list list row{if isset($class) && $class} {$class}{/if}{if isset($active) && $active == 1} active{/if}">

free tutorials, free templates, free addons, prestashop modules MndfRK4.png  lpHMrZ5.png  gtKHYO7.png  google-48.png


#3 Nathan

Nathan

    Newbie

  • Members
  • Pip
  • 5 posts

Posted 12 April 2014 - 04:52 PM

thank you vekia it works in my default theme,

my products are now displayed as "list" by default, great work!

 

any idea how to do the same for homefeatured products?

i created my topic: homefeatured list display



#4 vekia

vekia

    Advanced Member

  • Members
  • PipPipPip
  • 10166 posts

Posted 13 April 2014 - 10:20 AM

you're very welcome :)

glad that it works for you

 

i will create guide related to homefeatured module because it's a bit more complicated :)


free tutorials, free templates, free addons, prestashop modules MndfRK4.png  lpHMrZ5.png  gtKHYO7.png  google-48.png


#5 vekia

vekia

    Advanced Member

  • Members
  • PipPipPip
  • 10166 posts

Posted 14 April 2014 - 10:10 AM

i created a step by step guide also on my website: prestashop 1.6 grid to list

 

prestashop-16-grid-to-list.jpg


free tutorials, free templates, free addons, prestashop modules MndfRK4.png  lpHMrZ5.png  gtKHYO7.png  google-48.png


#6 DEFTONES

DEFTONES

    Advanced Member

  • Members
  • PipPipPip
  • 46 posts

Posted 14 April 2014 - 01:04 PM

hello vekia

i followed your guide and everything works well

im wondering, while im working on my template changes, how i can disable my shop like i can see on other prestashop websites?

i created new topic here: http://cart-help.com...op-temporarily/



#7 lucifermagnus

lucifermagnus

    Newbie

  • Members
  • Pip
  • 1 posts

Posted 28 November 2016 - 02:42 PM

hello vekia

i followed your and it made no change for me. Only that the LIST button appears selected by default, but products are still a grid.

 

What am I doing wrong? I've find the files and did all the modifications; but it seems nothing changes. [ www.beltercosmetic.ro ]. I use a custom theme.

I've modified as you said in themes/default-bootstrap/produt-list.tpl + JS directory , and I've done it into the TPL and JS ot the theme itself.

My global.JS code of the initial function looks like this:

"

var view = $.totalStorage('display');

 
if (!view && (typeof displayList != 'undefined') && displayList)
view = 'list';
 
if (view && view != 'grid')
display(view);
else
$('.display').find('li#grid').addClass('selected');
 
$(document).on('click', '#grid', function(e){
e.preventDefault();
display('grid');
});
 
$(document).on('click', '#list', function(e){
e.preventDefault();
display('list');
"


#8 MotifSky

MotifSky

    Member

  • Members
  • PipPip
  • 11 posts

Posted 16 May 2018 - 02:01 AM

You just need to make some customization to the file