Tips PrestaShop #3 : Ajouter une Popup Guide des tailles sur la fiche produit
Facilitez la prise de décision de vos clients en ajoutant un guide des tailles accessible en un clic ! Plutôt que de rediriger vos visiteurs vers une nouvelle page, cette astuce vous permet d’afficher votre page CMS « Guide des tailles » directement dans une popup sur la fiche produit
📌 Pourquoi ajouter un guide des tailles en modale sur Prestashop ?
Dans une boutique e-commerce, proposer un guide des tailles clair et accessible permet de :
- ✔ Réduire le taux de retour en aidant les clients à choisir la bonne taille.
- ✔ Améliorer l’expérience utilisateur en évitant de rediriger vers une autre page.
- ✔ Optimiser le taux de conversion en supprimant les doutes des acheteurs.
Avec un peu de Smarty, JavaScript et CSS, nous allons ajouter un lien sous la description courte des produits qui ouvrira une popup modale Bootstrap contenant la page CMS du guide des tailles.
🛠 Étape 1 : Modifier product.tpl pour ajouter le lien
Ouvrez le fichier product.tpl dont voici le chemin :
/themes/votre_theme/templates/catalog/product.tpl
recherchez la ligne :
<div id="product-description-short-{$product.id}" class="product-description">{$product.description_short nofilter}</div>
Juste en dessous, ajoutez le code suivant :
<p id="guide_tailles">
<a href="#" id="open_guide" class="js-modal" data-cms-id="6">
📏 Voir le guide des tailles
</a>
</p>
📌 Important : dans : data-cms-id= Remplacez 6 par l’ID correct de votre page CMS correspondant à votre Guide des tailles.
Vous trouverez l’id de votre page dans l’administration, dans : apparence > pages
🎭 Étape 2 : Ajouter le JavaScript pour ouvrir la modale
Ouvrez le fichier suivant (s’il n’existe pas vous pouvez au préalable le créer) :/themes/votre_theme/assets/js/custom.jsAjoute le code suivant :
document.addEventListener("DOMContentLoaded",function(){let guideLink=document.querySelector("#open_guide");if(guideLink){guideLink.addEventListener("click",function(e){e.preventDefault();let cmsId=guideLink.getAttribute("data-cms-id");let cmsUrl="/index.php?controller=cms&id_cms="+cmsId+"&content_only=1";$.get(cmsUrl,function(data){let cmsContent=$(data).find(".page-cms").html();if(!cmsContent){console.error("Impossible de récupérer le contenu de la page CMS.");return}
let modalHtml=`
<div id="modal_guide_tailles" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Guide des tailles</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
${cmsContent} <!-- Contenu CMS injecté directement -->
</div>
</div>
</div>
</div>`;$("body").append(modalHtml);$("#modal_guide_tailles h5.modal-title").css("display","none");$("#modal_guide_tailles .modal-header").css({"padding":"15px 15px 0px 15px","border-bottom":"none"});$("#modal_guide_tailles").modal("show");$("#modal_guide_tailles").on("hidden.bs.modal",function(){$(this).remove()})}).fail(function(){console.error("Erreur de chargement du guide des tailles.")})})}})📌 Explication du script :
- ✔ Charge dynamiquement le contenu du Guide des tailles en AJAX.
- ✔ Utilise
content_only=1pour afficher uniquement le texte, sans header/footer. - ✔ Affiche le guide dans une popup modale Bootstrap.
.
🎨 Étape 3 : Ajouter du CSS pour améliorer l’affichage
Ajoute ce style dans global.css pour un meilleur affichage :
#guide_tailles {text-align: left;margin-top: 20px;margin-bottom: 20px;display: inline-block;}
.open-guide {color: #000;font-weight: bold;text-decoration: none;}
.open-guide:hover {text-decoration: underline;}
#guide_tailles a#open_guide {background:#fff;border:1px solid #444;padding:8px;color:#444;font-size: 0.85rem;font-weight: 700;}
#guide_tailles a#open_guide:hover {border:1px solid #000;padding:8px;color:#000;} 📌 Personnalisation possible :
- ✔ Modifier la couleur de fond du bouton (
background). - ✔ Changer la couleur du texte (
color). - ✔ Ajuster l’épaisseur et la couleur de la bordure (
border). - ✔ Modifier la taille et le style du texte (
font-size,font-weight).
.
✅ Résultat attendu
Après ces modifications :
- 🔹 Un lien « 📏 Voir le guide des tailles » apparaît sous la description courte du produit.
- 🔹 En cliquant dessus, une popup s’ouvre avec uniquement le contenu du Guide des tailles.
- 🔹 Le titre « Guide des tailles » dans la modale est masqué.
- 🔹 Le padding de la modale est ajusté pour un meilleur affichage.
✨ Aperçu attendu :
.
📌 À suivre…
Ce Tips PrestaShop améliore l’expérience utilisateur et réduit les retours produits en rendant le Guide des tailles accessible instantanément. 💬 Des questions ou suggestions ? Partagez vos retour en commentaire ! 😊
Laisser un commentaire