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:

Pour speedfly

Remplacer les 2 occurrences article par .template-article

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

  function calcReadingTime() {
	
    const nombreMotsParMinute = 240;
    const texteAvantTemp= "Environ";
    const texteApresTemp= "minutes de lecture";
    // true pour oui et false pour non
    const afficherSeparateur = false
    
    if(document.querySelector("article")) {

    const SelectContent = document.querySelectorAll("article .rte");
    let content = SelectContent[0].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();
})();

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: 0 sur 0 votes]

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & 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