Développement de thèmes Magento une introduction

Dans cette série, nous allons examiner les bases du développement de thèmes Magento..

Magento est réputé pour être l'une des plates-formes de commerce électronique les plus flexibles et les plus puissantes sur le marché.. 

La documentation à ce sujet est rare, ce qui laisse aux développeurs une énigme à résoudre. C'est-à-dire que c'est relativement simple une fois que vous maîtrisez les bases notamment si vous êtes à l'aise avec le développement frontal.

Avant d'aller plus loin, il est important de comprendre le but de cette série et de savoir où nous allons dans les prochaines semaines..

Cette série s’adresse aux débutants et couvrira les bases du développement de thèmes front-end. Si vous êtes un développeur avancé de Magento, cette série pourrait ne pas vous convenir.. 

Dans cette série, nous aborderons les sujets suivants:

  • Hiérarchie de Magento
  • Forfaits et thèmes
  • Hiérarchie de repli
  • Fichiers de mise en page
  • Fichiers de modèle

À la fin de la série, vous serez bien équipé pour au moins avoir une solide compréhension des principes de thème de Magento et pouvoir créer et modifier vos propres thèmes comme un professionnel.!

Cela dit, nous sommes prêts à commencer.

Hiérarchie de Magento

Tout d'abord, nous devons comprendre la hiérarchie de Magento et savoir où se situe notre thème. Il y a des centaines de dossiers et des milliers de fichiers, beaucoup trop nombreux pour être énumérés. Je ne me concentrerai que sur ceux avec lesquels nous devons travailler..

app / design / frontend / base / default / app / design / frontend / default / default / app / design / frontend /// skin / frontend / base / default / skin / frontend / default / default / skin / frontend ///

Magento, à sa base, a deux dossiers app et peau qui correspondent les uns aux autres. le app Le répertoire contient les fichiers qui contrôlent la façon dont les modèles de page sont rendus, la structure. le peau Le répertoire contient les fichiers qui contrôlent l'apparence du site Web, tels que CSS, JavaScript et les images..

Dans un sous-dossier de app et peau sont où nos packages et thèmes peuvent être trouvés, une installation typique de Magento est livré avec deux packages base et défaut.

Donc, avant d'aller plus loin, il est important de comprendre ce que sont les forfaits et les thèmes. Si tout se passe bien, tout le reste se mettra en placebien.

Tout sur les forfaits et les thèmes

UNE paquet est un ensemble de thèmes connexes, il n’ya pas de limite au nombre de paquets que nous pouvons avoir et nous devons avoir au moins un paquet présent. Magento est livré avec un spécial forfait, si vous voulez, appelé base. C'est un référentiel permettant de rendre les fichiers de base de Magento disponibles pour le front-end. Vous devez jamais éditer le base Paquetez les fichiers, faites-le à vos risques et périls - plus à ce sujet!

UNE thème D'autre part, il s'agit d'un sous-dossier direct d'un package contenant les fichiers qui composent votre magasin. Là encore, le nombre de thèmes pouvant être contenus dans un package n'est pas limité. Un thème ne peut appartenir qu'à un seul package et, par convention, chaque package doit contenir un thème nommé "default" qui est le thème principal de ce package..

Qu'est-ce que la base??

le base package ne contient qu'un seul thème nommé défaut. Il est fourni avec chaque installation Magento et contient les fichiers frontaux qui permettent à notre magasin de fonctionner. Il y a quelques règles que nous devons accepter avec le package de base.

Comme je l’ai déjà dit, la première règle est de ne pas éditer ces fichiers, cela signifie à la fois en app / design / frontend / base / et peau / frontend / base /  ils ne devraient être utilisés que pour référence. Les fichiers qui doivent être modifiés doivent être copiés à partir de base à ton forfait / thème. Il y a plusieurs raisons à cela que je vais expliquer.

Ce sont ces fichiers qui constituent les fichiers de base de Magento app / code / core / disponible à l'avant. Nous ne devrions tout simplement pas éditer des fichiers de base, cette théorie ne s’applique pas uniquement à Magento mais s’applique également à d’autres plateformes, y compris WordPress.. 

La seconde est que lors de la mise à niveau de Magento, il va probablement écraser la base fichiers de package. Ainsi, tout votre travail acharné et vos modifications visant à donner à votre site Web une apparence irréprochable auront disparu. Sauf si vous avez pris une sauvegarde, vous l'avez à peu près eue!

La deuxième règle est les fichiers dans le base Les paquets font partie du système de secours, ce que je vais expliquer par la suite. En bref, Magento aura recours aux fichiers de base trouvés dans base après, il utilise votre forfait et votre thème. Quand il retombe, le fichier original intact ne devrait pas être une version modifiée..

La troisième règle est de ne créer aucun thème à l’intérieur du base paquet.

En résumé, n'utilisez que base pour référence et si vous avez besoin d'éditer un fichier, copiez-le sur votre propre forfait / thème. Si vous avez besoin d'éditer base faites-le à vos risques et périls et gardez une trace de vos modifications car vous devrez peut-être les restaurer manuellement après les mises à niveau, sinon laissez les choses en place!

Quelle est la valeur par défaut??

le défaut Ce package est à nouveau livré avec chaque installation Magento, mais cette fois, plusieurs thèmes lui sont attribués. Depuis l'édition communautaire 1.8.1.0, il comporte quatre thèmes différents:

  • défaut
  • blanc
  • iphone
  • moderne

