Introduction à la terminologie et aux concepts de design Magento

Êtes-vous un débutant Magento? Vous voulez créer votre propre thème? Si oui, cet article est écrit spécialement pour vous. 

Pour commencer par la conception et la personnalisation des thèmes Magento, il est très important que vous maîtrisiez bien la terminologie de conception de Magento et les concepts de base du flux de contrôle de Magento..

Avant de commencer, il est utile de clarifier quelques points autour des versions de Magento car l'application est disponible en deux versions différentes: Edition communautaireet Edition pour entreprise. Cet article prend en charge les versions suivantes de Magento:

  • Version communautaire 1.4+
  • Édition Entreprise version 1.8+    

Pour comprendre tout ce que nous couvrons, vous devez avoir déjà installé et une copie de travail de Magento (que vous pouvez obtenir à partir d’ici). Si vous avez déjà compris le tableau de bord de Magento, vous aurez probablement plus de facilité à suivre ce didacticiel..

Sinon, pas de problème. Nous couvrirons tous les détails tout au long de l'article.

Un aperçu de la hiérarchie de Magento

Avant d’approfondir la terminologie de la conception, il est très important de comprendre le concept de hiérarchie de magasin. L'une des principales caractéristiques de Magento est qu'il prend en charge la création et la manipulation de plusieurs magasins et les vues de magasin dans une configuration unique.. 

Regardons ces termes de base et allons plus en détail:

  • Global fait référence à l'ensemble de votre installation Magento.
  • Site Internet fait référence à un groupe de magasins ou à un seul magasin pouvant partager des informations sur les clients, des informations sur les commandes et le panier, ou ne pas partager d'informations.
  • Magasins sont les enfants du site Web et de la collection de vues de magasins. Le but principal des magasins est de gérer des vues de magasin liées de manière logique, en permettant plusieurs magasins sur un seul site Web, et de configurer une structure de catalogue individuelle..
  • Vues de magasin sont des enfants de magasins. Chaque magasin a une vue ou plusieurs vues. Les vues de magasin sont principalement utilisées pour la représentation multiple de mêmes données. La plupart du temps, ils sont utilisés pour représenter des magasins prenant en charge plusieurs langues.. 

Ici, vous pouvez voir qu'un site Web peut avoir un magasin ou plusieurs magasins et qu'un magasin peut avoir une vue de magasin ou plusieurs vues de magasin. Un scénario par défaut serait le site Web principal, le magasin du site principal et la vue du magasin par défaut.. 

Si vous avez déjà installé et configuré Magento, accédez au panneau d’administration de Magento, puis pointez sur le Système languette. Dans cette page, dans la partie supérieure gauche du menu supérieur, vous pouvez voir le Portée de la configuration actuelledéroulant - affiche le scénario par défaut de votre magasin Magento.

                                               

Examinons différents scénarios pour mieux comprendre le site Web, les magasins et les vues de magasin..

Premier scénario: un magasin

Disons que vous voulez vendre des vêtements pour hommes et femmes. En tant que start-up, vous ne souhaitez pas proposer de catalogues distincts ni de prise en charge de plusieurs langues pour votre magasin. Dans ce cas, le scénario comprendrait un site Web, un magasin et une vue de magasin par défaut..

Deuxième scénario: magasins multiples

Dites maintenant que vous souhaitez vendre des vêtements pour hommes et femmes dans des magasins distincts et que vous souhaitez partager les commandes des clients et les informations relatives au panier d'achat. De cette façon, les clients peuvent créer un compte dans n'importe quel magasin et avoir toujours accès à toutes leurs informations en un seul endroit..

Notez que vous ne souhaitez toujours pas prendre en charge plusieurs langues. Dans ce cas, ce scénario correspondrait à un site Web: un magasin de vêtements pour hommes, un magasin de vêtements pour femmes et une vue de magasin par défaut..

Troisième scénario: plusieurs sites Web, plusieurs vues de magasin

Au fur et à mesure que votre entreprise se développe, vous souhaiterez peut-être au final l’agrandir de manière à ce qu’elle propose un magasin d’accessoires pour compléter votre magasin de vêtements.. 

