Changer vignette Nouveau, Promo etc...

[Serial]

Bonjour,

 

J'aimerai changer mes vignettes "Nouveau", "Promo" etc... du thème par défaut.

 

J'ai vu que c'etait monté en CSS mais j'aimerai recréer la vignette en image pour l'insérer au niveau des produits.

Je suis un peu perdu au niveau de l'intégration ensuite de cette image.

[Eprz]

Bonjour @Serial,

 

Les "tabulations" Nouveautés, Promotions, Meilleures ventes etc... proviennent de modules (blockbestsellers ou homefeatured par exemple, vérifiez les modules présents depuis votre back-office dans Modules -> Positions et recherchez le hook "displayHomeTab").

 

Si vous voulez modifier proprement ces affichages, voici ce que je vous conseil (je vais prendre en exemple le module "Meilleures ventes", c'est la même chose pour les autres modules initialement présents dans Prestashop) : 

 

- Ouvrez le fichier .tpl que vous souhaitez modifier et copiez l'intégralité du code.

Exemple : votresite/modules/blockbestsellers/views/templates/hook/tab.tpl.

Normalement, le code se résume à ça :

<li><a data-toggle="tab" href="#blockbestsellers" class="blockbestsellers">{l s='Best Sellers' mod='blockbestsellers'}</a></li>

- Dans votre thème (themes\votretheme\modules), créez pour chaque module ciblé un fichier tab.tpl.

Exemple : votresite/themes/votretheme/modules/blockbestsellers/tab.tpl

 

Collez dans ce fichier ce que vous avez précédemment copié.

<li><a data-toggle="tab" href="#blockbestsellers" class="blockbestsellers">{l s='Best Sellers' mod='blockbestsellers'}</a></li>

Modifiez la ligne collée dans le nouveau fichier tab.tpl par : 

<li><a data-toggle="tab" href="#blockbestsellers" class="blockbestsellers"><img src="{$img_dir}/votre-image.jpg" alt="{l s='Balise à remplir pour l'accessibilité' mod='blockbestsellers'}" title="{l s='Balise à remplir pour la SEO' mod='blockbestsellers'}"/></a></li>

{$img_dir} va renvoyer vers votre dossier img de votre thème, ce qui vous permet de garder cette configuration exclusivement pour votre thème.

 

Ces étapes sont à répéter pour tous les modules présents dans le hook displayHomeTab.

 

Ensuite à vous de jouer niveau CSS pour calibrer l'image dans les différentes résolutions prévues (responsive).

 

 

En espérant vous avoir aidé.

 

Cordialment,

Elia PEREZ.

Edited August 4, 2015 by Eprz (see edit history)