Comment Limiter l’affichage d’un Texte sur Shopify

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 Ressources (Assets) et votre fichier .js … Généralement c’est theme, global, 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.

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 4 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 4 commentaires

  1. Victorine

    3 Mai 2021 Répondre

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

      4 Mai 2021 Répondre

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

  2. Diop Abdoul Aziz

    3 Juil 2021 Répondre

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

      5 Juil 2021 Répondre

      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
×
×

Panier