En outre, dans chaque magasin, vous souhaitez partager des informations sur le client et prendre en charge plusieurs langues. Ce scénario comprend deux sites Web et deux magasins: 

  1. Vêtements
  2. Accessoires

Cela donne deux vues de magasin: une vue de magasin anglais et une vue de magasin espagnol.

Des possibilités

Les possibilités de créer l'instance d'un site Web, d'un magasin et de vues de magasin dépendent de vos besoins. Vous pouvez configurer autant de sites Web, de magasins et de vues de magasin que vous le souhaitez, à partir de Panneau d'administration Magento> Système> Gérer les magasins.

Magento Design: Interfaces et thèmes

Nous avons vu que Magento nous permet de configurer plusieurs magasins dans une seule configuration Magento. Sur cette base, cela nous permet également de donner une apparence différente aux différents sites Web, magasins et vues de magasin. Ceci est possible grâce à Des thèmes. Nous pouvons créer autant de thèmes que nous le souhaitons et nous pouvons également appliquer différents thèmes à différents magasins..

UNE Forfait Design se réfère à la collection de divers thèmes. Accédez à votre répertoire Magento app / design / frontend.Ici, vous pouvez voir le paquet "Base". Ceci est le package par défaut fourni avec Magento. Ce paquet porte un nom différent dans chaque version de Magento. Par exemple, dans Community Edition, ce package nommé est "Base", dans Pro Edition, ce package est "Pro" et dans Enterprise Edition, il est nommé "enterprise".. 

En plus de cela, vous pouvez ajouter votre propre paquet sous l'extrémité avantannuaire. Dans les versions précédentes de Magento, les packages de conception sont appelés interfaces.

Des thèmes sont une collection de fichiers - c’est-à-dire des modèles et des skins - qui rendra la présentation réelle sur le serveur frontal. En fonction de nos besoins, nous pouvons modifier la mise en page en modifiant et en créant de nouveaux fichiers de modèles dans des thèmes particuliers.. 

Un package de conception peut avoir plusieurs thèmes connexes, mais il est recommandé que chaque package ait un thème par défautrendre par défaut lorsque Magento ne peut pas trouver un autre thème.

Plus sur les thèmes

Chaque thème de Magento a deux types de répertoires:

  1. Le répertoire de modèles contient la disposition, le modèle et le sous-répertoire local sous app> design> frontend> votre paquet de thème> votre thème.
           
    La disposition
     Le répertoire contient les fichiers XML utilisés pour créer la structure de bloc de base des thèmes..

    Le gabarit
     Le répertoire contient tous les fichiers PHTML (PHP + HTML) utilisés pour créer le code HTML des thèmes. Les fichiers modèles permettent également le code PHP afin que nous puissions créer des pages HTML dynamiques
    Le lieu Le répertoire contient des fichiers CSV qui sont principalement utilisés pour stocker des chaînes liées à plusieurs langues afin de prendre en charge plusieurs langues..
  2. Le répertoire de la peau contient les sous-répertoires CSS, JavaScript et images sous skin> frontend> votre paquet thématique> votre thème.

    CSS contient tout css fichiers liés à ce thème particulier.

    JS contient tout js fichiers liés à ce thème particulier.
    Images contient toutes les images liées à un thème particulier.                                                     

Variations de thème

Magento nous permet de créer autant de variations de thèmes que nécessaire. Lorsque vous travaillez avec plusieurs magasins, vous pouvez affecter différentes variations de thème à différents magasins. Vous pouvez créer des variations de thème en copiant le thème par défaut dans un nouveau thème et en appliquant des variations CSS mineures à ce nouveau thème..

Par exemple, supposons que vous ayez créé deux magasins qui partagent la même information, mais que vous souhaitiez que le client ressente une différence en termes de couleur et de disposition des deux magasins. Dans ce cas, vous pouvez créer deux variantes de thème, leur attribuer chacune un thème différent. css, js, et images puis les appliquer à des magasins individuels.

Une note sur le thème par défaut

