Guide du designer en français

Last modified by SeL on Wed, November 19, 2008 08:15
Source|Old Revisions  |  Back To Group

This is an old revision of the document!


Merci à alphanono pour la traduction.

Version anglaise du guide (la plus à jour).

Mise en garde

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.

Introduction

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.

Cette documentation est découpée en quatre parties principales à travers lesquelles vous pourrez naviguer rapidement pour 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 :

  • Site Web et Boutique (eng:Website and Store)
  • Interface
  • Thèmes
    • Layouts
    • Templates
    • Skins
  • Blocs
    • Blocs Structurels
    • Blocs de Contenu

Site Web et Boutique

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 :

Scénario 1

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.

Scénario 2

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”.

Scénario 3

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

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é.

Thèmes

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 :

Le Thème par défaut

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.

Blocks

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.

  • Blocks de Structure : Ce sont des Blocks créés dans le seul but de gérer une structure visuelle d’une page de la Boutique comme : header, left column, main column and footer (Diagram 1).
  • Blocks de Contenu : Ce sont des Blocks qui produisent le contenu à l’intérieur de chaque Block de Structure. Ils sont la représentation de chaque fonctionnalité dans une page et utilisent des fichiers de template pour générer le code (X)HTML qui doit être inséré dans le Block de Structure parent. Category list, mini cart, product tags et product listing…etc sobnt tous des Blocks de Contenu de leur parent (Diagram 2).

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.

Comment créer un Thème

Commençons par dévoiler quelques dossiers importants. Ouvrez les dossiers suivant à la racine de Magento et soyons curieux :

  • Dossier 1 : app/design/frontend/default/default/ - Ce dossier contient les Layout, les traductions (locale) et les Templates.
  • Dossier 2 : skin/frontend/default/default/ - Ce dossier contient les images, CSS et blocs de Javascript spécifiques.

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 :

  • Dossier 1 : app/design/frontend/default/default/
  • Dossier 2 : skin/frontend/default/default/

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. Diagram 1 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).

Diagram 2

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.

Hiérarchie des Thèmes

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

HIGHESTmy_theme_2
my_theme_1
LOWESTdefault

À 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.




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs