Jump to content

Make List View Default.


Recommended Posts

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}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • 3 weeks later...

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.

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 months later...

Replace in product-sort.pl code:

 

<div id="tabs-sort-container">

<ul id="viewtabs" class="shadetabs" >

<li>Widok:</li>

<li class="grid"><a href="#" rel="grid-view" class="selected"></a></li>

<li class="list"><a href="#" rel="list-view"></a></li>

</ul>

 

to:

 

 

<div id="tabs-sort-container">

<ul id="viewtabs" class="shadetabs" >

<li>Widok:</li>

<li class="list"><a href="#" rel="list-view" class="selected"></a></li>

<li class="grid"><a href="#" rel="grid-view"></a></li>

</ul>

Edited by kokosz_mk (see edit history)
Link to comment
Share on other sites

×
×
  • Create New...