Guide du designer en français

Last modified by SeL on Wed, November 19, 2008 06:56
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 parceque 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.




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs