Comprendre la notion de theme et interface magento

Personnalisez votre site avec magento en fonction des saisons, d’opérations promotionnelles, ou de dates. Les possibilités sont variées. Vous pouvez  avoir  un site en multilingue avec un design différent pour chaque langue, un design différent en fonction des saisons pour Noël ou la Saint Valentin, plusieurs boutiques avec design différent, etc. Comment organiser toutes ces possibilités grâce aux interfaces et thèmes.

Les interfaces

L’interface contient les thèmes qui déterminent le rendu visuel et les fonctionnalités de votre boutique.
Une interface correspond à deux noms de dossier dans votre arborescence magento. Après l’installation votre interface se nomme default ils se trouvent dans:

 \app\design\frontend\default\ et skin\frontend\default\

Les Themes

Votre thème lui aussi s’appelle default. Après l’installation de magento  il se trouve dans votre interface donc :

 \app\design\frontend\default\default\.  et  skin\frontend\default\default\

Les thèmes sont les fichiers qui déterminent le rendu visuel et l’agencement de votre site.  Une boutique magento possède un design et une charte graphique définie c’est votre thème par défaut, vous aurez sûrement envie d’animer votre site pour Noël ou les soldes plutôt que de modifier votre design. Vous créez un nouveau thème appelé Noël, il comporte les éléments spécifiques à votre habillage pour Noël.

Comment créer interface ou thème ?

Vous avez la possibilité de créer une interface. Pour cela dupliquez les dossiers default  \app\design\frontend\default\ et  skin\frontend\default\ renommez-les ex: « mon-inter ». Ensuite, vous devez déclarer les changements à magento. Allez dans admin systeme configuration design et à nom du paquet (nom du paquet correspond à interface) mettez mon-inter.

Pour créer un nouveau theme dupliquer le dossier \app\design\frontend\mon-inter\default\ et renommez-le en noel  donc \app\design\frontend\mon-inter\noel\, sans oublier le dossier  skin\frontend\mon-inter\noel\. Ensuite, il faut le déclarer à magento, deux possibilités s’offrent à vous, vous pouvez retourner le 1 décembre sur admin systeme configuration design ajouter Noël et le supprimer le 10 janvier et remettre default. Deuxième possibilité allez dans admin systeme design => ajouter un changement de design sélectionnez le thème Noël et la date de début et de fin. Vous pouvez donc planifier à l’avance votre design grâce au sélecteur de date, mais également effectuer ces changements pour les pages Statique CMS  dans l’onglet « design personnalisé » ou sur les pages des catégories.

Les Themes et interface exemple.

Pour bien comprendre ces notions rien ne vaut un bon exemple. N’hésitez pas à consulter sur le site mis en ligne par magento.  Je n’ai absolument aucune idée sur la façon dont l’équipe magento a construit ce site, mais par l’exemple, leur interface par défaut  pourrait s’appeler magento-mall , et contenir plusieurs thèmes, celui par default (donc celui que vous voyez habillage bleu) et en contenir d’autres, un pour Noël ou pour les soldes, avec un habillage différent.

Continuons nos suppositions sur ce même principe l’affichage de apparel store est différent. Il pourrait être géré par une autre interface appelée « apparel store » qui contiendrait un thème par default (celui que vous voyez en gris et bleu) et également d’autres en fonction des promotions saisons.

Comme vous pouvez le constater on peut allez très loin dans la personnalisation de sa boutique ou ses multi boutiques. Les possibilités sont variées et souple. En fonction de votre site et charte graphique pour en savoir plus allez voir les schémas du designer guide de magento.

Bon à savoir :
Si magento ne trouve pas votre interface ou thème il prendra celui par default. Exemple : si vous déclarez un thème mon-inter et que vous vous trompez dans le nom de dossier vous taper « mo-inter », magento ne trouvant pas mo-inter prendra le thème default, si vous vous trompez et que vous n’avez aucun dossier default => beug.
Pour savoir quelle interface et quel thème magento utilise pour vos pages regardez le code source de votre page, dans la balise head l’import des css vous donne le chemin dans lequel magento va les chercher ex : /skin/frontend/default/default/cc/boxes.css.

Inutile de dupliquer complètement votre thème default si vous ne souhaitez changer qu’un fichier Css ou une image. Dans votre nouveau theme  »skin/frontend/default/mon-mouveau-theme »,  mettez un seul dossier css et le fichier css avec les changements. Tout ce que magento ne trouve pas dans mon-mouveau-theme il ira le chercher dans le thème default.

Liens complémentaires

Magento et les templates PHTML

Layout et magento partie 1

Les layouts magento partie 2

Changer le favicon de magento pour un design personnalisé

CSS et magento

Tutoriels magento : par quel tutoriel commencer ?