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.

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (1 votes, moyenne : 5,00 sur 5)
Loading...

10 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.

    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 !

  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

    Default

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

    A très 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

    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 !

  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

    1. 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 !

Laisser un commentaire

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