Jump to content

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


vekia

Recommended Posts

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"

 

jwVjU9T.png

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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!

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

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!

Link to comment
Share on other sites

  • 1 month later...
  • 4 weeks later...

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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

  • 1 month later...

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;
						}
Link to comment
Share on other sites

  • 4 weeks later...
  • 1 month later...

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  ????

 

 

 

Link to comment
Share on other sites

×
×
  • Create New...