Menu Onglets


Depuis la version 1.6 le menu onglet sur les pages produits a disparu, ce qui était bien utile pour la navigation des clients ainsi que pour le référencement des moteurs de recherche.

Je vous propose donc de rajouter ce menu avec un système d'ancres.

Pour effectuer cette opération il vous faut:

- Un éditeur de fichier tel que Notepad++ que vous pouvez téléchargez ici https://notepad-plus-plus.org/fr/.

- Un logiciel FTP tel que Filezilla que vous pouvez téléchargez ici https://filezilla-project.org/.

La version de PS utilisée pour ce tutoriel est 1.6.0.14 avec le thème par défaut les numéros des lignes peuvent donc différer selon votre version.

Si vous utilisez un autre thème éditez les fichiers correspondant à votre thème.

Éditez le fichier product.tpl de votre thème (themes/default-bootstrap/product.tpl)

recherchez </div> <!-- end primary_block --> (ligne 396)

après {if !$content_only}

rajoutez

<div class="product_tabs">
   <ul class="ul_tabs">
        {if $product->description}<li class="li_tabs"><a href="#idTab0"><h3 class="idTabHrefShort page-product-heading">{l s='More info'}</h3></a></li>{/if}
        {if $packItems|@count > 0}<li class="li_tabs"><a href="#idTab1"><h3 class="idTabHrefShort page-product-heading">{l s='Pack content'}</h3></a></li>{/if}
        {if $features}<li class="li_tabs"><a href="#idTab2"><h3 class="idTabHrefShort page-product-heading">{l s='Data sheet'}</h3></a></li>{/if}
        {if (isset($quantity_discounts) && count($quantity_discounts) > 0)}<li class="li_tabs"><a href="#idTab3"><h3 class="idTabHrefShort page-product-heading">{l s='Volume discounts'}</h3></a></li>{/if}
        {if $attachments}<li class="li_tabs"><a href="#idTab9"><h3 class="idTabHrefShort page-product-heading">{l s='Download'}</h3></a></li>{/if}
        {if isset($accessories) AND $accessories}<li class="li_tabs"><a href="#idTab4"><h3 class="idTabHrefShort page-product-heading">{l s='Accessories'}</h3></a></li>{/if}
        {if isset($product) && $product->customizable}<li class="li_tabs"><a href="#idTab10"><h3 class="idTabHrefShort page-product-heading">{l s='Product customization'}</h3></a></li>{/if}
        {if isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB}{$HOOK_PRODUCT_TAB}{/if}
    </ul>
</div>
<div class="clearfix"></div>

Il faut ensuite rajouter les "ID" sur les sections pour faire le système d'ancres en relation avec le menu.

Pour ce faire dans le menu créé vous pouvez voir que dans les <li> il y a un lien <a> qui a un "href" qui correspond à l'ID de la section à afficher.

Prenons la première <li> du menu

{if $product->description}<li class="li_tabs"><a href="#idTab0"><h3 class="idTabHrefShort page-product-heading">{l s='More info'}</h3></a></li>{/if}

on repère la traduction du titre du menu qui correspond au titre de la section

{l s='More info'}

on recherche donc plus bas la section dont le titre est "More info" est on rajoute l'ID

<section class="page-product-box">

devient

<section id="idTab0" class="page-product-box">

répétez l'operation pour : "Pack content", "Data sheet", "Download", "Accessories", "Product customization".

Si vous avez des modules dans la page produit vous pouvez si vous le souhaitez rajouter leur titre dans le menu onglet.

L'affichage du module dans la page produit s'effectue au minimum avec 2 fichiers tpl.

Un fichier "tab.tpl" qui affichera le titre l'onglet dans le menu qui sera sur le HOOK_PRODUCT_TAB, et un autre tpl (généralement nom_du_module.tpl) qui affichera le "content" du module sur le HOOK_PRODUCT_TAB_CONTENT grâce à la section dans le product.tpl.

<section class="page-product-box">
    {$HOOK_PRODUCT_TAB}
    {if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if}
</section>

Vous constaterez qu'il n'y a pas de balise <li></li> ni de balise <a></a> car elle doivent être ajoutées dans les tpl des modules.

Prenons par exemple le module de commentaires produit de Prestashop.

Éditez le fichier tab.tpl (themes\default-bootstrap\modules\productcomments\tab.tpl).

Vous pouvez voir que la <div> a une ID (id="#idTab5") mais il lui manque la <li></li> et le <a></a> il faut donc modifier

<h3 id="#idTab5" class="idTabHrefShort page-product-heading">{l s='Reviews' mod='productcomments'}</h3> 

en

<li class="li_tabs"><a href="#idTab5"><h3 class="idTabHrefShort page-product-heading">{l s='Reviews' mod='productcomments'}</h3></a></li>

Éditez le fichier productcomments.tpl (themes\default-bootstrap\modules\productcomments\productcomments.tpl)

Vous pouvez voir que la première ligne a bien l'ID correspondante.

<div id="idTab5">

Ce module affiche sous la description courte ou sous le prix un autre tpl pour inciter les clients à noter le produit.

Éditez le fichier productcomments-extra.tpl (themes\default-bootstrap\modules\productcomments\productcomments-extra.tpl).

Vous constatez à la ligne 49 qu'il y a un lien avec l'ID correspondante.

<a href="#idTab5" class="reviews">

Si vous avez acheté et utilisé le module loulou66TabMedia vous n'avez rien à modifier, le module génère des ID automatiquement.

Il ne reste plus qu'à ajouter quelques lignes de CSS pour bien afficher le menu onglet.

Éditez le fichier product.css (themes\default-bootstrap\css\product.css).

A la fin du fichier rajoutez ces lignes.

/* menu onglet */
#product .product_tabs {float:none; margin-bottom: 10px; height: 50px;}
#product .product_tabs .ul_tabs {margin-bottom: 10px; height : 50px;}
#product .product_tabs .li_tabs {float: left; height: 50px; border-right: 1px solid #000; list-style-type: none;}
#product .product_tabs .li_tabs:last-child {border-right: none;}

Pensez à vider le cache de Prestashop et de votre navigateur pour afficher le résultat

@++

Loulou66