Comme le base emballer les mêmes règles exactes s'appliquent ici. Les thèmes de la défaut Les forfaits sont essentiellement destinés uniquement à la démonstration. Idéal pour les magasins de démonstration ou si vous souhaitez montrer ce que Magento est capable de faire à vos clients, sa configuration est rapide.

Logique de repli

Magento s'appuie sur une logique de repli pour rendre les thèmes plus faciles à gérer et à mettre à niveau plus facilement. Cela nous permet d'éditer et de gérer uniquement les fichiers dont nous avons besoin dans notre thème. Si nous n'avons pas besoin de modifier le fichier, nous n'en avons pas besoin dans notre thème, le fichier sera récupéré ailleurs. Pour expliquer cela en détail, nous avons besoin d'un exemple concret.

Supposons que nous ayons notre propre site Web qui est configuré pour utiliser notre propre paquet et notre thème, comme ceci:

app / design / frontend / notre_package / notre_theme / skin / frontend / notre_package / notre_theme /

Notre site Web demande un fichier de modèle nommé 1column.phtml et un fichier CSS nommé styles.css mais Magento est incapable de localiser ces fichiers dans notre thème. La logique de repli de Magento va maintenant rechercher les fichiers dans le prochain thème de la hiérarchie et poursuivre la recherche jusqu'à ce qu'elle localise les fichiers demandés..

L'ordre suivant illustre la logique de repli utilisée par Magento lors de la recherche de nos fichiers:

app / design / frontend / notre_package / notre_theme / template / page / 1column.phtml app / design / frontend / notre_package / default / template / page / 1column.phtml app / design / frontend / base / default / template / page / 1column. skin phtml / frontend / notre_package / notre_theme / css / styles.css skin / frontend / notre_package / default / css / styles.css skin / frontend / base / default / css / styles.css

Avec cette logique de repli en place, cela signifie que nous pouvons avoir une base de code propre en limitant au strict minimum nos thèmes. Copiez uniquement les fichiers de base que nous devons apporter des modifications pour laisser les fichiers hors de notre thème. Si notre site Web demande le fichier et que nous ne l’avons pas dans notre thème, il sera localisé en suivant la logique ci-dessus..

Remarque:Si, après, Magento a traversé la logique de repli et le fichier encore introuvable, il générera une erreur de rendu s'il se trouve dans le répertoire de l'application ou s'il se trouve dans le répertoire du skin, ce qui entraînera probablement un fichier 404 non trouvé..

Créer et activer notre forfait / thème

Bon, assez parlé parlons-en.. 

Tout d’abord, nous allons créer notre configuration de paquet / thème. Nous allons commencer par créer les dossiers suivants:

app / design / frontend / jasonalvis / default / skin / frontend / jasonalvis / default /

Maintenant nous avons un paquet appelé jasonalvis et un thème appelé défaut, n'hésitez pas à renommer votre forfait selon vos besoins. Nous garderons le nom du thème comme défaut comme chaque paquet devrait toujours avoir un défaut thème, rappelant aussi que défaut fait automatiquement partie de la logique de repli.

Il ne reste plus qu'à activer le paquet via la zone d'administration de Magento. Une fois connecté, rendez-vous sur système> configuration. De là, cliquez sur conception dans le menu de gauche, puis entrez le nom de votre paquet dans le champ Nom actuel du paquet champ.

Bien que nous soyons ici, remarquez ci-dessous un des thèmes section. C’est là que nous entrons dans le nom de notre thème, mais parce que nous utilisons simplement défaut nous n'avons pas besoin de taper quoi que ce soit ici car Magento recherche automatiquement ce nom. 

À des fins de démonstration, par exemple, si nous avions un thème que nous voulions utiliser lors d’une vente, nous le créerions comme suit:

app / design / frontend / jasonalvis / vente / peau / frontend / jasonalvis / vente /

Ensuite, tout ce dont nous aurions besoin est d’activer le thème dans la zone d’administration, comme nous l’avons fait avec notre paquet:

Quand utiliser un package ou un thème?

Alors maintenant, vous savez comment configurer votre paquet / thème, mais quel est le meilleur pour quel scénario?

Il existe d'innombrables scénarios et je suis convaincu que chacun d'entre vous en a un différent. Cela devient également un peu plus compliqué lorsque vous avez une installation Magento avec une configuration multi-magasins. En règle générale, les thèmes contenus dans le package doivent être similaires, sinon ils doivent être divisés en packages..

le défaut Le thème doit être le hub du site et les thèmes supplémentaires doivent simplement être des ajustements du hub. Si vous changez radicalement chaque aspect du site dans un thème, il est probablement garanti qu'il figure dans un package séparé..

Remarque: Lors de la création de thèmes supplémentaires dans notre package, nous n'avons pas à le créer dans les répertoires de l'application et de la peau, mais uniquement dans les domaines pertinents. Prenons par exemple notre thème de vente: il ne s'agira que de modifications de style, de couleurs différentes, etc. Les fichiers de modèles existants ne sont pas modifiés. Par conséquent, ne créez que le thème dans le répertoire skin et éditez les fichiers appropriés selon vos besoins..

Cela dit, appelons cela un jour. Vous devez maintenant avoir une solide compréhension de la hiérarchie de Magento, que vous devrez utiliser dans le reste de la série. Comme toujours, toutes les questions laissent un message dans les commentaires ci-dessous.

Et après?

Dans le prochain article, nous allons examiner les bases du XML de mise en page. En attendant, n'hésitez pas à nous envoyer des questions, des commentaires ou des commentaires ci-dessous!