Font-Awesome Prestashop

Prestashop 1.7 – Module bloc texte personnalisé (ép.11)

Dans les anciennes versions de Prestashop on avait le module éditorial pour dynamiser l’accueil de la boutique… En 1.7 c’est fini… poussez-vous, faites de la place pour le nouveau module texte personnalisé !

Episode 11

Ce module de bloc de texte personnalisé est assez pratique, car il permet d’ajouter du code HTML personnalisé en page d’accueil. Seul reproche… pourquoi le faire uniquement sur l’accueil ? C’est dommage de se limiter à un seul bloc, on devrait pouvoir logiquement greffer du contenu où l’on a envie. Mais bon, c’est aussi une règle commerciale (de ne pas tout donner), vous pouvez regarder chez MyPresta, pour des blocs HTML personnalisés.

Ce qu’on va faire c’est intégrer la librairie Font-Awesome, pour obtenir rapidement un visuel. L’avantage de cette librairie c’est que ça vous permet d’avoir des icônes 100% dynamiques et personnalisables et de garantir une uniformité. Bien sûr c’est du grand classique, mais c’est devenu un standard sur le web… pourquoi s’en priver.

Parfois je me demande pourquoi ce genre de librairie n’est pas incluse nativement dans Prestashop, car c’est tellement pratique pour faire de l’intégration. Vous pourrez aussi ensuite constater que l’intégration que l’on va faire ensemble, sera aussi valable pour une utilisation à l’extérieur du module.

Une dernière précision, pensez à vraiment mettre en place ce bloc pour créer un peu plus de contenu en page d’accueil, car sur beaucoup de boutiques e-commerce, le contenu texte en homepage est bien souvent trop faible et diminue les chances d’un bon positionnement.

Ressources

Pour ce tutoriel vous avez à disposition :

  • Fichier ps_customtext.php (fichier du module modifié)
  • Fichier sample_content.html (exemple de contenu HTML à intégrer)

Télécharger

Au programme

  • Dans le back-office le module s’affiche au pluriel, mais en fait celui-ci propose un seul bloc éditable (dommage).
  • Intégration de Font-Awesome avec une ressource dédiée à votre adresse email (plus simple d’intégrer une source distante).
  • Modification du module natif en ajoutant un nouveau point d’accroche dans le header, ainsi que le nouveau fichier JS.
  • Contrôle de l’exécution du HOOK et analyse du code source.
  • Assurez-vous de bien mettre votre identifiant sur le lien du fichier JS.
  • Lors de l’intégration de l’icône ajoutez un espace insécable.
  • Avec Layoutit, générez une structure de base sur 3 colonnes avec paragraphes et boutons, puis ensuite retouchez le contenu (avec les icônes) et effectuez des « copier/coller », jusqu’à quand le résultat vous donne satisfaction.
  • Profitez aussi de l’intégration des icônes dans la fiche produit.

30 commentaires sur “Prestashop 1.7 – Module bloc texte personnalisé (ép.11)”

  1. bonjour,
    je suis super fan de vos vidéo sur YouTube c’est trop bien expliqué.
    je suis sous prestashop 1.7 et j’ai suivi toutes les vidéos mise en ligne par votre société.
    sur le tuto 11 j’ai une petite question comment faire ajouté un lien aux boutons crée?
    autre chose y’ aurai t-il un moyen de changer la couleur du footer?

    cordialement.

    Répondre

    1. Bonjour,

      Concernant les liens il suffit de modifier la balise « href ».

      <a class="btn btn-primary" href="#">View details »</a>

      en 

      <a class="btn btn-primary" href="http://votre-site.com/monlien.html">View details »</a>

      Dans le cas présent il s’agit de code HTML, vous pouvez regarder sur internet sur comment faire des liens en HTML.

      En ce qui concerne la customisation CSS, je note cela dans ma liste… je vais proposer une méthode pour skinner rapidement les éléments principaux.

      Merci pour votre visite !

      Répondre

  2. Bonjour, aussi super-fan de votre blog et apprenti sorcier de Prestashop (directement 1.7).
    Cependant une petite précision après des multiple tentatives de mettre le lien en marche avec le bouton crée.
    Il faut modifier la ligne

    Default

    en

    	
