The product list is a heavily used template within Prestashop. Being featured from the homepage right the way through to search results, this makes it an integral focal point for any viewers on site. This makes it important to create product listings as appealing as possible to the eye.

So, what can we do to make this area of the site standout? Of course having appealing styling will be the basis of this, but people love to interact with websites and relish the moment when it appears that a website site is reactive to their input. As a developer is it your job to capitalise on this, to engage your user base and keep them on site for longer.

This blog series will look to outline a number of things that can be done. Starting with basic editions such as removing the default hover over on the product list, up to creating your own micro interactions to enhance the overall user experience.

Below is a screenshot of the default out of the box product list for Prestashop:

screen-shot-2016-11-09-at-10-25-41screen-shot-2016-11-09-at-10-48-19

 

 

 

 

 

 

 

 

 

Overall in practicality it does it’s job. It includes the product title, its prices and any discounts. It shows if  the item is in or out of stock and displays variations in a basic form of the product, with a hover over to add to cart.

But this isn’t for everybody, maybe you oversell your products so stock isn’t important, or you do not wish to display colour variations at this stage of the journey, or you wish to have the add to cart and more buttons on display without the need of a hover over to display it, you could even go down to a level in which you can alter how many products are displayed per row on desktop, tablet and mobile.

Let’s look at removing the stock notifications on your product-list, you will need to navigate to your product-list.tpl within your stores theme, and search for the following section of code:

{if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
	{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}
		<span class="availability">
			{if ($product.allow_oosp || $product.quantity > 0)}
				<span class="{if $product.quantity <= 0 && isset($product.allow_oosp) && !$product.allow_oosp} label-danger{elseif $product.quantity <= 0} label-warning{else} label-success{/if}">
					{if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if}
				</span>
			{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}
				<span class="label-warning">
					{l s='Product available with different options'}
				</span>
			{else}
				<span class="label-danger">
					{l s='Out of stock'}
				</span>
			{/if}
		</span>
	{/if}
{/if}

You can either remove this code or comment it out in the editor if you need to add it back at a later date. Doing this will leave you with the following result:

 

Before

Before

After

After

 

 

 

 

 

 

 

 

 

 

 

 

 

This helps to save a little more real estate on page by reducing the height of each product listing and can help declutter the product list or make space for other features that can be added here.

Another common thing to change is how many products are displayed per row on the product list, just with the stock notification banners, this can be found in the product-list.tpl in your theme, located near the top of the file, the code you are looking for here is:

{if $page_name !='index' &amp;amp;amp;&amp;amp;amp; $page_name !='product'}
{assign var='nbItemsPerLine' value=3}
{assign var='nbItemsPerLineTablet' value=2}
{assign var='nbItemsPerLineMobile' value=3}
{else}
{assign var='nbItemsPerLine' value=4}
{assign var='nbItemsPerLineTablet' value=3}
{assign var='nbItemsPerLineMobile' value=2}
{/if}

Altering the values above will effect how many products per row will display, for example changing:

{assign var='nbItemsPerLine' value=3}

to

{assign var='nbItemsPerLine' value=4}

Will set the variable to display 4 products per row. With this set what remains to do is to alter the conditional logic of the product listing themselves to change the bootstrap classes that are applied to the element (Please note this is on the assumption that you are operating with the Default Boostrap theme within Prestashop). Search for the following line within the product-list.tpl:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">

Change this to the following:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-3{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">

 

This will have the following effect on the product-list on site.

Before:

screen-shot-2016-11-09-at-13-29-05

 

After:

screen-shot-2016-11-09-at-13-53-29

 

This is again good if you are trying to save on extra scrolling and how much real-estate products take up on the page. The same principle applies to the  ‘nbItemsPerLineTablet’ and ‘nbItemsPerLineMobile’ lines. You can update the value and navigate to the conditional within the list element to amend the bootstrap classes.

In the next instalment we will cover how to remove the hover over element to the default list, as well as put in a conditional statement that will display an add to cart button or more button depending on what attributes are available on the product. Check back soon!

Save

Save

  • SBA 2016 Winner
  • chamber