Optimiser la liste des produits dans Prestashop 1.4.10

par AFI Aveyron | 15, Avr 2013 | Aide et tutoriels, Web

Quand vous présentez une liste de produits sur la page d’accueil ou sur une page de marque, Prestashop présente trois liens vers le produit :

• Un sur le nom ;
• Un sur l’image ;
• Un sur la description.

Cela est totalement inutile. Il est préférable d’avoir un seul lien voire deux au maximum. Il faut supprimer le lien de la description courte.

Ceci ce réalise dans le fichier product-list.tpl

Recherchez le code adéquate et remplacez le par :

<div class="center_block">
<h2><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h2>
<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 isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}{if ($product.allow_oosp || $product.quantity > 0)}<span class="availability">{l s='Available'}</span>{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}<span>{l s='Out of stock'}</span>{/if}{/if}
<p class="product_desc">{$product.description_short|truncate:145:'...'|strip_tags:'UTF-8'}</p>
{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 style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
</div>

Nous avons ici supprimé le lien sur la description courte mais également modifier la balise Hn qui par défaut est H3 pour la remplacer par un H2 car auparavant sur cette page, il y avait une balise H1 mais pas de H2.

Par contre le lien sur l’image a été laissé pour des notions d’ergonomie.

Voilà ce sont de toutes petites modifications mais qui vous permettrons d’améliorer le référencement de votre site e-commerce.

Optimiser les pages « marques » sous Prestashop 1.4.9

par AFI Aveyron | 28, Mar 2013 | Aide et tutoriels, Web

Afficher la description courtes dans la liste des marques

Prestashop nous permet de renseigner la description des marques mais ces descriptions n’apparaissent pas dans le Template par défaut. Nous allons y remédier par quelques ajouts de ligne de code.

Pour afficher la description courte sur la page, vous pouvez rajouter ces lignes après

<h3>
{if $manufacturer.nb_products > 0}
<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
{$manufacturer.name|truncate:60:'...'|escape:'htmlall':'UTF-8'}
{if $manufacturer.nb_products > 0}</a>{/if}
</h3>

Code à rajouter:

<p class="description rte">
{if $manufacturer.nb_products > 0}
<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)|escape:'htmlall':'UTF-8'}">{/if}
{$manufacturer.description}
{if $manufacturer.nb_products > 0}</a>{/if}</p>

Cela donne donc ceci:

Afficher la description courtes dans la liste des marques

Afficher la description longue et son logo sur la page des marques

Pour afficher la description longue et le logo sur la page manufactured.tpl, il faut rajouter ces lignes de codes :

<div id="logo-manufactred-img">
<img src="{$img_manu_dir}{$manufacturer->id}-large.jpg" alt="{$manufacturer->name|escape:'htmlall':'UTF-8'}" width="200" height="200" title="{$manufacturer->name|escape:'htmlall':'UTF-8'}" />
</div>
<div class="description_rte">{$manufacturer->description}</div>

Avec ici le style CSS pour afficher le logo à droite.

Code à rajouter dans global.css

/*AFI Aveyron logo manufactured tlp*/
#logo-manufactred-img{ float : right; padding-right : 0px; margin : 10px;}
/*AFI Aveyron logo manufactured tlp fin*/

De même, on sort de la balise H1 le texte « Liste des produits du fabricant : »

Ligne 32

{l s='List of products by manufacturer:'}
<h1> {$manufacturer->name|escape:'htmlall':'UTF-8'}</h1>

A vous de mettre en forme comme bon vous semble.

Le code en entier après :

{include file="$tpl_dir./breadcrumb.tpl"}
{include file="$tpl_dir./errors.tpl"}
{if !isset($errors) OR !sizeof($errors)}

Ligne 32

{*modif affichage description + image + opti H1 AFI Aveyron*}
{l s='List of products by manufacturer:'}
<h1> {$manufacturer->name|escape:'htmlall':'UTF-8'}</h1>
{if $manufacturer->description}

<div id="logo-manufactred-img">
<img src="{$img_manu_dir}{$manufacturer->id}-medium.jpg" alt="{$manufacturer->name|escape:'htmlall':'UTF-8'}" width="200" height="200" title="{$manufacturer->name|escape:'htmlall':'UTF-8'}" />
</div>
{$manufacturer->description}
{/if}
{*Fin modif affichage description + image + opti H1 AFI Aveyron*}

Cela donne ceci en image

Afficher la description longue et son logo sur la page des marques

Le fait de ne pas réutiliser la même description pour la liste de marque et la liste des produits d’une marque supprime de fait le contenu dupliqué. Cela aura pour avantage de pouvoir vous positionner sur les noms de marques.