Share
On peut dire que Prestashop est la première solution de commerce électronique open source sur le Web. Il offre une multitude de fonctionnalités, d’extensions et de thèmes, mais son manque de bonne documentation a donné aux nouveaux arrivants l’impression qu’il est inapprochable. Dans cet article, je vous expliquerai le processus de création de votre propre thème personnalisé, ainsi que la création et la personnalisation de modules Prestashop..
Prestashop fonctionne sous PHP et mySQL et s'appuie sur le moteur Smarty pour ses "modèles" (pages). Ne vous inquiétez pas, si vous n'êtes pas familier avec Smarty. Vous l'utilisez essentiellement pour créer des pages avec des espaces réservés, et Prestashop renseigne les informations lors du chargement de la page. Il est facile de passer à, si vous avez utilisé quelque chose comme Guidon ou Modèles de soulignement..
Je suppose que vous avez déjà téléchargé et installé Prestashop. Sinon, vous pouvez télécharger la dernière version. ils ont une vidéo d'instruction que vous pouvez regarder pour apprendre à le configurer.
Votre site devrait ressembler à l'image suivante, si vous configurez Prestashop avec les paramètres par défaut.
Le processus de création de votre propre thème commence par la création d'un dossier. Dans le navigateur de fichiers de votre choix, accédez au répertoire racine Prestashop et vous trouverez un dossier appelé des thèmes. À l'intérieur de des thèmes dossier, créez un nouveau répertoire avec le nom de votre thème. Je vais appeler le mien "Demo".
Si vous ajoutez une image de votre modèle à ce dossier et nommez-le preview.jpg, Prestashop devrait automatiquement rechercher et ajouter votre modèle au back-end. Si ce n'est pas le cas, ou si vous préférez ajouter l'image ultérieurement, vous pouvez ajouter manuellement le thème. Pour ce faire, allez au Des thèmes option sous la Préférences menu et cliquez Ajouter un nouveau au sommet. Une fois terminé, vous verrez votre thème au centre de la page. Activez-le en cliquant simplement dessus et en appuyant sur le bouton sauvegarder bouton.
Ajoutez votre logo pendant que vous êtes ici. vous pouvez trouver cette option au bas de la page. Vous devrez peut-être augmenter la limite de téléchargement de fichiers dans Prestashop (ou même dans le fichier de configuration de PHP) si vous avez une très grande image..
Smarty est un moteur de template pour PHP facilitant la séparation de la présentation de la logique d'application..
Comme je l'ai mentionné précédemment, Prestashop utilise Smarty pour générer les pages; oui, tous les fichiers modèles ont un .tpl extension. Vous devez créer de nombreuses pages pour avoir un thème complet. prendre un moment et voir la liste des fichiers.
En fin de compte, la fonctionnalité de votre thème détermine les pages à implémenter. Ces pages sont basées sur les fichiers du dossier des contrôleurs. Vous pouvez remplacer les contrôleurs par défaut ou ajouter vos propres contrôleurs personnalisés en fonction de votre thème. Mais cela dépasse le cadre de cet article. Parmi les contrôleurs de contrôleurs \ répertoire avant Il y a deux fichiers modèles qui se chargent automatiquement: header.tpl et footer.tpl.
Le contenu principal de votre site sera chargé par des modules à l'aide de "Crochets".
Il existe deux types de hooks dans Prestashop: les hooks d’action et d’affichage. Ces deux fonctions fonctionnent de la même manière, mais leur objectif est différent. En gros, un crochet donne à l’utilisateur le moyen d’attacher un code personnalisé à une source extérieure. Dans le cas d'un hook d'action, tout code attaché au hook s'exécute lorsque le hook est appelé. Par exemple, Prestashop est livré avec un hook par défaut appelé actionProductAdd qui s'exécute lors de l'ajout d'un produit. Vous pouvez donc attacher un module à ce crochet si vous souhaitez envoyer un bulletin électronique chaque fois qu'un nouveau produit est ajouté..
Un point d’affichage est très similaire, mais au lieu de connecter une fonction à un événement, vous connectez une fonction à un emplacement spécifique du modèle. En d'autres termes, Prestashop appellera votre module par un point spécifique (par exemple, la barre latérale droite) et tout élément renvoyé sera placé dans la page. Vous pouvez voir tous les hooks actuellement enregistrés en allant à la Modules> Positions page dans le dos administrateur.
Personnellement, je trouve préférable de commencer avec un thème HTML standard. Ce n'est pas une obligation, mais je le recommande vivement pour un certain nombre de raisons:
Accentsconagua
preview.jpg déposer tout de suite.L'image suivante est une image de mon exemple de modèle HTML:
Et ici vous pouvez voir comment je vais le diviser en hooks Prestashop:
Créons maintenant le header.tpl fichier dans votre répertoire themes et remplissez-le avec l'en-tête de votre thème. Cela inclut le doctype, zone, et tout dans le corps que vous souhaitez afficher sur toutes les pages. Voici un exemple header.tpl fichier:
Site Prestashop if isset ($ css_files) foreach from = $ css_files clé = css_uri item = media / foreach / if if isset ($ js_files) foreach à partir de $ $ js_files item = js_uri / foreach / if$ HOOK_TOP
Il y a quelques choses à souligner dans ce code. J'ai précédé le nom du fichier CSS avec $ css_dir. Ceci est une variable Smarty qui pointe vers un dossier, appelé css dans le répertoire de votre thème, où tous vos fichiers CSS doivent aller.
La ligne suivante utilise Smarty pour chaque boucle pour ajouter tous les fichiers CSS des modules activés. Il est à noter que si vous créez un fichier CSS appelé global.css dans le css répertoire, la boucle ajoute automatiquement ce fichier à la page.
Quelques lignes plus tard, une autre pour chaque boucle traite les fichiers JavaScript dans le js répertoire et les ajoute à la page. Dans la dernière section, j'ouvre l'élément body et définit un crochet pour le module de menu. Enfin, je termine en affichant le logo du site.
Sauf si vous êtes un vétéran de Prestashop, vous vous demandez probablement où je veux en venir avec ces variables. Comme je l’ai dit plus tôt, la documentation de Prestashop fait malheureusement défaut, mais elle fournit un outil de débogage que vous pouvez lancer en ajoutant déboguer à l'un des fichiers de modèle. Lorsque vous ouvrez la page correspondante dans votre navigateur, vous obtenez une fenêtre contextuelle contenant la liste de toutes les variables pour ce modèle spécifique. Cela vous permet d'identifier rapidement (en utilisant ctrl / cmd-F, une aide considérable) pour identifier les variables définies ainsi que leurs valeurs..
Créons maintenant le footer.tpl modèle. Je vais garder cela simple et juste fermer la et éléments, mais n'hésitez pas à ajouter tout ce que vous souhaitez afficher en bas de chaque page. Cela peut inclure n'importe quoi, des crochets au JavaScript personnalisé; il n'y a pas de limites à ce que vous pourriez mettre ici.
Le dernier fichier que je veux implémenter est le index.tpl fichier. C'est le fichier "page d'accueil" qui s'affiche lorsqu'un utilisateur accède à la racine de votre site. Dans le thème par défaut de Prestashop, les barres latérales sont chargées dans header.tpl fichier, et le modèle d’index proprement dit ne contient qu'un appel à la displayHome crochet. Cela convient si vous voulez que les barres latérales figurent sur toutes les pages, mais je tiens à souligner de nouveau que les points d'ancrage sont mis en œuvre à votre convenance. Vous n'avez pas à implémenter de hook, et vous pouvez ajouter vos propres hooks personnalisés si vous avez besoin de plus que la fonctionnalité standard..
Lors de la création de votre page d'index, vous devez décider quelles parties sont statiques et quelles parties doivent être chargées de manière dynamique via des modules. J'ai supprimé le menu principal de l'en-tête parce que c'est quelque chose que je voulais contrôler avec un module. J'ai donc placé un crochet là où je voulais le menu et je peux créer un module qui s'attache à ce crochet. Vous pouvez charger plusieurs éléments avec le même crochet. Il n'y a aucune raison d'ajouter plusieurs hooks ensemble, et vous pouvez gérer l'ordre des modules d'un hook dans le back-end sous Modules> Positions.
Les derniers outils spécifiques à Prestashop à prendre en compte sont les outils de localisation de Prestashop. Prestashop vous permet de traduire facilement votre site en plusieurs langues à l’aide d’une fonction Smarty, nommée l. Vous l'utilisez en remplaçant une chaîne standard par le l fonction, en passant la chaîne en tant que paramètre. Voici un exemple de élément, avec et sans traduction:
* Sans outil de traduction *Abonnez-vous à nous!
* Avec l'outil de traduction *l s = "Abonnez-vous à nous!"
Même si vous ne prévoyez pas actuellement de traduire votre site, il s'agit d'un petit changement qui vous permet de traduire facilement vos pages si vous décidez de le faire ultérieurement. Une fois ces modifications apportées à vos modèles, vous pouvez accéder à la Localisation> Traductions page dans le back-end et cliquez sur la nationalité que vous souhaitez traduire.
L'ajout de langues autres que celles par défaut est simple et je l'explique dans la deuxième section de la page (à juste titre "Ajouter / Mettre à jour une langue").
Un autre avantage à utiliser la localisation de Prestashop est la liste des phrases que Prestashop vous donne. Au lieu de parcourir l'intégralité de votre site, vous pouvez simplement remettre la liste des phrases à un locuteur natif de la langue de votre choix et saisir rapidement les valeurs, sans jamais toucher à votre thème..
Maintenant, entrez le code HTML spécifique de votre page d'accueil au index.tpl, et assurez-vous de fournir les crochets que vous souhaitez utiliser. N'oubliez pas d'utiliser le déboguer Fonction Smarty, si vous avez besoin de voir les variables disponibles pour votre modèle.
Vous pouvez maintenant ouvrir un navigateur et naviguer jusqu'à la racine de vos sites. Le mien ressemble à ceci:
Cela peut ne pas sembler beaucoup, mais vous avez construit la coque externe de votre modèle. Si votre modèle ressemble à un gâchis d'objets, c'est probablement parce que vous avez beaucoup de modules installés. Par défaut, Prestashop active de nombreux modules. Je recommande d'aller à la page des modules et de désinstaller tous les modules. Ne vous inquiétez pas de les perdre, car vous pouvez les réinstaller en cliquant sur le bouton d'installation en regard du module souhaité..
Lors de la création d'un thème Prestashop, vous remarquerez que les modules sont responsables d'environ 90% du contenu. Certains modules affichent les produits, des modules pour le panier, etc. Le thème principal de Prestashop consiste en grande partie en une connaissance pratique de la personnalisation de l'apparence des modules..
Les modules dans Prestashop ne sont pas identiques aux widgets Wordpress.
Les modules dans Prestashop ne sont pas identiques aux widgets Wordpress; Les modules de Prestashop ne peuvent être attachés qu'aux crochets spécifiés par le créateur du module. Par exemple, si vous créez un module qui affiche un bloc "S'abonner à la newsletter" et que vous le configurez pour aller dans l'une des barres latérales, vous ne pouvez pas le placer ensuite dans la zone de pied de page..
Cela peut sembler fastidieux, mais il y a une très bonne raison à cela: lorsque vous créez un module, vous fournissez une fonction distincte pour chacun des points d'ancrage que vous souhaitez utiliser. Par exemple, si un module de menu peut se comporter différemment en fonction de son emplacement dans le modèle.
Cela vous donne beaucoup d'espace pour personnaliser un module.
Cette pratique est beaucoup plus logique si vous envisagez d’autres types de crochets: les crochets d’action. Évidemment, vous ne voulez pas que la fonction qui s’exécute lorsque vous ajoutez un nouveau produit à exécuter lorsqu’un utilisateur vous achète un produit. La même chose s'applique aux crochets d'affichage; chaque crochet a sa propre fonction, vous permettant de faire ce que vous voulez.
Lors de la création d'un thème, vous pouvez ajouter des modules de deux manières. La première option est de créer votre propre module. C'est l'option la plus fastidieuse, mais vous obtenez beaucoup plus de contrôle sur le produit final. D'autre part, le catalogue officiel des modules contient plus de 2000 modules (et même davantage sur des sites tiers). Les chances sont bonnes, vous pouvez trouver quelque chose qui correspond à vos besoins.
Votre deuxième option consiste à installer un module prêt à l'emploi. Prestashop vous offre la possibilité de personnaliser son apparence en remplaçant les fichiers de modèle. C'est la meilleure option, si vous ne voulez pas vraiment commencer à coder votre propre module, et cela vous permet de vous concentrer sur le côté graphique. Je vais couvrir les deux options; alors commençons par le premier.
Nous allons construire un module qui affiche un nombre configurable de produits sur la page d'accueil. Ceci est vaguement basé sur le module stock, mais mon module ira un peu plus dans les classes sous-jacentes de Prestashop pour vous donner, espérons-le, un aperçu plus approfondi du processus..
Tout d'abord, créez un dossier dans le modules répertoire, puis créez un fichier PHP avec le même nom que le dossier. Lorsque vous ouvrez le modules dossier, vous verrez une convention de dénomination, où tous les modules qui affichent uniquement du contenu commencent par le mot "block". Bien entendu, cela n’est pas une exigence, mais cela a du sens. Je vais nommer mon dossier blockdisplayproducts, et, dans ce cadre, je créerai le fichier PHP portant le même nom.
Ouvrez le fichier PHP et définissez la classe de modules:
name = 'blockdisplayproducts'; $ this-> tab = 'front_office_features'; $ this-> version = 1.0; $ this-> author = 'Gabriel Manricks'; $ this-> need_instance = 0; parent :: __ construct (); $ this-> displayName = $ this-> l ('Module de produits d'affichage'); $ this-> description = $ this-> l ('Affiche un nombre configurable de produits pour la page d'accueil.'); Les modules Prestashop sont orientés objet. par conséquent, vous devez créer une classe pour votre module. Le nom de votre classe doit être la version camelée du nom de votre dossier..
En haut du fichier, vous pouvez voir un si déclaration. Cela garantit que le fichier n'est pas chargé directement via le navigateur. Ensuite, votre classe doit directement sous-classer la classe Module ou sous-classer un décédé de la classe Module..
À l'intérieur du constructeur, nous configurons les propriétés du module. Prestashop utilise ces informations pour afficher dans le back-end:
prénom est un "nom de code" unique, et ce n'est pas le nom réel affiché dans le back-end.languette indique à Prestashop la catégorie du module. Vous pouvez trouver une liste complète des catégories en ouvrant le Contrôleurs \ Admin \ AdminModuleController.php fichier. auteur, prénom et version sont explicites.besoins_instance indique à Prestashop de créer une instance de votre variable lors de l’accès à la page des modules. Cela n’est généralement pas obligatoire, mais si votre module doit afficher un message ou enregistrer quelque chose lorsque la page des modules est active, vous devez le remplacer par un message. 1.Les deux dernières lignes définissent le nom d'affichage et la description de votre module et utilisent la même méthode de localisation afin de permettre leur traduction dans des langues différentes. Ces deux lignes doivent suivre l'initialisation du parent conformément à l'ordre préféré de Prestashop utilisé par ses modules officiels..
L'étape suivante consiste à remplacer la méthode d'installation. C'est ici que nous pouvons spécifier les hooks dont nous avons besoin, ainsi que les options par défaut de notre module. Si l'un des paramètres échoue, l'installation échouera.
Ce module est destiné à la page d'accueil, je vais donc le connecter au point d'accueil. Nous souhaitons également ajouter un fichier CSS à l'en-tête, ce qui signifie que nous devrons également ajouter le crochet d'en-tête. Si vous allez au back-end sous le Modules> Positions page, vous pouvez trouver les noms techniques des crochets (ce que nous spécifierons ici).
Juste après le __construction() fonction, ajoutez ce qui suit:
fonction publique install () if (parent :: install () == false || $ this-> registerHook ('displayHome') == false || $ this-> registerHook ('displayHeader') == false || Configuration :: updateValue ('DP_Number_of_Products', 6) == false) retourne false; retourne vrai; Cela ajoute les deux crochets et définit le nombre de produits par défaut à six. Vous devez nommer la propriété quelque chose d'unique afin que les autres modules n'interfèrent pas avec vos valeurs. Une approche simple ajoute le nom ou les initiales de votre module au début du nom..
Vous pouvez maintenant installer votre module dans la page des modules, et il devrait s’installer correctement si tout est configuré correctement. Aller à la page des positions, et il affichera comme enregistré sous les deux crochets.
La mise en œuvre des crochets est assez simple. créez une fonction publique avec le mot "hook" suivi du nom du hook. Commençons par le crochet d'en-tête. Nous voulons juste qu'il ajoute un fichier CSS à notre thème. Voici la fonction complète:
fonction publique hookdisplayHeader ($ params) $ this-> contexte-> contrôleur-> addCSS (($ this -> _ chemin). 'blockdisplayproducts.css', 'all');
Créez ce fichier CSS dans votre répertoire themes et votre modèle devrait le charger dans l'en-tête..
Le crochet suivant est un peu plus compliqué. Il convient de récupérer un certain nombre de produits de la base de données et de les charger dans un fichier de modèle. La fonction permettant de récupérer les produits ne renvoie pas les images ou les liens des produits. Nous devons donc appeler plusieurs fonctions différentes et "créer" une gamme de produits. Voici la fonction complète:
fonction publique hookdisplayHome ($ params) $ languageId = (int) ($ params ['cookie'] -> id_lang); $ numberOfProducts = (int) (Configuration :: get ("DP_Number_of_Products")); $ productsData = Product :: getProducts ($ languageId, 0, $ numberOfProducts, "id_product", "ASC"); if (! $ productsData) renvoie "erreur"; $ products = array (); $ link = new Link (null, "http: //"); foreach ($ productsData en tant que $ product) $ tmp = Product :: getCover ($ product ['id_product']); array_push ($ products, array ('name' => $ product ['name'], 'author' => $ product ['constructeur_nom'], 'desc' => $ product ['description_short'], 'price' = > $ product ['price'], 'link' => $ link-> getProductLink (nouveau produit ($ product ['id_product'])), 'image' => $ link-> getImageLink ($ product ['link_rewrite' ], $ tmp ['id_image']))); $ this-> smarty-> assign (array ('produits' => $ produits)); return $ this-> display (__ FILE__, 'blockdisplayproducts.tpl'); Il commence par obtenir le nombre de produits à afficher et l'identifiant de langue de l'utilisateur. Nous passons ensuite un appel pour obtenir le nombre attribué de produits à partir du premier produit enregistré. Ensuite, nous nous assurons qu’il n’ya aucun problème à sortir les produits s’il en existait. Le bloc suivant est la partie que j'ai mentionnée précédemment, qui construit un tableau avec toutes les propriétés nécessaires pour afficher l'élément. Cela inclut la photo et le lien qui n'ont pas été renvoyés avec le reste des données du produit. La dernière section ajoute le tableau de produits à Smarty et charge le fichier de modèle de votre choix. J'ai nommé le fichier de modèle et les fichiers CSS avec le même nom que le module, mais ce n'est pas une obligation; vous pouvez le nommer comme vous voulez.
Si vous ouvrez votre site maintenant, vous ne verrez qu'un message, notant "Aucun modèle trouvé pour le module blockdisplayproducts."Nous allons donc créer le fichier modèle dans le répertoire de notre module, en lui donnant le même nom que celui que vous venez de spécifier dans la fonction hook. Cette partie dépend vraiment de la disposition de vos thèmes, mais voici mon fichier modèle:
si $ produits! == fauxforeach from = $ products item = nom du produit = productLoopl s = "NOS LIVRES" mod = "blockdisplayproducts"
/ foreach / if$ product.author | upper | strip_tags | escape: html: 'UTF-8'$ product.name | strip_tags | escape: html: 'UTF-8'$ product.desc$ $ product.price | string_format: "%. 2f"l s = "View" mod = "blockdisplayproducts"
Etant donné que Prestashop utilise des modèles Smarty, vous disposez d’un certain nombre de fonctions d’aide que vous pouvez utiliser lors de l’affichage de vos données. Nous commençons avec un si fonction pour vous assurer que le tableau de produits est correct. Si c'est le cas, nous entrons dans un pour boucle, générant le code HTML spécifié pour chacun. Nous utilisons les fonctions d'assistance intégrées de Smarty pour supprimer les balises HTML et convertir le nom de l'auteur en majuscule, et nous utilisons une autre méthode pour formater le prix au nombre souhaité de décimales. Pour voir une liste complète des modificateurs, voir ici.
Notez également que, lorsque vous traduisez des chaînes ici, vous devez entrer le nom de votre module. En effet, la traduction n'est pas liée à un thème, mais au module lui-même. D'autre part, le l la fonction est spécifique au modèle; donc, pour qu'il puisse trouver votre fichier de traduction, il faut le nom du module.
Vous pouvez maintenant voir votre site dans le navigateur. si vous avez ajouté des produits, ils doivent être affichés sur la page d'accueil maintenant.
Maintenant, notre module est entièrement fonctionnel, mais il n’ya aucun moyen d’ajuster le nombre de produits retournés. Pour ce faire, nous devons ajouter une fonction, appelée getContents. Si votre module dispose de cette fonction, Prestashop ajoutera automatiquement un bouton de configuration dans la page "modules". Tout ce qui est retourné par cette fonction sera affiché sur la page de configuration. Pour commencer, ajoutez la fonction à la classe du module et remplissez-la avec les informations suivantes:
fonction publique getContent () $ html = ''; $ html. = ''; return $ html;'. $ this-> displayName. ' Réglages
'; $ html. = ' '; $ html. = '
Cette fonction construit simplement le code HTML nécessaire pour afficher un formulaire avec une case numérique et un bouton Enregistrer. Encore une fois, j'utilise le $ this-> l () méthode pour pouvoir traduire le module dans d’autres langues ultérieurement, le cas échéant. J'ai utilisé un champ numérique dans le formulaire HTML, mais soyez prudent si vous créez un module commercial. Ce n'est toujours pas supporté par tous les navigateurs. Cela dit, si c'est pour votre usage personnel, alors n'hésitez pas!
La seule autre chose qui peut sembler cryptique est la Outils :: safeOutput () fonction que nous appelons sur l'URL. Honnêtement, je ne suis pas sûr à 100% de l'importance de cet appel, mais ce qu'il fait, c'est de supprimer toutes les balises HTML et de convertir les caractères nécessaires en entités html..
Ensuite, allez à la page des modules et cliquez sur le bouton Configurer de votre module. Vous serez accueillis avec le formulaire que nous venons de faire.
Vous pouvez ajuster le nombre et appuyer sur Enregistrer, mais nous n’avons pas encore écrit la fonction d’enregistrement, la réinitialisation continue sur 6 (valeur déjà enregistrée)..
De retour dans la fonction, ajoutez le code suivant au début de la fonction:
if (Tools :: isSubmit ('numProds')) Configuration :: updateValue ('DP_Number_of_Products', (int) (Tools :: getValue ('numProds')))); Ceci vérifie si la valeur a été soumise - c’est-à-dire si la valeur numProds existe en tant que $ _GET ou $ _POST variable. Nous mettons ensuite à jour la propriété où nous avons stocké la valeur. La méthode Outils :: getValue accepte le nom d'un champ de formulaire et éventuellement une deuxième chaîne de ce qu'il faut renvoyer si le champ de formulaire est introuvable; il retourne ensuite une chaîne formatée avec la valeur soumise. Il est important de mettre cela avant de générer le formulaire HTML; sinon, le formulaire contiendra les anciennes valeurs telles qu'elles ont été ajoutées aux mises à jour.
Avec ce dernier morceau de code, nous avons terminé le module. La seule autre chose à faire est d’ajouter une icône GIF 16x16 au dossier Modules..
Nous sommes maintenant prêts à passer à la prochaine option d'intégration de modules avec votre thème..
La deuxième option consiste à utiliser un module existant et à le redéfinir en fonction de vos goûts. Cette option est considérablement plus simple car il vous suffit de recréer le ou les fichiers ".tpl" à partir du module..
Il manque toujours un menu de navigation supérieur dans mon exemple de thème; personnalisons donc ce module. Pour commencer, activez / installez le module dans la page "modules", appelée "Menu horizontal supérieur". L’étape suivante consiste à créer un dossier dans votre répertoire de thèmes, appelé modules. Dans celui-ci, créez un autre dossier avec le nom réel du module - dans notre cas, il s’agit de menu blocktop. Lors du chargement des fichiers tpl d'un module, Prestashop vérifie d'abord s'il existe un fichier dans le répertoire de substitution de module de thèmes activé portant le même nom. Si tel est le cas, il chargera la version des thèmes au lieu de la version stock. Le fichier tpl du module de menu est nommé blocktopmenu.tpl, vous devez donc créer un fichier portant le même nom dans le nouveau dossier que nous venons de créer.
Le moyen le plus simple de déterminer le type de données qu’offre un module est d’examiner le fichier tpl et de voir quelles données il utilise, ou de charger le fichier. déboguer outil. Pour accélérer les choses, je peux vous dire que ce plugin n’offre qu’une seule variable, nommée MENU, qui contient une chaîne avec tous les éléments de menu combinés ensemble à l'intérieur
li étiquette pour chaque article? Heureusement, Smarty à la rescousse! Ce n'est pas un article sur Smarty, je vais donc garder cette partie courte, mais nous allons utiliser une combinaison de la fonction de remplacement de chaîne et de la fonction d'explosion de PHP pour isoler les différents éléments. Ensuite, nous pouvons construire le code HTML avec un pour chaque boucle. Voici mon fichier de modèle complété pour ce module: assign var = tmpMenu value = $ MENU | replace: '
- ': " assign var = items value ="
"| explode: $ tmpMenu foreach $ items en tant que $ item if! $ item @ last- $ item
if ($ item @ index + 2)! = $ item @ total/ if / if / foreach
Maintenant, il y a beaucoup de nouveau code, je vais donc le parcourir ligne par ligne. Il commence par ouvrir div et ul Mots clés; ce sont purement pour des raisons esthétiques. Ensuite, nous utilisons une commande Smarty, appelée attribuer. Cela fait exactement ce que cela ressemble: il attribue une valeur à une variable. Dans la première déclaration d'assignation, nous supprimons l'ouverture li balises, et, dans le second, nous explosons la chaîne par la fermeture li étiquette. Le résultat est un tableau contenant une liste de liens d'éléments de menu. Nous passons ensuite sur un pour chaque boucle, où nous affichons chaque élément à l'intérieur
Si vous avez tout exécuté correctement jusqu'à présent, vous pouvez maintenant le thématiser à votre guise et ajouter quelques pages au menu à partir de la page "Configurer" du module. Une fois terminé, vous devriez pouvoir aller sur votre site et voir le menu fonctionner comme prévu!
Il s’agit d’un examen très bref mais approfondi des techniques nécessaires à la création de thèmes PrestaShop. Au cours de ce didacticiel, j'ai suivi les étapes nécessaires à la création d'un thème multilingue complet et à deux méthodes différentes pour insérer des modules thématiques dans votre modèle..
À l