Comme mentionné précédemment dans cet article, il est recommandé de définir un thème par défaut dans chaque package de conception. Parce que lorsque vous n’avez assigné aucun thème à votre boutique, Magento recherchera le thème par défaut selon le système de remplacement du thème.(que nous couvrirons dans la section suivante). Si ce n'est pas le thème par défaut de recherche, il retournera une erreur 404.
Lorsque vous travaillez avec une nouvelle installation Magento, il utilisera le package "Base" qui comprend également le thème par défaut. Pour tous les fichiers requis qui ne se trouvent pas dans votre thème par défaut, le thème par défaut du package de base sera recherché.. 

Il est très important que votre thème par défaut contienne tous les fichiers requis..

Système de remplacement de thème

Lorsque vous travaillez avec des thèmes Magento, il est important de comprendre le système de secours des thèmes de Magento. sinon, vous risquez de vous perdre dans le répertoire des thèmes Magento lorsque vous essayez de trouver quels blocs rendent les fichiers de quels thèmes.

Par exemple, si votre thème personnalisé appelle un fichier, dites: header.phtml, qui rendra votre en-tête, Magento recherchera le fichier en utilisant le diagramme suivant:

Conformément au diagramme, le système de secours examinera d’abord votre répertoire de thème personnalisé. S'il n'est pas trouvé, le thème par défaut figurant dans le même package que votre thème personnalisé sera examiné. S'il ne figure pas non plus dans le thème par défaut de votre package de conception, il examinera le thème par défaut du package de base. Si Magento ne parvient pas à trouver le fichier en particulier via ce processus, il affichera un message d'erreur..

Dans les versions précédentes de Magento, le système de secours par thème n'incluait pas le package de base en tant que dernière partie du système de secours. Dans les versions antérieures, le système de secours recherchait uniquement un package de conception de thème spécifique..

En incluant le package de base dans le système de secours, Magento nous permet de gérer notre thème plus facilement avec uniquement les fichiers requis. Par exemple, disons que vous souhaitez appliquer une apparence complètement différente à vos deux magasins, à l'exception des pages du compte client. Ceci est possible en créant deux variantes de thèmes et en tirant parti du système de repli.

Pour ce faire, vous devez créer deux variantes de thème et un thème par défaut contenant tous les fichiers requis. Ce faisant, votre package de conception contient un thème par défaut et deux variantes de thème.. 

Vos deux variantes de thème doivent contenir tous les fichiers personnalisés que vous enregistrez pour les pages du compte client (car ils sont communs aux deux thèmes). Ainsi, lorsque Magento commencera à restituer les fichiers de votre thème particulier, il se repliera sur les pages du compte client du thème par défaut, car elles n'ont pas été définies dans notre thème personnalisé..

Blocs Et Layouts

Les blocs et les mises en forme peuvent être de nouveaux termes pour vous, mais pour être un concepteur performant de Magento, vous devez comprendre ces concepts..

Des blocs

Les blocs sont l'entité principale à travers laquelle Magento rend la présentation frontale. Grâce à l’utilisation de blocs, Magento différencie différentes parties des mises en page. Fondamentalement, il existe deux types de blocs.

Blocs structurelssont les grandes lignes de tout agencement frontal dans Magento.Ils contiennent généralement les sections En-tête, Gauche, Droite, Principale et Pied de page d'un modèle..

                                           

Les blocs de contenu sont les blocs réels qui résident dans les blocs structurels pour produire la sortie visuelle finale. Ces blocs présentent les fonctionnalités spécifiques aux blocs via HTML. La liste des catégories, la liste des produits, la liste des sous-catégories, les balises de produits, les sections de produits de la page d'accueil, etc., sont les blocs de contenu du bloc structurel.

                                          

Layouts

Enfin, les présentations sont les fichiers XML qui mappent votre page avec des blocs structurels et des blocs de contenu. Chaque fichier de mise en page contient les balises, grâce auxquelles vous pouvez contrôler des blocs particuliers. 

Chaque module Magento a des fichiers de disposition distincts pour vous permettre de gérer facilement les dispositions spécifiques au module..

Conclusion

Cet article vise à fournir un point de départ complet sur le point de départ du développement du thème Magento..

Vous avez encore des questions? N'hésitez pas à laisser des commentaires, des questions ou d'autres commentaires généraux dans les commentaires.!