<a href="http://votre-site.com/monlien.html" rel="nofollow"> Default </a>

    Bien sure en modifiant « http://votre-site.com/monlien.html » vers le lien de votre page en question.

    A très bientôt

    Répondre

      1. Bonjour,

        Merci encore pour tous ces tutos qui nous sont d’une grande aide.
        Cela fait plusieurs tentatives que j’essaie de mettre un lien sur ces buttons. J’ai bien fait la modification que vous proposez dans vos réponses le 19 mars 2017. Par contre, je ne comprend pas la modification que propose Philippe Kingmans. J’ai peur qu’elle ne s’affiche pas correctement sur mon(mes) navigateur(s) = j’ai juste le mot default et le mot default sous-ligné écrits.
        Pourriez-vous m’expliquer quelles sont les modifications à réaliser ?
        Merci d’avance.
        Cordialement

        Répondre

          1. Bonjour,

            Grand merci pour votre aide. Cela est bien plus clair. Tout fonctionne désormais.

            Bonne journée et à bientôt.

  3. Bonjour, vraiment tes tutos sont une grande aide pour nous les débutant, ma préoccupation est la suivante les fichiers que tu mets en bas des vidéos sont déjà personnalisé avec la vidéo n’est ce pas? si tel est le cas il suffit simplement de faire un remplacement de fichiers peut être que la question a l’air idiot mais je voulais juste avoir le cœur net .
    merci

    Répondre

    1. Hello,

      Oui tout à fait, ce sont les fichiers que j’ai utilisé dans la vidéo, ils peuvent service de base… Mais il faut toujours vérifier si le fichier a évolué (sur votre propre version), car vous pouvez avoir une version plus récente de Prestashop… et parfois il peut y avoir des nouvelles lignes de code.

      Bonne continuation !

      Répondre

  4. bonsoir cher webbax. merci pour tes tutos qui me donnent de plus en plus à aimer prestashop.
    en effet, je debute avec prestashop et je veux integrer un moyen de paiement dans le moyen de paiement qui me redirige vers une page de mon operateur de paiement.
    voici le code à integrer:

    Making Payment via eTranzact

    <?php
    //Generate your own unique transId per transaction.
    $transId = "123456789101112";
    //if ($transId==null) $transId="";
    $terminalId = "0590000001";
    $success = $HTTP_POST_VARS["SUCCESS"];
    $amount = $HTTP_SESSION_VARS["TOTAL"];
    //session_register("TOTAL");
    //echo "Amount Charged: ".$amount;
    $descr = $HTTP_GET_VARS["DESCRIPTION"];
    if ($descr == null) $descr = "";
    if ($terminalId == null) $terminalId = "0590000001";
    //echo "Requesting Transaction ID . . . ";
    if ($success == null){ //or success = "" for php
    echo " »;
    echo «  »;
    echo «  »;
    echo «  »;
    echo «  »;
    echo «  »;
    echo «  »;
    echo «  »;
    echo «  »;
    echo «  »;
    echo « var form = document.forms[0]; »;
    echo « form.submit() »;
    }else if ($success == « 0 »){
    //deal with successful transaction
    echo « Transaction Successfull »;

    session_register(« transId »);

    }else //Deal with Timeout Here, Transaction ID no more valid
    echo « Error while requesting for transaction authorisation, Transaction ID no more valid « ;
    ?>

    j’ai vraiment besoin de votre aide, version prestashop 1.7.2.3.
    merci coordialement

    Répondre

    2. Bonjour,

      Pour cela mieux vaut regarder avec la solution eTranzact pour voir s’ils proposent un plugin Prestashop déjà prêt à utilisation. Ce n’est pas forcément une bonne idée de devoir faire une intégration manuelle, car il faut penser à tous les cas de figure… créer son propre processus de paiement je déconseille (sauf si techniquement on arrive à le faire soi-même). Sinon utilisez plutôt Stripe & Paypal, des solutions de paiement où les modules existent déjà et il n’y a pas besoin d’investir sur un contrat au départ.

      A bientôt !

      Répondre

      1. ok pas de soucis, merci pour vos conseils. j’en prend acte.
        etranzact n’a pas cette solution en prestashop. donc la solution changer de moyen de paiement.
        merci cordialement

        Répondre

  5. Bonjour,
    Vos tuto sont vraiment parfaits et très pratiques pour les novices en Prestashop comme moi.

    J’aimerai pouvoir utiliser Font Awesome sur l’ensemble du site. Comment mettre en place la bibliothèque sans passer par le module customtext qui n’est pas compatible avec ma version de PS ?

    Merci pour ton aide.

    Répondre

  6. Bonjour,
    Merci tu es vraiment très fort !
    Plus je regarde de tes vidéos plus je me dis qu’il me manque une grosse formation sur le CSS js etc …
    De plus tes explications sont très claire et ton code tout aussi propre !
    Je ne touve pas la modification de la fiche produit sur presta 1.7 celle que je vois avec des chaussures de sport . J’aimerai bien faire une chose qui ressemblerait mais je me perd un peut …
    Bonne continuation
    NyKø

    Répondre

  7. Bonjour,
    Je viens de découvrir vos vidéos : c’est très cool, surtout pour un débutant comme moi.
    J’ai un problème avec ps_customtext sur une 1.7 qui me rend dingue : un message d’erreur à chaque fois que je veux upgrader le module :
    « Error!
    Exception retournée par le module ps_customtext pour upgrade. Ce fichier ne semble pas être un fichier .zip de module valide. »
    Je précise que j’ai fait une install « standard » de la 1.7, donc je vois pas comment il peut ne pas trouver le module en question puisqu’il est censé être intégré par défaut dans Presta… Ou alors quelque chose m’échappe vraiment…
    Merci pour vos conseils sur le sujet.

    Répondre

    1. Bonjour,

      Si le module a renvoyé une erreur, essayez de le désinstaller… et activez aussi peut-être « allow_url_fopen » sur votre hébergement. Vous pouvez aussi essayer de récupérer le module dans une autre archive « zip » de Prestashop et l’extraire via FTP dans le dossier modules.

      A bientôt !

      Répondre

  8. Bonjour
    merci pour tous tes tutos, je suis novice mais j’avance progressivement grâce à toi!
    Pour ma part, j’ai un souci sur la mise à jour de ce module « Blocs de texte personnalisé », (actuellement en 2.0 et maintenant 3.0)
    c’est le seul module que je n’arrive pas à mettre à jour
    saurais tu pourquoi? j’ai une erreur :
    « Error, Exception retournée par le module ps_customtext pour upgrade. Ce fichier ne semble pas être un fichier ZIP de module valide »..

    Répondre

    1. Bonjour,

      Peut-être en désinstallant le module et en le réinstallant ça pourrait corriger le problème (plutôt que d’utiliser la fonction mise à jour)…

      Par contre, il faudrait sauver le contenu HTML du module avant de faire cela.

      A bientôt !

      Répondre

  10. Bonjour,

    Dans un premier temps, je voudrais vous remercier pour vos conseils. Je rencontre un probleme pour installer la fonction hookheader. J’utilise actuellement la derniere version mise en date et le fichier a bien modifier depuis, voici ce que je trouve dans ce fichier : 

    public function install()
{
// Remove 1.6 equivalent module to avoid DB issues
if (Module::isInstalled(self::MODULE_16)) {
return $this->installFrom16Version();
}

return $this->runInstallSteps()
&& $this->installFixtures();
}

