Guide étape par étape pour ajouter un bloc HTML personnalisé dans PrestaShop

Ajouter un bloc HTML personnalisé dans PrestaShop | Guide étape par étape par Knowband

 

Pourquoi devrions-nous ajouter un bloc HTML personnalisé sur notre boutique PrestaShop ?

L’ajout d’un bloc HTML personnalisé sur le site Web PrestaShop peut améliorer ses fonctionnalités ou son style général en permettant aux propriétaires de magasins d’inclure des textes personnalisés, des images, des liens ou d’autres éléments HTML sur le site Web et ces blocs peuvent être ajoutés pour présenter différents contenus sur différents contrôleurs ou pages.

Le processus d’ajout d’un bloc HTML personnalisé dans la boutique PrestaShop est similaire pour toutes les versions.

Pour ajouter un bloc personnalisé, nous utiliserons un module personnalisé dans la boutique PrestaShop.

Pourquoi un module personnalisé ?

Pourquoi un module personnalisé - Knowband

La flexibilité et une intégration plus étroite au sein d’une boutique en ligne sont deux avantages majeurs de la création d’un bloc HTML sur mesure à l’aide d’un module PrestaShop spécifique. Cette stratégie fonctionne particulièrement bien lorsque les propriétaires de magasins ont des critères spécifiques auxquels les modules préexistants ne répondent pas, ou lors de l’ajout de nouvelles fonctionnalités. sans modifier les fichiers principaux de la plateforme.

En choisissant de créer un module personnalisé, les propriétaires de boutiques PrestaShop peuvent adapter précisément l’apparence de leur environnement de commerce électronique à leurs objectifs marketing et à leurs stratégies d’interaction client. Cette personnalisation permet une personnalisation plus poussée de l’expérience utilisateur, ce qui peut accroître la satisfaction et la fidélité des clients. En outre, il donne aux propriétaires d’entreprise la flexibilité nécessaire pour s’adapter rapidement aux tendances changeantes du marché et conserver un avantage concurrentiel en incluant des fonctionnalités uniques qui augmentent la satisfaction des clients et l’efficacité opérationnelle.

Vous trouverez ci-dessous un guide étape par étape sur la façon de créer et d’utiliser un bloc HTML personnalisé dans la boutique PrestaShop : –

Étape 1 : Créer les fichiers de base et le répertoire des modules

  1. Ajouter un nouveau répertoire : Accédez au répertoire des modules d’installation de PrestaShop et créez un nouveau dossier nommé ‘monblochtml’.
  2. Fichier principal PHP : Veuillez créer un fichier appelé ‘monblochtml.php‘ à l’intérieur de ce répertoire. Ce fichier contiendra la classe principale de votre module.

Étape 2 : codez votre module

Ouvrez ‘myhtmlblock.php’ et ajoutez le code PHP suivant pour définir votre module :

Capture d'écran du code PHP

 

Assurez-vous également que dans chaque dossier du module HTML, il existe un fichier nommé « index.php » contenant le code ci-dessous :

Capture d'écran du bloc HTML personnalisé dans PrestaShop

 

Étape 3 : Ajouter un fichier modèle

Créez une structure de dossiers dans le répertoire du module comme ceci : views/templates/hook et dans le répertoire hook, créez un fichier nommé ‘displayHome.tpl’ :

Capture d'écran du bloc HTML personnalisé dans PrestaShop

 

Veuillez noter qu’au début du fichier modèle, un commentaire sur le chemin du fichier et son nom a été ajouté pour afficher le même dans le contenu HTML de votre boutique.

Étape 4 : Si vous le souhaitez, incluez une page de configuration

Si le propriétaire du magasin souhaite rendre le contenu HTML configurable à partir du panneau d’administration, il devra alors implémenter un formulaire de configuration dans la méthode ‘getContent()’ de votre classe de module et, par conséquent, l’administrateur ou le propriétaire du magasin pourra changer le texte HTML sans changer le code.

Étape 5 : Installation du module

  • Accédez au panneau d’administration de PrestaShop.
  • Sous Modules, choisissez Gestionnaire de modules.
  • Cliquez sur ‘Télécharger un module’ et sélectionnez le fichier zip de votre module, ou recherchez votre module dans la liste des modules s’il est déjà sur le serveur.
  • Sélectionnez « Installer ».

Installation du module

 

Étape 6 : Placez le module sur d’autres crochets (facultatif)

Le bloc HTML personnalisé dans Prestashop devra être affiché à plusieurs endroits sur le site Web PrestaShop, nous devrons donc modifier la méthode ‘install()’ du module pour enregistrer plusieurs hooks. Chaque hook a un endroit désigné sur le site Web où le contenu peut être affiché.

Les crochets typiques sont les suivants :

  • afficherPied de page
  • displayColonneGauche
  • afficherColonneDroite
  • displayProductAdditionalInfo
  • displayTop

Étape 7 : testez votre module

Après l’installation, accédez à la page d’accueil de votre site pour voir votre nouveau bloc HTML personnalisé en action.

bloc HTML personnalisé

 

Si vous avez ajouté un formulaire de configuration, essayez de modifier le contenu du bloc HTML via le back-office PrestaShop pour voir s’il se met à jour correctement.

Cette approche vous donne un contrôle total sur ce que fait votre module et sur l’endroit où il apparaît sur votre site PrestaShop, ce qui en fait un moyen puissant de personnaliser les fonctionnalités et le design de votre boutique.

Si vous avez des questions/suggestions, vous pouvez contacter notre portail d’assistance technique à notre adresse e-mail support@knowband.com.

Jetez un oeil à notre module best-seller Supercheckout d’une page pour Prestashop et de Plugin de création d’applications mobiles Opencart Android et iOS ici et vous pourrez valoriser les visuels produits sur votre boutique en utilisant le Addon de concepteur / personnalisateur de produit Prestashop.

Vous pouvez également regarder nos dernières vidéos ici :

 

 

Adrienne

We are professionals in the eCommerce industry, specializing in plugin development. With years of experience, We provide the best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify. We also offer custom module development and customization services for websites and modules. Our team remains at the forefront of industry trends, delivering cutting-edge solutions to enhance eCommerce website functionality. With a customer-centric approach, our company is trusted partner for eCommerce plugin solutions.

Leave a Reply

Your email address will not be published. Required fields are marked *