Source : Version original : http://www.magentocommerce.com/wiki/groups/140/guide_du_designer_en_francais
Guide du designer Magento en français
Attention, ce document est dépassé avec la version actuelle de Magento. Le concept a évolué avec un nouveau niveau de gestion mais le principe reste le même. Le concept lors de la rédaction de cette page était : Sites Web → Boutiques Actuellement, le concept ressemble à ceci : Sites Web → Boutiques → Vue Boutiques.
Le Site Web peut contenir plusieurs boutiques qui elles-mêmes peuvent contenir plusieurs Vues Boutiques qui consistent généralement en des versions de langues différentes.
Vous avez entendu parler des fonctionnalités open-source incroyables intégrées dans Magento. Vous êtes impatient de voir tout cela en action et vous voulez en faire le tour rapidement.
… et maintenant, vous souhaitez faire de cette boutique la vôtre. Vos PSD sont prêts et vous êtes motivé pour les intégrer. Alors ensuite … Par quoi commencer ?
Le guide du designer pour Magento a été réalisé pour que vous puissiez apprendre et étendre vos connaissances sur la structure, les concepts et les méthodes pour faire du design sous Magento – Ca tutoriel vous apprendra ce que vous devez savoir pour commencer à réaliser votre propre thème sous Magento. Ceci dit, étant donné les possibilités d’extensions et le niveau de flexibilité offerts par Magento, il n’est pas possible de documenter toute les façons qui vous permettront de le personnaliser. Pour obtenir de l’aide à ce propos, vous pouvez consulter les forums (français ou anglais) de la communauté et le wiki où des personnes avec de l’expérience pourront vous guider dans la bonne voie rapidement. Aussi, rappelez-vous que Magento est une application en perpétuel développement, et c’est pourquoi ce guide ne sera peut-être pas exactement adapté à la version de Magento que vous utilisez. attendre l’information que vous cherchez. Cependant étant donné que chaque chapitre est un prélude pour le suivant, nous vous recommandons de suivre la documentation dans l’ordre qu’elle a été rédigée.
Chapitre 1 – Terminologie du design sous Magento
|
|
Avant de parcourir la documentation, il est crucial que vous ayez une bonne compréhension des termes utilisés pour décrire les aspects du système de Magento. Les termes abordés dans ce chapitre ne vous sont pas familier pour la plus-part, alors prenez le temps de les étudier méticuleusement. Mais plus important, ne vous découragez pas si vous n’arrivez pas à comprendre complètement le concept de tous ces nouveaux termes – Ce chapitre veut simplement tous vous les présenter d’un coup, mais dans les chapitres suivants, nous entrerons plus en détails dans leur signification que ces simples définitions. Les termes couverts dans ce chapitre sont :
Un site web est un ensemble de boutiques qui partagent les mêmes clients, commandes et également les paniers. C’est un terme très générique qui peut être utilisé pour définir les besoins uniques de chaque marchant. Voici quelques scenarios pour définir les différentes utilisations d’un site web :
Une entreprise nommée Dubloo Inc se crée une présence Internet avec 3 boutiques de vêtement séparées qui s’occupent chacune d’une cible de consommateurs différente suivant leurs tarifs. Dubloo Inc veut avoir la possibilité pour ces trois boutiques de partager les comptes clients et les commandes. Dans ce scénario, Dubloo Inc voudrait avoir un Site Web et trois Boutiques sous leur même domaine. Boutique désignera les différentes boutiques pour chaque gamme de tarif, et Site Web sera l’élément qui englobe/regroupe ces boutiques.
Une entreprise nommée My Laptops voudrait ouvrir deux Sites Web qui vendront chacun des pc portables mais à des tarifs différents. Ils veulent en plus proposer des options de langues en English et Spanish pour chaque Site Web, chacune proposant ses propres produits en fonction de la langue sélectionnée. Ils auront aussi besoin de synchroniser les clients et les commandes par site. Dans un tel scénario, Boutique définira chaque English et Spanish ramification sous leur Site Web respectif. Un Site Web définira “My Laptops” et “Cheap Laptops”.
Une entreprise appelée Bongo’s Instruments veut se créer une présence sur Internet. Avec aucune ramification de Boutique, Bongo’s Instruments est à la fois la Boutique et le Site Web.
Interface est une collection de thèmes qui déterminent le rendu visuel et les fonctionnalités du frontend de votre boutique. Une interface peut être assignée à l’un ou l’autre des niveaux de Sites Web, niveaux de Boutiques ou au niveau du Site Web et de la Boutique à travers l’interface d’administration. (Découvrez comment assigner une Interface à un Site Web/Boutique).
Si vous assignez une interface à un niveau de Site Web, toutes vos boutiques hériteront de l’Interface de votre Site Web. Vous pourrez ensuite assigner une Interface au niveau de la Boutique qui prendra le dessus sur celle du Site Web. Imaginons que vous travaillez sur 4 différentes Boutiques sous un Site Web commun appelé “John’s Panacea” – En examinant les effets de chaque méthode comme expliqué avant, vous pouvez facilement déterminer la méthode à employer pour personnaliser chacune de vos Boutiques en fonction de ses besoins.
Déclaration au niveau du Site Web
|
Si vous voulez créer un style uniforme pour toutes vos Boutiques, vous pouvez assigner une Interface au niveau du Site Web. Vos boutiques hériteront alors de l’Interface du Site Web principal.
Déclaration au niveau de la Boutique
|
Si vous voulez définir un style particulier pour chaque Boutique, vous pouvez leur assigner à chacune une Interface ; auquel cas chacune des boutiques possédera sa propre identité.
Un thème est une combinaison de Layouts, de Templates et/ou de Skins qui gèrent l’ergonomie de votre Boutique. Magento a été conçu avec la capacité de charger plusieurs thèmes à la fois, et doit par conséquent considérer les thèmes dans 2 catégories :
Chaque Interface doit posséder un Thème nommé ‘default’ qui est le Thème principal de l’Interface. Quand vous assignez une Interface à votre Boutique, l’application cherche automatiquement le Thème ‘default’ et le charge sur le frontend. Si vous voulez personnaliser le design de votre Boutique, vous pouvez simplement modifier ce Thème, ou créer un Thème supplémentaire et le charger par dessus le Thème par default. Le Thème par défaut doit contenir toutes les Layouts, les Templates et les Skins requis pour que la Boutique s’exécute sans erreur. Il est le Thème de base, au premier niveau de la hiérarchie des Thèmes.
Les Thèmes qui ne sont pas par défaut
|
Les autres Thèmes peuvent contenir uniquement les fichiers qui changent de votre Thème par défaut ou redéfinir tous les fichiers selon votre besoin. Ce genre de Thème vise par exemple à définir un style graphique différent pour votre Boutique suivant les saisons sans avoir à recréer un Thème complet par ‘default’. – En créant uniquement quelques images et en mettant à jour le CSS, vous pouvez facilement adapter votre boutique standard en boutique festive pour Noël.
Un Thème est constitué par l’une ou toutes ces choses :
-
Layout (situé dans app/design/frontend/votre_interface/votre_theme/layout/). Ce sont des fichiers
XML basics qui déterminent les structures des blocs pour les différentes pages mais qui contrôlent également les META informations et l’encodage des pages. For in-depth look into layouts, read Intro to Layouts) (Pour enter plus en profondeur dans le concept de Layout, vous pouvez lire Introduction aux Layout (plans))
-
Templates (situé dans app/design/frontend/votre_interface/votre_theme/template/). Ce sont des fichiers PHTML qui contiennent des balises (X)
HTML et le code
PHP nécessaire pour gérer l’affichage des informations.
-
Skins (located in skin/frontend/votre_interface/votre_theme/). Ce sont des ensembles de Javascript,
CSS et fichiers images qui complètent votre (X)
HTML.
Diagram 1. Blocks Structurels (Indiqués en bleu)
Diagram 2. Blocks de Contenu (Indiqués en orange)
Les Blocks sont une façon par laquelle Magento distingue les ensembles de fonctionnalité dans le système et crée un module pour les gérer visuellement et fonctionnellement. Il y a deux type de Blocks et ils travaillent ensemble pour gérer le rendu visuel.
Au lieu d’insérer les templates les uns à la suite des autres comme dans les applications d’eCommerce typiques pour obtenir la totalité de la sortie (X)HTML, Magento rassemble et arrange le contenu des pages par l’intermédiaire des Blocks.
C’est à peu prêt tout pour ce qui est des termes ! – Dans le prochain chapitre, on se familiarisera un peu plus avec les Thèmes sous Magento.
Chapitre 2 – Travailler avec les thèmes sous Magento
|
|
Dans ce chapitre, nous allons rentrer dans les détails sur comment Magento manipule les Thèmes et vous apprendre à créer et gérer votre propre Thème :
-
En quoi la gestion des Thèmes sous Magento est-elle différente des autres
-
Comment créer un Thème
-
Comment assigner un Thème et une Interface à une Boutique
-
Découvrez les Thèmes multiples
-
Hiérarchie des Thèmes : Comment Magento gère les Thèmes multiples
En quoi la gestion des Thèmes sous Magento est-elle différente des autres
|
Le terme Thème vous est certainement familier. Vous avez déjà, en tant qu’utilisateur ou créateur, expérimenté les possibilités offertes à une application web par ses Thèmes. Un Thème a deux grands types d’utilisateurs – Premièrement, le type utilisateur qui l’expérimente à travers l’esthétique et l’ergonomie d’une boutique en navigant dans celle-ci – et deuxièmement, le type créateur qui va rentrer dans une autre dimension du Thème en prenant part à sa réalisation.
Pour le premier type d’utilisateurs, la découverte d’une boutique est définie par sa capacité à répondre à ses besoins fonctionnels et émotionnels. Pour le deuxième type d’utilisateur qui doit tenir le rôle de créateur, c’est l’efficacité avec laquelle il va pouvoir compléter les développements qui détermine son impression de la Boutique. Nous avons reconnu que ce sont les ressentis de ces deux types d’utilisateur qui déterminent la rentabilité finale de la Boutique, par conséquent aucun de ces ressentis ne peut être ignoré.
Parceque nous savons qu’en tant que Designer vous avez déjà réalisé la charte graphique des principaux éléments de votre boutique, nous supposons que nous aurons juste à vous aider en réalisant une gestion incroyables des Thèmes pour optimiser votre flux de travail efficacement et booster votre créativité. Voici plusieurs choses qui, nous le pensons, vont vous ravir :
-
Une puissance de personnalisation maximum. Avec Magento, vous pouvez personnaliser l’esthétique et l’ergonomie de votre Boutique au niveau de chaque Catégorie et Produit, vous donnant un pouvoir marketing extraordinaire. N’avez-vous jamais imaginé pouvoir présenter chaque produit dans un univers qui lui est propre ? Magento vous donne la possibilité de le faire et bien plus encore, en fournissant des méthodes rapides de personnalisation de la présentation de vos produits sur la base d’une gestion par produit ou par catégorie.
-
Thèmes multiples. Magento vous donne la possibilité de charger plusieurs Thèmes à la fois, vous permettant ainsi de choisir entre un Thème par défaut et un Thème spécifique à une saison, un événement, …
-
Flux de travail ininterrompu. Avec la programmation pleinement orientée objet de Magento, tous les modules sont immédiatement accessibles par les tags de Templates de chaque fichier de Template. Et parce que Magento est livré avec une tonne de fonctionnalités, vous ne serez plus dépendant d’un programmeur pour terminer de développer les fonctionnalités basiques de votre Boutique. Magento s’appuie également sur un vaste réseau de membres de la communauté bien informés (y compris l’équipe officielle de Magento), vous n’aurez donc pas à réfléchir à deux fois où obtenir des conseils si vous en avez besoin.
-
Réduisez au minimum le temps de correction. Chaque concepteur peut se rappeler toutes ces précieuses heures et minutes passées à chercher la balise qui n’a pas été fermée. Le validateur vous dit que quelque chose ne vas pas, mais jamais où se situe ce problème. Le système modulaire de backend de Magento apporte avec lui un système de Template modulaire qui réduit la quantité de (X)
HTML que vous devez manipuler à la fois. Moins de désordre signifie moins de problèmes et plus de tranquillité d’esprit pour les choses vraiment importantes.
Le véritable atout qui vous est offert par Magento, c’est une application forte de sa flexibilité, vous permettant de vous concentrer un maximum sur les prochains front-end d’exception que vous développerez. Il n’y aucune limite avec cette application, et nous espérons que vous prendrez du plaisir à l’utiliser pour votre boutique.
Commençons par dévoiler quelques dossiers importants. Ouvrez les dossiers suivant à la racine de Magento et soyons curieux :
Quand vous travaillez avec les Thèmes, ces deux dossiers seront toujours votre point de départ. Comme vous avez pu le remarquer, nous avons séparé les fichiers de Thème en deux parties. En séparant les fichiers qui doivent être accessibles depuis le web (comme les images ou le javascript), de ceux qui doivent être cachés, nous nous sommes assurés que Magento vous offre des mesures de sécurité maximales pour votre boutique à tout point.
Avançons et examinons ces deux dossiers. Tout d’abord, nous remarquons l’utilisation des noms de dossier “default/default” dans les dossiers 1 et 2 comme ceci :
Dans les 2 cas, * indique le nom de l’Interface, et * indique le nom de Thème. Donc si vous êtes en train de travailler sur un Thème nommé “my_theme” dans une Interface nommée “my_interface”, vous devriez travailler dans le dossier ‘app/design/frontend/my_interface/my_theme/’.
Créer un nouveau Thème par défaut
|
Afin de créer un nouveau Thème par défaut, vous devez d’abord copier un Thème par défaut existant sur lequel vous pourrez baser votre nouveau Thème. Créez une copie de app/design/frontend/default/default/ et renommez par ce que vous voulez (Les noms d’une Interface et d’un Thème devraient être composé uniquement de caractère alphanumériques et commencez par une lettre de l’alphabet [a-z]. Par exemple, ‘Mon nouveau Thème’ et ‘02123_mon_them’ ne sont pas bons. ‘mon_nouveau_theme’ est bon). Le nom du dossier de votre Thème est le nom par lequel l’application reconnaîtra votre Thème. Maintenant, faites la même chose pour skin/frontend/default/default. Et c’est tout ! Vous avez maintenant créé avec succès un nouveau Thème par défaut. Pour apprendre comment assigner ce Thème à votre boutique, lisez Assignez un nouveau Thème.
Créer une nouveau Thème qui n’est pas par défaut
|
Quand vous créez un nouveau Thème autre que par défaut, vous n’avez pas besoin de dupliquer tous les dossiers contenus dans le Thème par défaut. Vous n’aurez probablement que quelques changements à effectuer sur certains fichiers spécifiques, donc vous n’aurez qu’a dupliquer ces fichiers comme point de départ de votre nouveau Thème. Cependant, il y a une règle que vous devrez toujours suivre, c’est de garder la structure conventionnelle de Magento pour l’organisation de vos sous-dossiers. Par exemple, si tout ce que contient votre Thème complémentaire est le fichier de template ‘home.phtml’ du module de catalogue, dans app/design/frontend/your_interface/your_non_default_theme/ vous aurez besoin de créer les dossiers ‘template/catalog’ dans lequel vous sauvegarderez le fichier de template.
Quand vous développez l’arborescence d’un Thème par défaut de Magento (Diagram 1), vous pouvez voir comment les dossiers sont structurés – Soyez certains de conserver cette convention de structure dans vos nouveaux Thèmes pour que tout se passe bien.
Assigner une Interface et un Thème à une boutique
|
Maintenant que vous avez créé votre propre Thème (que ce soit un Thème par défaut ou non), vous devez l’assigner à un site web ou une boutique ou une vue boutique pour qu’il prenne effet. Naviguez dans le panneau d’administration (ex www.mydomain.com/admin), puis sur l’onglet Design (System → Configuration → Design tab).
Dans le coin supérieur de la colonne de gauche (Diagram 2), vous voyez un encart appelé ‘Current Configuration Scope’ (Fr:→Champ de la configuration courante).
-
Pour gérer le design de votre boutique au niveau du site web, sélectionnez le nom de votre site Web dans la liste déroulante puis réalisez les opérations suivantes.
-
Pour gérer le design de votre boutique au niveau de la Boutique, sélectionnez le nom de votre boutique dans la liste déroulante puis réalisez les opérations suivantes.
Étape 1 Depuis l’onglet Design, dans Nom du paquet courant, entrez le nom de l’Interface dans laquelle se situe votre nouveau Thème. Magento chargera automatiquement l’Interface nommée ‘default’ si ce champ n’est pas renseigné.
Étape 2 Dans Défaut (dans la rubrique Thèmes), entrez le nom du nouveau Thème que vous voulez charger par défaut. Si vous laissez ce champ vide, Magento chargera automatiquement et uniquement le Thème nommé ‘defaut’ (Rappelez-vous, quelque soit la façon dont vous configure le design, Magento chargera automatiquement le Thème nommé ‘default’. Si vous assignez un Thème dans l’admin, ce Thème sera simplement chargé au dessus du Thème par défaut.) Si vous avez besoin de charger des Thèmes différents suivant le type de fichier (Layout, Templates, Skins or Translation files), entrez le nom du Thème relatif à chacune de ces parties.
Étape 3 Une fois fait, cliquez sur le bouton Save config” et rechargez votre boutique – Voilà ! Vous voyez maintenant le nouveau Thème affiché sur le front-end.
Maintenant que vous savez comment créer et gérer des Thèmes, voyons maintenant comment Magento manipule ces Thèmes.
Découvrez les Thèmes Multiples
|
Les saisons de vacances offrent de loin la possibilité commerciale la plus étendue pour n’importe quel magasin d’eCommerce – Les clients font la queue pour acheter les cadeaux de Noël pour leur famille et leurs amis, et les mamans attendent de pouvoir acheter les costumes d’Halloween pour leurs enfants. Afin d’attirer les clients saisonniers, votre boutique doit refléter l’ambiance du moment pour inciter vos clients à visiter votre magasin. Un magasin comme celui du Diagram 3 ne serait pas intéressant en période de Noël – Ce qu’il a besoin, c’est juste d’un peu de rouge, quelques flocons et un Père-Noël – exactement comme la boutique du Diagram 4 !
Diagram 3. La boutique de base
Diagram 4. Ce que vous souhaitez
Avec Magento, nous avons créé la capacité pour votre boutique de manipuler plusieurs Thèmes de votre choix en fonction des occasions. En chargeant plusieurs Thèmes sur votre Boutique, vous préservez votre Thème classique et lui ajoutez les spécificités de votre Thème de Noël.
En observant les deux designs ci-dessus, vous remarquez les similitudes dans l’organisation générale du design. Le style est devenu celui de Noël dans le Diagram 4, mais en dessous vous pouvez voir la structure du design classique de la boutique. La seule réelle différence entre ces deux design de boutique repose sur quelques CSS, fichiers images et mots qui changent dans le fichier de Template. Comme les changements sont minimes, vous n’avez pas besoin d’un nouveau Thème par défaut complet pour votre style Noël. Ce dont vous avez besoin, c’est juste quelques remplacements de fichiers, et vous aurez alors un magasin plus joyeux et plus adapté à sa cible. Les fonctionnalités de Thèmes multiples sous Magento ont été créé pour personnaliser votre boutique exactement comme vous le désirez, tout en préservant le Thème de base. Vous pourrez alors en quelques clics rappeler le Thème de base ou un de ses Thèmes dérivés en fonction de vos envies.
Le principe de chargement de Thèmes multiples repose sur un principe de Hiérarchie. Seuls les fichiers présents dans un point plus haut de la Hiérarchie écrasent les fichiers de base. C’est vous qui déterminez la hiérarchie dans le panneau de configuration du design dans l’admin.
Quand vous assignez plusieurs Thèmes à votre boutique, vous tirez profit essentiellement du fait que votre but principal quand vous réalisez une boutique est de créer une interface la plus ergonomique et la plus esthétique possible, le rôle de Magento étant de s’assurer que l’application est capable de trouver tous les fichiers du Thème requis pour préserver une exécution sans erreur.
Par exemple, si votre page de listing de la catégorie appel un template fichier de template nommé ‘view.phtml’ (auquel cas ce fichier devient un fichier requis), mais que l’application n’est pas capable de trouver le fichier dans le Thème le plus haut de la Hiérarchie, elle cherchera dans le Thème juste en dessous dans la Hiérarchie pour essayer de trouver le fichier. Si elle échoue, elle continuera à descendre dans la hiérarchie des Thèmes jusqu’à ce qu’elle puisse trouver le fichier nommé ‘view.phtml’, elle l’affichera alors dans la boutique et arrêtera là la recherche. Cette méthode de gestion du design est appelée fallbacks, parceque l’application ‘se rabat sur’ la possibilité suivante de trouver la source jusqu’à ce qu’elle y arrive et la charge.
Disons que vous avez 3 Thèmes assignés à votre boutique et chacun de ces Thèmes contient les fichiers suivant :
Table 1
| default |
my_theme_1 |
my_theme_2 |
| All required files |
templates/3-col-layout.phtml |
templates/3-col-ayout.phtml |
|
templates/header.phtml |
css/base.css |
|
images/logo.gif |
|
|
css/base.css |
|
|
css/boxes.css |
|
Supposont également que les 3 Thèmes sont organisés hiérarchiquement de cette façon :
Table 2
| HIGHEST |
my_theme_2 |
|
my_theme_1 |
| LOWEST |
default |
À première vue, vous remarquez qu’il y a plusieurs fichiers redondants comme templates/3-col-layout.phtml et css/base.css dans Table 1. Arrangeons mes pour qu’ils soient affichés les uns en face des autres.
Table 3
| default |
my_theme_1 |
my_theme_2 |
| All required files |
|
|
|
templates/3-col-layout.phtml |
templates/3-col-layout.phtml |
|
templates/header.phtml |
|
|
images/logo.gif |
|
|
css/base.css |
css/base.css |
|
css/boxes.css |
|
Ok, bien. Mais qu’est ce que cela signifie ? vous demandez vous. Et bien, laissez nous vous rappeler que les fichiers dans la Table 3 sont comme vous les voyez dans chaque Thème et non comme Magent les voit.
Regardez maintenant comment Magento voit ces même fichiers dans la structure de la Table 4.
Table 4
| default |
my_theme_1 |
my_theme_2 |
| All required files |
|
|
|
|
templates/3-col-layout.phtml |
|
templates/header.phtml |
|
|
images/logo.gif |
|
|
|
css/base.css |
|
css/boxes.css |
|
Vous remarquerez que Magento ignore les versions des fichiers redondants dans les parties plus basses de la hiérarchie et ne reconnait que les versions les plus hautes. C’est pour ça qu’il trouve toujours les fichiers requis et n’a pas besoin de les chercher plus longtemps.
Dans ce chapitre, vous avez appris comment les Thèmes sont créés et gérés. Dans le chapitre suivant, nous vous montrerons étape par étape comment construire votre Thème. Vous découvrirez les Layouts, Templates et Skins – Soyez sûr d’avoir déjà lu le chapitre Terminologie du design sous Magento avant d’accéder au chapitre suivant.
Chapitre 3 – Construire votre propre thème
|
|
Magento est conçu sur une base totalement modulaire, ce qui donnera à votre boutique des facultés d’extensibilité et de flexibilité illimitées. A TRADUIRE → “By nature of the application, this approach to programming is mirrored in the way you will develop themes for your store.” In this chapter, we will explore what that means for you and exactly how to go about developing a theme for your store with Magento. Dans ce chapitre, nous découvrirons ce que cela signifie pour vous et comment développer un thème pour votre boutique avec Magento.
Introduction aux Blocks et Layout
|
Vous avez très probablement travaillé avec d’autres applications d’eCommerce avant d’arriver à Magento – avec une telle expérience, nous savons que vous avez probablement développé quelques habitudes pour ce qui est de développer des thèmes pour votre boutique. Avant de lire cette doc, nous ne pouvons que vous conseiller d’oublier toutes vos anciennes façons de faire. Tout ce que cela signifie, c’est qu’il y a quelques nouveautés que vous devez apprendre et avec elles, les nouveaux outils que nous souhaiterions vous faire découvrir. Familiarisez-vous avec ces outils, gardez les sous la main en permanence et assurez-vous de leur porter toute votre attention – Faites tout cela, et nous vous promettons “you will love yourself for it”. Etes-vous prêt ? Les voici :
-
Blocks structurels
-
Blocks de contenu
-
Layout
Représentation schématique
|
Pour vous donner une compréhension claire de ce que sont les Blocks et les Layouts, voici un schéma que vous pourrez dessinez pour vous-même :
-
Imaginez les arrêtes d’un Block vide (diagram 1 – Nous ne ferrons pas référence au diagram à chaque fois.)
-
Maintenant, imaginez les arrête d’un Block contenant un Block.
-
Maintenant imaginez deux Blocks et les arrêtes qui englobent ces deux Blocks.
-
Maintenant imaginez 3 Blocks et les arrêtes qui les englobent tous les 3.
-
Maintenant imaginez 4 Blocks et les arrêtes les englobant.
-
Maintenant, regardez cette capture de la page de catégories dans Magento :
-
Et maintenant regardez ces captures avec la décomposition en deux types :
Le schéma que vous venez juste de créer sert à faire un parallèle entre le concept et l’organisation actuelle des Blocks. Je pense que vous être probablement perdus. Laissez-moi vous expliquer.
Dans le schéma, les arrêtes dans le diagram 2 sont les Blocks structurels. Ce sont les Blocks parents des Blocks de contenu et dans la réalité, servent à positionner ces Blocks de contenu à l’intérieur d’une page de la boutique (comme dans le diagram 3). Ces Blocks de structure prennent la forme de la zone d’en-tête, la zone de la colonne à gauche, la colonne de droite, … qui servent à créer la structure visuelle d’une page.
Un Block de contenu quant à lui, dans le schéma, est un Block coloré individuel qui compose un Block structurel. Dans le contexte d’une boutique, ils sont le contenu réel de la page. They are representations of each functionalities featured in a page (such as category list, callout and product tags…etc.), Ils sont la représentation de chaque fonctionnalité dans la page (comme : category list, callout and product tags…etc.), et utilisent des fichiers de template pour générer le (X)HTML à insérer dans leur Block structurel parent.
Layout est l’outil avec lequel vous pouvez assigner les Blocks de contenu à chaque Block structurel que vous créez. Les Layouts existent sous la forme de fichier texte XML et en les modifiants, vous serez capable de bouger les Blocks sur la page et assigner des Templates aux Blocks de contenu pour produire le code des Blocks structurels. En fait, grâce à seulement quelques fichiers Layouts, vous êtes capable de modifier le rendu visuel de chacune des pages de votre boutique. Apprenez-en plus à propos des Layouts dans Introduction aux Layout.
Avec Magento, vous n’aurez plus besoin de fichier de template nommé colonne_gauche.ext et tout son code spaghetti qui doit être géré manuellement en fonction de chaque fonction présente sur la page. Au lieu de ça, vos templates sont gérés par de simples fonctions et vous pouvez charger ou non ces fonctions dans la page de votre boutique grâce à l’utilisation seule des Layouts.
Guide de création d’un Thème pas à pas
|
Voici la liste complète de ce que Magento vous propose pour générer vos Thèmes :
-
Templates
-
Layouts
-
Blocks
-
Skins (images,
CSS et Javascript)
Dans le but de créer un thème pour voter boutique, votre méthodologie devrait ressembler pas à pas à ceci :
UN : Désactivez le système de cache
|
Pour préparer Magento aux travaux, vous devez d’abord désactiver le système de cache en allant dans l’admin (http://yourhost.com/admin) et en navigant vers System → Cache Management. Sélectionnez “désactivé” dans “All Cache” et cliquez sur “Sauvegarder les paramètres du cache”. En faisant ça, vous vous assurez de voir en temps réel les véritables modifications que vous opérez sur la boutique.
DEUX : Déterminez toutes les possibilités de type de structure pour votre boutique
|
Avant de commencer à créer le code de la boutique, vous devez d’abord vous demander quels types de structures de pages vous aimeriez avoir pour chacune des pages de votre boutique. Faites-vous une liste qui ressemble grossièrement à ceci :
-
La page d’accueil utilisera la structure en 3 colonnes
-
Les pages de listing de catégorie utiliseront la structure en deux colonnes avec une colonne à droite
-
La page de compte client utilisera la structure en deux colonnes avec une colonne à gauche
Une fois votre liste complète, vous pouvez créer les balises (X)HTML de chaque type de structure et les sauver en temps que Template “squelette” dans app/design/frontend/your_interface/your_theme/template/page/. Un Template “squelette” est appelé ainsi du fait de la nature de son contenu – tout ce qu’il contient réellement (à part pour les éléments de la balise <head>), sont les balises de présentation qui servent à positionner chaque Block structurel dans les emplacements prévus.
Exemple de Template “squelette”
En observant l’exemple ci-dessous, vous remarquez que des fonctions PHP sont appelées <?=$this→getChildHtml()?> dans chaque balise de présentation. C’est la façon dont Magento charge les Blocks structurels dans les Template “squelette” et est ainsi capable de positionner tout le contenu des Blocks structurels sur une page de la boutique.
Chaque getChildHtml appelle un nom comme
-
<div class= »header »><?=$this->getChildHtml(‘header’)?></div>
et ces noms représentent le Block structurel identifié dans le Layout. Les Templates “squelette” sont assignés à la boutique à travers les Layouts.
TROIS : Découpez vos (X)HTML en fonction des fonctionnalités
|
Une fois que vous avez créé vos Templates “squelette”, vous aurez maintenant besoin de créer des Templates pour chaque Block de contenu.
A TRADUIRE : « Magento likes meaningful templates »
|
Vous aurez besoin de découper le code (X)HTML de vos pages et fournir le code nécessaire à chaque fonctionnalité de la page. Par exemple, si vous avez une zone de mini-panier dans votre design, le code de cette zone aura sont propre fichier de Template. De même pour les tags produits, la souscription à la newsletter, … Toutes ces fonctionnalités sont déjà incluses dans Magento, donc vous pourrez vous baser sur le code des Templates actuels pour créer le vôtre.
Où sauvegarder les Templates ?
|
Diagram 5
Le code complet de chaque page de la boutique est composé d’un ensemble de Templates qui représentent chacun une fonctionnalité ou un module. Pour trouver quel Template est appelé dans une page que vous souhaitez modifier, vous pouvez activer “Astuce chemin des gabarits”. Pour le rendre actif :
-
Allez dans l’administration et naviguer jusqu’à Système → Configuration
-
Sélectionnez votre boutique en haut à gauche
-
Quand la page est rechargée, sélectionnez Développeur à gauche et choisissez “oui” pour “Astuce chemin des gabarits”
Une fois fait, retournez sur le frontend de votre boutique, rechargez la page et vous verrez apparaître le chemin des Templates de chaque Block. Pour modifier le code, tout ce que vous avez à faire est de suivre le lien désigné et le modifier à votre convenance.
QUATRE: Changer les Layouts pour qu’ils correspondent à votre design
|
Une fois que vous aurez modifié quelques morceaux de code, vous aurez probablement envie de savoir comment bouger les Templates dans une page.
Pour accéder aux fichiers de Layout, allez à app/design/frontend/your_interface/your_theme/layout/. Tout comme les Templates, les Layouts sont sauvegardés dans des dossiers par module. Par conséquent, vous pouvez appliquer la même logique pour localiser les fichiers à modifier. ( Exemple: si vous êtes dans une page de produit ou de catégorie, vous travaillerez dans catalog.xml. Si vous êtes dans une page de validation, vous travaillerez dans checkout.xml. Si vous êtes dans une page de login utilisateur, vous travaillerez dans customer.xml) A TRADUIRE : “Each layout file(should it be necessary) further sections into per-page basis layout command.” Chaque zone de Layout par page est clairement identifiée par des commentaires, mais l’application elle-même reconnait la séparation des Layouts par les manipulateurs de chaque Layout.
Layout par défaut contre update des Layout
|
Il y a deux type de Layout – par défaut et mis à jour. Un Layout par défaut (page.xml) est le Layout qui s’applique de lui-même à toutes les pages de la boutique. Tous les autres fichiers de Layout sont des mises à jour de Layout qui mettent à jour simplement les layouts de la page par défaut.
Prenons en exemple votre Template “Squelette” : Dans le Layout par défaut, vous l’avez défini sur 3 colonnes, ce qui signifie que par défaut, la plupart des pages de votre boutique auront une structure 3 colonnes par défaut. Mais vous ne voulez pas de cette structure 3 colonnes pour les pages de produits. Pour cela, vous souhaitez plutôt utiliser une structure à 2 colonnes avec une colonne sur la droite. Pour réaliser cela, ne touchez pas au Layout par défaut et ouvrez catalog.xml dans lequel vous placerez quelques commandes de Layout qui demanderont à l’application de charger la structure 2 colonnes pour la page de produits au lieu de celle à 3 colonnes par défaut. Ceci est appelé le procédé de mis à jour des Layouts.
Exemple d’assignation d’un Template “Squelette”:
-
<reference name= »root »>
-
<action method= »setTemplate »>
-
<template>page/2columns-right.phtml</template>
-
</action>
-
</reference>
Prenons un autre exemple : Disons que par défaut vous voulez une case à cocher pour souscrire à la newsletter mais que vous ne la voulez pas sur la page de compte utilisateur. Dans ce cas, ne touchez pas au Layout par défaut et ouvrez customer.xml, dans lequel vous placerez une commande qui désactivera le Block de contenu de la newsletter, excluant les fonctionnalités de la newsletter pour cette page.
Dans ce chapitre, nous avons vu en détail comment modifier un Thème. Dans le chapitre suivant, nous rentrerons en détail sur comment modifier les Layouts.
===== Chapitre 4 – Introduction aux Layouts =====. A première vue, vous aurez besoin d’un solide bagage en programmation pour modifier les pages de Layout. C’est pourtant assez simple. Un Layout est construit sur la base de quelques balises XML qui sont rapides et faciles à apprendre. En apprenant quelques concepts clefs et commandes d’un Layout, vous serez rapidement opérationnel pour modifier en toute confiance le design de votre boutique.
Comment fonctionnent les Layouts
|
Un Layout est un composant virtuel de l’application Magento. En modifiant les composants du Layout, vous pouvez construire votre page dans une optique de maintenance facilitée.
Diagram 1
Un Layout est la somme d’un Layout par défaut et de Layout de mise à jour qui sont composés de tags XML simples. Avec ces commandes de Layout, vous pouvez modifier/assigner des Blocks de contenu, les relations de Blocks structurels et aussi contrôler les fonctionnalités du front-end en chargeant ou non des blocks spécifiques de Javascript dans une page.
Les fichiers de Layout sont organisés dans une arborescence par module, chaque module disposant de sont propre fichier de Layout (par exemple, “catalogue.xml” est un fichier de Layout pour le module catalogue, “customer.xml” est pour le module utilisateurs, …). Ces fichiers de Layout sont localisés dans app/design/frontend/your_interface/your_theme/layout/ et chaque fichier et découpé par des identifiants (handles) (voir diagram 1), chaque Handle (à l’exception de <default>) définissant ses propres directives à la page liée de la boutique.
Quelques fichiers de Layout peuvent contenir le Handle <default>. Quand il analyse les fichiers de Layout, Magento saisit d’abord les directives du Layout assignées dans l’identifiant <default> pour tous les fichiers de Layout, en les lisant suivant l’ordre défini dans app/etc/modules/Mage_All.xml. Il analyse ensuite les directives spécifiques à la page pour finaliser la construction de la page.
Le système a été construit dans l’optique de permettre des ajout et de suppression de modules sans affecter les autres modules du système.
Un Layout contient un petit ensemble de balises XML qui donnent des instructions détaillées à l’application sur comment construire la page, que construire avec et le comportement de chaque block. La meilleure façon de découvrir les Layouts est de s’y attaquer directement. Afin que vous puissiez commencer cela, voici quelques propriétés comportementales de chaque balise XML de Layout.
Un Handle (diagram 1) est un identifiant par lequel l’application détermine quoi faire avec les directives qu’il comporte.
Si le nom du Handle est <default>, alors l’application sait que ces prochaines directives devront être chargées sur presque toutes les pages de la boutique avant de charger les Layouts spécifiques à chaque page (Nous disons ‘presque toutes’ car il y a certaine exceptions comme la page de popup pour les zoom d’image produit qui ne chargent pas le Handle <default>).
Si Magento trouve des Handles autres que <default>, il assignera les directives contenues dans ce Handle à la page spécifiée par le Handle. Par exemple, <catalog_product_view> contient les directives de Layout pour la page de Visualisation Produit, alors que <catalog_product_compare_index> contient celles de la page de comparaison des produits. Les Handles sont des identifiants fixes qui ne doivent jamais être changés.
Magento détermine le comportement et la représentation visuelle de chaque module d’une page par l’intermédiaire de la balise <block>. Nous avons déjà mentionné les 2 types de Blocks que Magento utilise – Blocks structurels et Blocks de contenu. La meilleure façon de distinguer les deux et d’examiner le comportement qui leur est assigné par les attributs des balises. Un Block structurel contient habituellement l’attribut ‘as’, à travers lequel l’application est capable de communiquer avec les zones désignées (par la fonction getChildHtml) dans un Template. Vous pourrez remarquer plusieurs occurences de l’attribut ‘as’ dans le Layout par défaut, parceque par nature, le Layout par défaut est celui qui construit la base sur laquelle les Layouts spécifiques aux pages vont pouvoir se greffer. Par exemple, dans le Layout par défaut, il y a des Blocks de structure comme ‘left’, ‘right’, ‘content’ et ‘footer’ qui sont définis. Cela ne veut pas dire que ces Blocks ne peuvent pas exister dans les directives de Layout normales, mais pourquoi pas d’abord les définir dans le Layout par défaut, puis commencer à ajouter le contenu dans les Layouts spécifiques aux pages ? Avançons dans notre découvert des attributs disponibles pour les <block>.
-
type – C’est l’identifiant de la class du module qui défini les fonctionnalités du Block. Cet attribut ne doit pas être modifié.
-
name – C’est le nom par lequel les autres Blocks peuvent faire référence au Block dans lequel cet attribut est assigné (voir Diagram 3).
-
before (et) after – Il y a deux façon de positionner un Block de contenu dans un Block struturel. before=”-” et after=”-” sont les commandes utilisées pour positionner les Block au tout début ou à la fin d’un Block structurel.
-
template – Cet attribut détermine le Template qui représente les fonctionnalités du Block dans lequel les attributs sont assignés. Par exemple, si cet attribut est assigné catalog/category/view.phtml’, l’application chargera le fichier de Template ‘app/design/frontend/template/catalog/category/view.phtml‘. Pour apprendre comment les Layouts travaillent avec les Templates pour apporter un gros plus à votre boutique, lisez Construire votre propre thème
-
action – <action> sert à contrôler les fonctionnalités du front-end comme le chargement ou non d’un Javascript. Une liste complète des méthodes d’action sera bientôt disponible, mais la meilleure façon d’apprendre ces différentes méthodes d’action reste encore de jouer avec dans les directives de Layout disponibles actuellement.
-
as – C’est le nom par lequel un Template appel le Block dans lequel cette attribut est assigné. Quand vous voyez la fonction
PHP getChildHtml(’block_name’) appelée depuis un Template, vous pouvez être sûr qu’elle fait référence au Block dont l’attribut ‘as’ a reçu le nom ‘block_name’. (exemple: la méthode
<?=$this→getChildHtml(’header’)?> dans une Template “Squelette” fait référence à
<block as=“header”> )
<reference> est utilisé pour faire référence à un autre Block. En faisant référence à un autre Block, les directives dans <reference> seront appliquée au <block> auquel il fait référence (voir diagram 3).
Diagram 3
Pour faire une référence, vous devez cibler la référence par un Block en utilisant l’attribut ‘name’. Cet attribut cible l’attribut ‘name’ de la balise <block>. Donc si vous voulez faire une référence par <reference name=”right”>, vous ciblerez le Block nommé <block name=”right”>.
Si vous n’êtes pas familier avec l’XML, en rencontrant les directives de Layout pour Magento basées sur du XML, vous aurez certainement quelques questions à propos des règles que vous devrez suivre en modifiant ces fichiers XML. Le seul ensemble de règles que vous devez connaître pour ce qui est du XML, est que quand une balise est ouverte, elle doit être obligatoirement suivie par une balise de fermeture (<xml_tag></xml_tag>) ou une fermeture directe (<xml_tag/>) exactement comme devraient l’êtres les balises d’un fichier (X)HTML.
Diagram 4
Exercices rapides pour vous rendre opérationnel
|
Comme pour tout nouveau concept, nous savons que sans mettre les mains dedans, vous ne pourrez jamais vraiment saisir tout ce qui a été expliqué avec des mots. Donc voici quelques exercices pour que vous vous sentiez plus à l’aise en travaillant avec les Layouts. Pour réaliser ces exercices, vous devez avoir le Thème par défaut de Magento prêt et accessible.
Exercice #1: Dans le page de catégorie, déplacez la zone « My cart » de la colonne de droite à celle de gauche
|
-
Activez “Astuce chemin des gabarits” en allant dans l’admin puis Système → Configuration. Quand vous êtes sur la page de configuration, sélectionnez la boutique sur laquelle vous travaillez en haut à gauche. Attendez que la page se recharge, puis sélectionnez la rubrique Développeur. Choisissez “oui” dans le champ pour “Astuce chemin des gabarits”. Cliquez sur sauvegarder. Retournez sur le front de la boutique, et rechargez.
-
Quand la page se recharge, regardez le chemin de Template du Block ‘My Cart’ – il indiquera très probablement ‘frontend/default/default/template/checkout/cart/sidebar.phtml’. En regardant le chemin, vous savez que ce Template est introduit par le module ‘checkout’. Comment est-ce que vous le savez ? – frontend/default/default/template/checkout/cart/sidebar.phtml. Le chemin de Template est ainsi indiqué. Le nom de dossier qui suit immédiatement ‘template’ est le nom du module à travers lequel un Template est introduit.
-
Ouvrez layout/checkout.xml – parceque maintenant nous savons où faire les modifs pour le module ‘checkout’.
-
Chercher ‘checkout/cart/sidebar.phtml’ (le nom du Template du Block ‘My Cart’) dans les directives du Layout. Vous trouverrez une zone qui ressemble à ceci :
-
<reference name= »right »>
-
<block type= »checkout/cart_sidebar » name= »cart_sidebar » before= »- » template= »checkout/cart/sidebar.phtml »/>
-
</reference>
Changer par ce qui suit (Notez que tout ce que vous faites, c’est changer <reference name=”right”> par <reference name=”left”>).
-
Rechargez le front de la boutique et vous verrez maintenant le changement s’opérer.
Exercice #2: Séparer les liens SEO dans la zone de pied – Au lieu d’avoir les liens dans une seule liste, isolez ‘Advanced Search’ pour qu’il passe dans la zone de tête.
|
-
Vous pouvez déjà vous douter que les liens SEO doivent être assignés quelque part dans le Layout sous le Block ‘footer’ parcequ’il est appelé à travers ‘<?=$this→getChildHtml()?>’ de template/page/html/footer.phtml.
-
Ouvrez
layout/page.xml et regardez à travers la liste d’enfants sous le Block ‘footer’ pour localiser un Block qui appellerait les liens de pied – Vous trouverez
<block name=”footer_links”>, qui est ce qui appel les liens SEO. Maintenant que vous savez que la directive du Layout fait référence aux liens SEO par name=”footer_links”, vous devez maintenant faire une recherche dans tous les fichiers
XML pour trouver
<reference name=”footer_links”>. Vous trouverez les références pour le Block footer_links dans
catalog.xml (lequel appelle ‘Site Map’),
catalogsearch.xml (qui appelle ‘Search Terms’ et ‘Advanced Search’) et
contacts.xml (qui appelle ‘Contact Us’).
-
Maintenant que vous avez identifié la zone des items individuels de lien SEO, vous allez maintenant pouvoir commencer l’étape d’isolation de ‘Advanced Search’ du groupe et le faire devenir un élément à part entière dans le header. D’abord retournez sur page.xml et créez un nouveau Block <block type=”core/template_links” name=”header_links” as=”header_links” template=”page/html/links.phtml”/> que vous insérez à l’intérieur de <block name=”header”>. Vous avez fait en sorte que les directives du Layout attendent ce lien dans header.phtml. Ouvrez template/page/html/header.phtml, et entrez <?=$this→getChildHtml(’header_links’)?> où vous voulez que le lien apparaisse.
-
Maintenant, allez dans catalogsearch.xml, et coupez ceci :
-
<action method= »addLink » translate= »label title » module= »catalogsearch »>
-
<label>Advanced Search</label>
-
<url helper= »catalogsearch/getAdvancedSearchUrl » />
-
<title>Advanced Search</title>
-
</action>
dans <reference name=”footer_links”>. Créez de nouvelles lignes pour faire référence au nouveau Block header_links que vous avez créé, et insérez le code à l’intérieur comme ceci :
-
<reference name= »header_links »>
-
<action method= »addLink » translate= »label title » module= »catalogsearch »>
-
<label>Advanced Search</label>
-
<url helper= »catalogsearch/getAdvancedSearchUrl » />
-
<title>Advanced Search</title>
-
</action>
-
</reference>
-
Maintenant, vous avez le lien vers la recherche avancée dans l’entête au lieu du pied.
Ceci marque la fin du guide du design pour Magento. Nous espérons que vous avez maintenant les connaissances nécessaires sur le fonctionnement du design sous Magento. Ce serait sympa de nous faire profiter de vos travaux en nous donnant vos liens dans le forum. Partagez avec nous vos designs, échangez à propos de cette documentation et posez toutes vos questions sur les forums de la communauté en français ou anglais.
Table of Contents
Eric Kranich 