Nous allons voir dans ce tutoriel comment limiter le nombres de caractères d’une phrase sur Shopify. Pourquoi faire une telle chose ? C’est pour conserver une uniformité au niveau des éléments qui en ont besoin comme par exemple les titres des listes de produits. En effet lorsque qu’un titre des produits est trop long cela passe sur 2 lignes poussant donc les éléments du dessous plus bas ! De ce fait cela rend non homogène le système de Grilles.

Comment mettre cela en place ?

Rendez-vous dans Boutique en ligne –  Actions – Modifier le code – Trouvez le dossier Assets et votre fichier .js.liquid ou js … Généralement c’est theme, style, app ou timber 🙂  Une fois le fichier trouvé mettez vous tout en bas et copiez/collez le code suivant:

(function() {
  const dgTruncateTextElements = document.querySelectorAll('.dg-truncate-text');
  
  function dgTruncateText(string, n) {
    if (string.length > n) {
      return string.substr(0, n - 1) + "...";      
    }
    else {
     return string; 
    }  
  }
  
  function dgTruncateTextLoop(n) {
    dgTruncateTextElements.forEach(element => {     
      let newText = dgTruncateText(element.textContent, n);    
      element.textContent = newText;
    });
  }   
  
  if (window.matchMedia("(max-width: 767px)").matches) {
    dgTruncateTextLoop(20);
  } 
  else {
    dgTruncateTextLoop(35); 
  }
  
})();

Ensuite il vous suffit de trouver dans les fichiers ou dans votre éditeur de texte une zone ou phrase que vous voulez tronquer… Généralement c’est les titres des fiches produits au niveau des collections – Vous allez donc devoir ajouter la class css ci-dessous à un de vos éléments du DOM ! Je vous invite à visionner la vidéo pour plus de précisions !

dg-truncate-text

Personnalisation

Pour modifier la longueur max du texte sur grand écran il vous suffit de modifier la valeur 35. Pour les petits écrans vous pouvez modifier la valeur 20.

La version vidéo arrive bientot…

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

🤗 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 4 commentaires

  1. Merci beaucoup pour ce poste très utile et vos explications très compréhensibles.

    Alors dans le même ordre d’idée, voudriez-vous nous dire « Comment changer la langues des titres et contenus des produits en ligne » sans passer par les méthodes manuelles (Google traduction, speedL, etc.) ? à partir de « translation-lab-language-management.liquid » par exemple ?
    Merci de votre réponse et excellente semaine à vous.

    1. Bonjour, le mieux est de passer par une app de type weeglot

  2. Bonjour, merci pour le tuto, j’en avait vraiment besoin… Cependant je n’arrive pas a trouver la classe pour le deuxieme code, donc je bloque..

    1. Hello, la classe pour le 2ème code ? y a qu’un code pour ce tutoriel 🙂 vous parlez peut être d’un autre tuto ?

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