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

Back to TopEn 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 :

1. 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.
2. 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, ...
3. 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.
4. 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.

Back to TopComment 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.

Diagram 1

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

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.

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

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

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

Back to TopDé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 !

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.

Back to TopHié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

HIGHEST	my_theme_2
	my_theme_1
LOWEST	default

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