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é ?
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
- Ajouter un nouveau répertoire : Accédez au répertoire des modules d’installation de PrestaShop et créez un nouveau dossier nommé ‘monblochtml’.
- 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 :
Assurez-vous également que dans chaque dossier du module HTML, il existe un fichier nommé « index.php » contenant le code ci-dessous :
É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’ :
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 ».
É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.
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 :