[TUTORIAL] Change default "grid" products display method to "list"

[vekia]

As you probably know, default bootstrap template in new prestashop 1.6 displays products listing as "grid" by default. I noticed that many of merchants asking about changing default product "display" method from "grid" to "list". So, based on forum entries i decided to analse the code and write guide. So here it is: "how to change default display method from grid to list in prestashop 1.6"

 

 

[Maxima]

Thanks vekia

[igoshot]

I just tested it , there is a problem !

Changes on product-list.tpl brocked the homepage display.

on homepage, I still have display in grid but now I also see the short products descriptions on the homepage, and it brocked the page layout.

the categories pages are in list display by default now.

I removed the changes from product-list.tpl, leaving only global.js changed, and now I have categories in list display and no change in homepage

[vekia]

I just tested it , there is a problem !

Changes on product-list.tpl brocked the homepage display.

on homepage, I still have display in grid but now I also see the short products descriptions on the homepage, and it brocked the page layout.

the categories pages are in list display by default now.

I removed the changes from product-list.tpl, leaving only global.js changed, and now I have categories in list display and no change in homepage

 

strange im testing it all the time and i don't see the list for homefeatured, im going to install fresh 1.6.0.6 will se what's goin on then.

 

what ps version you use?

[igoshot]

1.6.0.6

[AlvaroJesus]

Same problem here... list is displaying ok in the categories but completely broke the homefeatured products.

 

It's logical since it's outputting this:

<ul id="homefeatured" class="product_list list row homefeatured tab-pane active">...</ul>

The class change is reflected in this list too, having 'list' instead of grid. Is there a way to leave 'list' on categories and 'grid' on the homepage?

igoshot, did you manage to fix this?

 

Thanks!

[vekia]

can you check what's going on if you change it back to grid, i mean  change code:
 

<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}">

to:

<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}">

after that clear browser cache and check how your front office (homepage featured products) looks like

[AlvaroJesus]

Hey vekia!

 

Sorry I didn't answer earlier, I didn't see the email with the notification. After changig that again, it works as expected: grid on the homepage, list on the category pages.

 

Thanks a lot!

[vekia]

thank you so much for confirmation, even after some time it's worth to know that everything works

[AlvaroJesus]

Hello again!

 

I thought it was working but it was just because I had some problems with Prestashop's cache...

 

Right now, it is impossible to have it as desired. If I leave "grid" in produt-list.tpl, everything is shown as a grid. If I leave it as a list, it shows a list on the homepage, but on the category it still shows a list (although the button to select view appears selected as list).

I have observed the classes applied to the HTML for the product's 'ul' and 'li' change upong selecting the view manually with that button... which may be the reason why it isn't ok to only change the line mentioned in produt-list.tpl.

 

Any ideas?

 

Thanks!

[klopotnik]

Hi,

 

is it possible to have firt category view as grid and next one as list?

like you did it in 1.5?

 

thanks

klopotnik

[rpili1313]

Is there a way to adapt the list view?

 

More like this:

http://www.power4pc.be/webshop/desktops

 

 

Thx

[vekia]

some time ago i wrote this guide:
list grid switcher prestashop

 

there is a possibility to create list like:

[Paldru]

After changing default to list, like you showed us in your tutorial, it works fine in the categories but as mentioned above by igoshot, the homepage still shows new products as grid. How would I also change it to list?

[vekia]

tutorial is related to PRODUCT LIST, not to modules

[Paldru]

Do I understand correctly, that the home page new products function is a module and will show always a grid? No chance to change to list like the rest of my site?  I see in blocknewproducts_home.tpl the code "include file="$tpl_dir./product-list.tpl"" I figured, it definitely has something to do with "PRODUCT LIST" am I so wrong? Thank you.

[AndyCZ]

Hello,

for prestashop default theme this module works perfect!

But I have theme from prestashop community isimple and there is no file global.js in the mentioned directory and produt-list.tpl has different content. 

 

{if isset($products)}
	<!-- Products list -->
	<ul id="product_list" class="clear">
	{foreach from=$products item=product name=products}
		<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
			<div class="left_block">
				{if isset($comparator_max_item) && $comparator_max_item}
					<p class="compare">
						<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} autocomplete="off"/> 
						<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
					</p>
				{/if}
			</div>
			<div class="center_block">
				<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
					<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_dm')|escape:'html'}" alt="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'htmlall':'UTF-8'}{else}{$product.name|escape:'htmlall':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
					{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
				</a>
				<h3>{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
				<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>
			</div>
			<div class="right_block">
				{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
				{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}
				{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
				<div class="content_price">
					{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
					{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}<span class="warning_inline">{l s='Out of stock'}</span>{/if}</span>{/if}
				</div>
				{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only'}</span>{/if}
				{/if}
				{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
					{if ($product.allow_oosp || $product.quantity > 0)}
						{if isset($static_token)}
							<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
						{else}
							<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
						{/if}						
					{else}
						<span class="exclusive"><span></span>{l s='Add to cart'}</span><br />
					{/if}
				{/if}
				<a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
			</div>
		</li>
	{/foreach}
	</ul>
	<!-- /Products list -->
{/if}

 

Any ideas how make this module works on third party themes?

 

Prestashop 1.6.0.9

Edited September 24, 2014 by AndyCZ (see edit history)

[Panagiotis Vagenas]

Incase anyone else trying to make this work for default-bootstrap theme here it is:

 

File default-bootstrap/js/global.js function bindGrid now reads

function bindGrid()
{
	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');
	});
}

 change to

function bindGrid()
{
	var view = $.totalStorage('display');
	var displayList = true;
	
	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');
	});
}

Bonus:

If you want to make layout change work for home page go to default-bootstrap/js/modules/blocksearch/blocksearch.js line 58 and call just before return statement the bindGrid function. Something like

if($("#search_query_" + blocksearch_type).val().length > 0)
						{
							tryToCloseInstantSearch();
							$('#center_column').attr('id', 'old_center_column');
							$('#old_center_column').after('<div id="center_column" class="' + $('#old_center_column').attr('class') + '">'+data+'</div>');
							$('#old_center_column').hide();
							// Button override
							ajaxCart.overrideButtonsInThePage();
							$("#instant_search_results a.close").click(function() {
								$("#search_query_" + blocksearch_type).val('');
								return tryToCloseInstantSearch();
							});
                                                        bindGrid();
							return false;
						}

[casper.hundeboel]

Hi,

 

Is there some way to make this work for subcategories as well? I would like to have them showing in list view with description.

 

Thanks!

 

--

Casper

[Cathode]

some time ago i wrote this guide:

list grid switcher prestashop

 

there is a possibility to create list like:

 

Hello, how to do this list on 1.6 PS - default template?)

[edbroker]

Im in the file manager and the following is not listed there.

 

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

 

it goes:

 

themes to default-bootstrap to js and then the following... 1)autoload   2)debug    3)modules

 

so where is global.js  ????

 

 

 

[Panagiotis Vagenas]

Im in the file manager and the following is not listed there.

 

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

 

it goes:

 

themes to default-bootstrap to js and then the following... 1)autoload   2)debug    3)modules

 

so where is global.js  ????

 

Missing?

Re-download.