Nous allons voir dans ce tutoriel comment mettre en place un système de calcul du temps de lecture sur Shopify. On peut voir ce genre de chose sur certains blogs assez renommés ! L’avantage est qu’en 1 coup d’oeil l’internaute saura combien de temps cela va lui prendre de lire cet article.

Le résultat est ici 🙂 https://dgeodev.myshopify.com/blogs/news/article-2

Comment ça fonctionne ?

L’idée est donc de vous donner la main sur des variables vous permettant d’administrer simplement ce système. Vous aurez donc la main sur les choses suivantes:

  • Le nombre de mots estimé de lecture par minute,
  • Les différents textes,
  • L’activation d’une petit bordure de séparation.

Comment mettre cela en place ?

L’installation sur Shopify va se dérouler en 3 étapes: l’affichage, l’activation du script et la mise en forme.

La partie HTML

Nous allons dans un premier temps déterminer le placement du texte du style: « Environ 3 minutes de lecture ».

Rendez-vous Boutique en ligne – Actions – Modifier le code et ouvrez le dossier Sections – Vous allez trouver un fichier article-template.liquid. Maintenant il va falloir trouver un bon emplacement, je vous laisser donc écrire des toto1, toto2 etc à divers endroits afin de déterminer la zone la plus adaptée à votre thème.

ps: si vous n’avez d’article-template.liquid dans le dossier Sections essayez de trouver dans le Dossier Templates un article.liquid.

Voici un exemple de placement pour le thème Debut:

Il ne vous reste plus qu’à copier/coller le code ci-dessous:

<div class="readingTime"></div>

La partie JS

Plaçons maintenant le script permettant de calculer le ratio nombre de mots/temps de lecture.

Rendez-vous Boutique en ligne – Actions – Modifier le code et ouvrez le dossier Assets – Vous allez trouver un fichier theme.js, theme.js.liquid, timber.js ou app.js ! bref un fichier .js 🙂 mettez vous tout en bas du fichier et copiez/collez le code ci-dessous:

Vous allez pouvoir modifier les valeurs suivantes afin de personnaliser au mieux le système:

// calculateur de temps de lecture  
(function(){

  function calcReadingTime() {

    const nombreMotsParMinute = 240;
    const texteAvantTemp= "Environ";
    const texteApresTemp= "minutes de lecture";
    const container= "article";

    // true pour oui et false pour non
    const afficherSeparateur = false

    if(document.querySelector(container)) {

      const SelectContent = document.querySelectorAll(`${container} .rte p, ${container} .rte h2, ${container} .rte h3, ${container} .rte li`);

      let content;  
      for (i=0; i < SelectContent.length; i++) {
        content += SelectContent[i].innerHTML;
      }

      content = content.replace(/<[^>]*>/g," ");
      content = content.replace(/\s+/g, ' ');
      content = content.trim();
      const textLength = content.split(" ").length;    

      const wordsPerMinute = nombreMotsParMinute; // Average case.
      let result;  

      if(textLength > 0){
        let value = Math.ceil(textLength / wordsPerMinute);
        if(value > 1) {
          result = `${texteAvantTemp} ${value} ${texteApresTemp}`;
        }
        else {
          result = `Moins d'${value} ${texteApresTemp}`;
        }      
      }
      document.querySelector(".readingTime").innerText = result;
      if(afficherSeparateur) {
        document.querySelector('.readingTime').classList.add("add-border");
      }
    }
  }

  calcReadingTime();
})();

Pour speedfly

Remplacer le  container="article" par container=".template-article"

La Partie CSS

Pour terminer nous allons placer une petite mise en forme que vous pourrez facilement adapter avec un peu de connaissance CSS.

Toujours dans le dossier Assets on va essayer de trouver un theme.scss.liquid, style.scss.liquid ou un timber.scss.liquid, cela peut aussi être un nomdufichier.css tout court !

Mettez vous une fois encore tout en bas du fichier et copiez/collez le code suivant:

.readingTime {
  color: #666;
  font-style: italic;
}
.readingTime:before {
  content: "";  
  display:none;
  margin: 15px auto;
  border-top: 1px solid #666;
  width: 30px;
}
.readingTime.add-border:before {
  display: table;
}

Légende: les #666 détermine la couleur hexadécimale du texte et de la bordure. si vous souhaitez modifier ces valeurs je vous invite à taper sur google: « generator code hexadecimal css »

La version vidéo sera disponible à partir de lundi 😉

Voila vous désormais installez sur Shopify une petite phrase permettant à vos lecteurs de savoir le temps qu’ils vont passer à lire vos articles passionnants :p

Bon tuto à tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 votes]

Cet article a 2 commentaires

  1. J’ai suivi a la lettre ton tuto pour faire apparaître le temps de lecture sur les articles de blog et rien n’apparaît. Pourquoi?

    1. Hello, surement à cause du thème qui n’est pas compatible 🙂

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine