Comment afficher le temps de lecture d’un article sur Shopify

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 Ressources (Assets) – Vous allez trouver un fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise ! 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 Ressources (Assets) on va essayer de trouver un base.css, theme.css, style.css ou autre fichier .css que votre thème utilise

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

Ce tutoriel existe aussi en vidéo

Bon tuto à tous !

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

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 6 commentaires

  1. Marc

    3 Août 2020 Répondre

    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. Dgeo Dev

      5 Août 2020 Répondre

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

  2. fabien

    10 Nov 2020 Répondre

    salut dev, merci pour les tutos,
    sur le theme debut ds le theme.js cela ne fonctionné pas une fois coller à fin du thème,
    cependant j’ai testé de le coller plus haut apres ceci
    : // Youtube API callback
    // eslint-disable-next-line no-unused-vars
    function onYouTubeIframeAPIReady() {
    theme.Video.loadVideos();
    theme.ProductVideo.loadVideos(theme.ProductVideo.hosts.youtube);
    }

    si ça peut aider 😉

    1. Dgeo Dev

      11 Nov 2020 Répondre

      Hello 🙂 cool merci c’est sympa et ca pourra surement aider la commu 😉

  3. Jordan

    3 Déc 2020 Répondre

    Hello, je suis sur le thème wookie, j’ai mis mon dselector article-template mais cela ne fonctionne pas. Une idée de ce qui peut bloquer ?
    Continue comme ça

    1. Dgeo Dev

      4 Déc 2020 Répondre

      Hello et merci pour le commentaire 🙂 non navré je ne connais pas ce thème 🙁 le mieux serait de demander à leur support 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier