Make List View Default.

Amberjack · September 18, 2012

Hey.

I am trying to make my website display products in List view by default. Can anyone tell me what code I would need to change within the product-list.tpl code below;

Cheers

{if isset($products)}
<div id="product_list_grid" class="bordercolor box visible">
<ul>
{foreach from=$products item=product name=products key=k}
<li class="ajax_block_product bordercolor {if $smarty.foreach.products.iteration is div by 3}item3{/if}">
	  <h3><a class="product_link" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:25:'...'|escape:'htmlall':'UTF-8'}</a></h3>
  <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')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>
  {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>{/if}
  {/if}
			 <p class="product_desc"><a class="product_descr" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|truncate:30:'...'|strip_tags:'UTF-8'|escape:'htmlall':'UTF-8'}">{$product.description_short|truncate:50:'...'|strip_tags:'UTF-8'}</a></p>
  {if isset($comparator_max_item) && $comparator_max_item}
<p class="compare checkbox"><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{/if}/> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p>
  {/if}
  <div>
  {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)}
	 <a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
{else}
	 <span class="exclusive">{l s='Add to cart'}</span>
{/if}
  {/if}
  </div>
  <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
</li>
{/foreach}
</ul>
</div>
<div id="product_list_list" class="box bordercolor">
<ul class="bordercolor">
{foreach from=$products item=product name=products}
<li class="ajax_block_product bordercolor">
 <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')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>
 <div class="center_block">
  <div class="product_flags">
{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}!</span>{/if}
{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}{if ($product.allow_oosp || $product.quantity > 0)}<span class="availability bordercolor">{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}<span class="bordercolor">{l s='Product available with different options'}</span>{else}<span class="bordercolor">{l s='Out of stock'}</span>{/if}</span>{/if}
{if isset($product.online_only) && $product.online_only}<span class="online_only bordercolor">{l s='Online only!'}</span>{/if}
  </div>
  <h3><a class="product_link" 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 class="product_descr" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|truncate:30:'...'|strip_tags:'UTF-8'|escape:'htmlall':'UTF-8'}">{$product.description_short|truncate:165:'...'|strip_tags:'UTF-8'}</a></p>
 </div>									  
 <div class="right_block bordercolor">
  {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)))}
{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>{/if}
  {/if} {if isset($comparator_max_item) && $comparator_max_item}
<p class="compare checkbox"><input type="checkbox" class="comparator" id="comparator_item_list{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked{/if}/> <label for="comparator_item_list{$product.id_product}">{l s='Select to compare'}</label></p>
  {/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)}

	 <a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
{else}
	 <span class="exclusive">{l s='Add to cart'}</span>
{/if}
  {/if}<br />
  <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
 </div>
</li>
{/foreach}
</ul>
</div>{if $comparator_max_item}

musicmaster · September 18, 2012

It is not clear to me what you mean. Can you provide a screendump to show how you would like to have it and can you point out which of the three main pages (home, category and product) you want to change?

Amberjack · September 18, 2012

Sorry, I just wish to have all the product results (within catagories/pages) on my site displayed in List View rather than Grid view.

So at the moment when a customer views my website/browsing products, all products are displayed in Grid View by default. So I just want to swap this around so that by default List View is active instead.

yewster · September 19, 2012

Sorry, I just wish to have all the product results (within catagories/pages) on my site displayed in List View rather than Grid view.

So at the moment when a customer views my website/browsing products, all products are displayed in Grid View by default. So I just want to swap this around so that by default List View is active instead.

Replace the product-list.tpl file in themes directory with the code below. It is the original product-list.tpl file from prestashop version 1.4.9

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @version  Release: $Revision: 14008 $
*  @license	http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{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="center_block">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<div style="background:#000;position:absolute;z-index:999;">{l s='On sale!'}

   {if $product.price_without_reduction neq $product.price}

							 <span class="price-discount">{if !$priceDisplay}{displayWtPrice p=$product.price_without_reduction}{else}{displayWtPrice p=((($product.price_without_reduction) / (1 + ((($product.rate|intval) / 100)|floatval)))|floatval)}{/if}</span>
								{if $product.specific_prices}{assign var='pro_specific_prices' value=$product.specific_prices}
									 {if $pro_specific_prices.reduction_type eq 'percentage' && ($pro_specific_prices.from eq $pro_specific_prices.to OR ($smarty.now|date_format:'%Y-%m-%d %H:%M:%S' <= $pro_specific_prices.to && $smarty.now|date_format:'%Y-%m-%d %H:%M:%S' >= $pro_specific_prices.from))}
									 (-{$pro_specific_prices.reduction * 100|floatval}%)
									 {/if}
								{/if}
							{/if}

</div>{/if}
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>
<h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/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|truncate:360:'...'|strip_tags:'UTF-8'}</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 isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}
{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
<div>
 {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}{l s='Out of stock'}{/if}</span>{/if}
</div>
{/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)}
  <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
 {else}
   <span class="exclusive">{l s='Add to cart'}</span>
 {/if}
{/if}
<a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
{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{/if}/> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p>
{/if}
  </div>
 </li>
{/foreach}
</ul>
<!-- /Products list -->
{/if}

Prestashop's default theme uses list view.

Edited September 19, 2012 by yewster (see edit history)

Amberjack · September 20, 2012

Hey Mate.

Thanks for the reply. I Tried that code but it didn't work. Somewhat messed up the theme.

Amberjack · October 8, 2012

Anyone able to help me out a bit with this code?

Cheers

innercode · October 16, 2012

It should be by default. I'd suggest clear your "cookies", you can also do this for one site, you don't need to delete all of your visited sites' cookies. Prestashop saves your choice for views in cookie, so your changes in code will be visible for fresh visits or after deletion of cookies.

Amberjack · October 17, 2012

Hey Mate.

Thanks for that. But I am wanting to amend to List view so all vistors to my site view the products in list view by default.

innercode · October 18, 2012

Could you attach your themes' product-list.tpl and product-sort.tpl? I think I know what might cause this, but I am not sure, don't want to post all coding changes, because I might be wrong:)

I've changed to default grid view in one of the shops. There was list view by default but code was a little bit different than in your first post.

Edited October 18, 2012 by dovis (see edit history)

Amberjack · October 18, 2012

Hey Mate.

Thanks for having a look. files attached.

Cheers

tpl.zip

innercode · October 19, 2012

Try changing in your product-list.tpl:

line 4:

<div id="product_list_grid" class="bordercolor box visible">

to:

<div id="product_list_grid" class="bordercolor box">

line 33:

<div id="product_list_list" class="box bordercolor">

to:

<div id="product_list_list" class="box bordercolor visible">

If you want that users couldn't change to grid view at all, comment out in your product-sort.tpl lines 44-47:

<!--<ul class="product_view">
<li id="product_view_grid"></li>
<li id="product_view_list" class="current"></li>
</ul>-->

This should work;)

Amberjack · October 22, 2012

Hey Mate.

Thanks for the post. I tried amending those lines in the product-list.tpl, but when I tested it resulted in no products showing in the template at all, so I had to revert to original code still.

innercode · October 22, 2012

It's strange, from code it looks that lines 4-31 is for grid view and lines 33-69 is for list view. The class in div "visible" determines which is shown and which is hidden by default.

Can you give a link to your shop? Actually I don't know what else might be, but maybe see something.

kokosz_mk · March 5, 2013

Replace in product-sort.pl code:

<li>Widok:</li>

</ul>

to:

<li>Widok:</li>

</ul>

Edited March 5, 2013 by kokosz_mk (see edit history)

Make List View Default.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites