Ajouter un bouton lire la suite dans une description de catégorie sur Prestashop 1.7

Ajouter un bouton lire la suite dans une description de catégorie sur Prestashop 1.7

Ce code est intéressant et a été adapté pour tronquer une description et ajouter un bouton « lire la suite » dans la description d’une catégorie de Prestashop 1.7 : https://codepen.io/paulobrien/pen/JXrxBg

Voici un tuto en 2 étapes simples.

Etape 1

Ajouter la classe « truncate » à votre div (en général, il faut modifier le fichier nommé « category » dans votre thème).

<div class = "truncate" > 

Étape 2

Accédez à custom.js (quelque part dans votre dossier de thème sur votre espace FTP) et ajoutez le code suivant.

// requires jquery
$(document).ready(function() {
  (function() {
    var showChar = 400;
    var ellipsestext = "...";

    $(".truncate").each(function() {
      var content = $(this).html();
      if (content.length > showChar) {
        var c = content.substr(0, showChar);
        var h = content;
        var html =
          '<div class="truncate-text" style="display:block">' +
          c +
          '<span class="moreellipses">' +
          ellipsestext +
          '&nbsp;&nbsp;<a href="" class="moreless more">Lire la suite</a></span></span></div><div class="truncate-text" style="display:none">' +
          h +
          '<a href="" class="moreless less">Voir moins</a></span></div>';

        $(this).html(html);
      }
    });

    $(".moreless").click(function() {
      var thisEl = $(this);
      var cT = thisEl.closest(".truncate-text");
      var tX = ".truncate-text";

      if (thisEl.hasClass("less")) {
        cT.prev(tX).toggle();
        cT.slideToggle();
      } else {
        cT.toggle();
        cT.next(tX).fadeToggle();
      }
      return false;
    });
    /* end iffe */
  })();

  /* end ready */
});

Le code sera tronqué à partir de 400 caractères car

var showChar = 400;

Ce chiffre peut bien entendu être modifié.

Fonctionne sur PS 8.X et PS 1.7.X