Passer au contenu principal

Intégrer un widget sur une page unique (homepage...)

La solution la plus simple : parfaite pour les pages uniques (homepage, blog, landing), plutĂŽt que pour des pages produits dynamiques.

Mis à jour il y a plus de 6 mois

Prérequis

- Accùs administrateur à l’interface PrestaShop.

- AccĂšs au serveur d’hĂ©bergement (SFTP/SSH) ou Ă  un dĂ©pĂŽt Git pour dĂ©ployer les fichiers du thĂšme.

- Idéalement, intervention par votre agence ou votre équipe technique.

Recommandation
Travaillez sur un environnement de prĂ©production et sauvegardez le thĂšme avant toute modification. PrivilĂ©giez un thĂšme enfant pour Ă©viter d’écraser vos changements lors d’une mise Ă  jour.

1) Télécharger le thÚme

  • Il est possible de rĂ©cupĂšrer les fichiers du thĂšme Prestashop.

    1. Depuis l’admin PrestaShop, Apparence ⇒ ThĂšme & logo → Exporter le thĂšme actif (coin supĂ©rieur droit).
      ​

    2. Depuis le serveur

      Récupérez le répertoire du thÚme directement dans les fichiers (ex. themes/<votre_theme>).

2) Modifier le thĂšme

2.1 Identifier le template Ă  mettre Ă  jour

Selon la page ciblée, localisez le fichier adéquat. Exemples pour les thÚmes Classic / Hummingbird :

  • Fiche produit : themes/<votre_theme>/templates/catalog/_partials/product-additional-info.tpl

  • Accueil : themes/<votre_theme>/templates/index.tpl

  • CatĂ©gorie / listing : themes/<votre_theme>/templates/catalog/listing/category.tpl

  • Page CMS : themes/<votre_theme>/templates/cms/page.tpl

2.2 Choisir la position dans le code

InsĂ©rez le widget Ă  l’endroit prĂ©cis oĂč il doit apparaĂźtre dans le template.

Astuce : repérez un élément ou un conteneur existant (classe CSS ou bloc Smarty) pour positionner le widget correctement.

2.3 Copier/Coller le code JOIN

Important – Fiche produit : pour un widget de product page, reportez-vous Ă  la documentation dĂ©diĂ©e (remplacez LINK TO PAGE PRODUIT par l’URL rĂ©elle).

Collez le code du widget rĂ©cupĂ©rĂ© depuis le JOIN Studio dans le fichier .tpl, encadrĂ© par {literal} 
 {/literal} afin d’éviter l’interprĂ©tation par Smarty.

Exemple de code final :

{literal} 
<script>function sendAudienceData(a){window.jDataLayer=window.jDataLayer||[],window.jDataLayer.push({type:"audience",data:a})}</script> 
<div id="join-widget-inspiration-gallery" style="display:block;"></div> 
<style> #join-widget-inspiration-gallery { margin: 5px 2px; min-height: 114px; width: 100%; } @media (min-aspect-ratio: 3/4) { #join-widget-inspiration-gallery { min-height: 132px; } } </style>
<script src="https://join-stories.com/stories/widgets/inspiration-gallery/index.js" data-join-widget-id="join-widget-inspiration-gallery" data-join-widget-alias="inspiration-gallery" type="text/javascript" ></script> 
{/literal}

3) DĂ©ployer et vider le cache

  1. DĂ©ployez les modifications du thĂšme sur le serveur (SFTP/CI).

  2. Videz le cache pour prendre en compte les changements :

    ParamĂštres avancĂ©s → Performances → Vider le cache.

  3. Si la compilation Smarty est activée, forcez une recompilation si nécessaire.

Avez-vous trouvé la réponse à votre question ?