Nous allons voir dans ce tutoriel comment créer un bouton lire la suite sur Shopify
Nous avons parfois des descriptions trop longues et d’un point de vue ergonomique ce n’est pas toujours très sexy…
L’idée de ce tutoriel shopify est de vous proposer un bouton lire la suite qui affichera le reste de votre description de vos fiches produits, pages ou collections.
Vous pouvez voir le résultat sur cette page: voir la démo de ce tutoriel.
Vous allez surement vous poser la question suivante… Et côté SEO ce n’est pas pénalisant ?
Et bien non étant donné que l’affichage ou non-affichage est géré en Javascript, les moteurs de recherche liront le contenu complet 😉
Passons maintenant dans le fil du sujet !
Côté tutoriels – code shopify
Vous allez dans un premier temps devoir trouver votre fichier Css ou Scss selon le thème.
Rendez-vous dans les fichiers de votre thème (Personnaliser – Modifier code) – Assets et trouvez un des fichiers suivants:
- theme.scss.liquid
- timber.sccs.liquid
- style.sccs.liquid
- bref un xxx.scss.liquid :p
Déroulez le fichier et mettez vous tout en bas pour coller le code suivant:
#dg-rm-more {display: none; }
#dg-rm-more p:last-child { margin-bottom:15px; }
#dg-rm-dots:after { display:inline-block; content:"..."; }
Dans un deuxième temps trouvez dans le même dossier (Assets) un fichier .js généralement:
- theme.js.liquid
- timber.js.liquid
- style.sccs.liquid
- bref un xxx.js.liquid :p
Déroulez le fichier et mettez vous tout en bas pour coller le code suivant:
var dgReadMoreText1 = "+ En savoir plus";
var dgReadMoreText2 = "- En savoir moins";
function dgReadMore() {
var dots = document.getElementById("dg-rm-dots");
var moreText = document.getElementById("dg-rm-more");
var btnText = document.getElementById("dg-rm-btn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = dgReadMoreText1;
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = dgReadMoreText2;
moreText.style.display = "inline";
}
}
Nous avons donc à ce stade le système pour créer un bouton lire la suite dynamique qui permettra d’afficher une description complète.
Côté Shopify – Éditeur
Ouvrez une fiche produit ou autres contenus avec un éditeur de texte et cliquez sur le <> (show html) afin de passer en mode code.
Copiez/collez le code suivant et passons à l’explication !
<h2>Zone "En savoir plus" de la description</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae. <span id="dg-rm-dots"></span></p> <div id="dg-rm-more"> <p><strong>Zone à afficher au clic sur "En savoir plus"</strong></p> <p>erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p> <p>Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.</p> </div> <button id="dg-rm-btn" onclick="dgReadMore()">+ En savoir plus</button>
Écrivez votre texte normalement, à l’endroit ou vous souhaitez couper votre texte mettez la balise suivante:
<span id="dg-rm-dots"></span>
Ensuite englobez le reste de la description dans la balise div suivante (n’oubliez pas la fermeture </div> !!!):
<div id="dg-rm-more">la suite de votre description qui s'affichera au clic sur le bouton "En savoir plus".</div>
Il nous reste plus qu’à ajouter le bouton « En savoir plus » en collant la balise suivante tout en bas de votre description:
<button id="dg-rm-btn" onclick="dgReadMore()">+ En savoir plus</button>
Si vous souhaitez changer les intitulés, il faudra le faire sur le bouton ci-dessus mais également dans le fichier .js.liquid.
Attention à bien respecter les ouvertures et fermetures des bouts de codes afin d’éviter de casser votre mise en page !!!
Le <span id= »dg-rm-dots »></span> doit idéalement être avant une fermeture de paragraphe de ce genre </p> pour que les 3 petits points soient bien collé au texte 😉
Bon courage pour ce tutoriel souvent demandé mais assez complexe à mettre en place efficacement !