public function runInstallSteps()
{
return parent::install()
&& $this->installDB()
&& $this->registerHook(‘displayHome’)
&& $this->registerHook(‘actionShopDataDuplication’);
}

public function installFrom16Version()
{
require_once _PS_MODULE_DIR_.$this->name.’/classes/MigrateData.php’;
$migration = new MigrateData();
$migration->retrieveOldData();

$oldModule = Module::getInstanceByName(self::MODULE_16);
if ($oldModule) {
$oldModule->uninstall();
}
return $this->uninstallDB()
&& $this->runInstallSteps()
&& $migration->insertData();

    Je suis alle voir l’index pour voir si des changement a ete opere, voici ce qui est ecrit:

    header(‘Expires: Mon, 26 Jul 1997 05:00:00 GMT’);
header(‘Last-Modified: ‘.gmdate(‘D, d M Y H:i:s’).’ GMT’);

header(‘Cache-Control: no-store, no-cache, must-revalidate’);
header(‘Cache-Control: post-check=0, pre-check=0’, false);
header(‘Pragma: no-cache’);

header(‘Location: ../../’);
exit;

    Je te remercie par avance pour ton aide precieuse

    Répondre

  12. Oui, pareil comment réduire la hauteur de bloc si on veut afficher un long texte pour google, mais visuellement le tronquer, avec un Click sur icone en Voir Plus pour dérouler tout le texte ?

    Répondre

  13. Bonjour Germain,

    Merci pour ce tuto.
    J’ai noté que contrairement au bloc texte personnalisé des pages catégories, le bloc CMS de la page d’accueil a un formatage très particulier : texte balise h2 en majuscule et plus gros que h1 !, …

    => Comme faire pour modifier le style du bloc CMS de la page d’accueil pour que ce soit identique à celui des pages catégories ?

    Par avance, merci de ton aide.

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *