template magento, ecommerce plate forme

10/02/09 10:19 Magento - Designer Guide Page 1 sur 4 http://netambition.dynalias.org/magentoTraduction/designerGuide/how-magento-builds-content.html MENU Guide du designer pour Magento Les termes du design sous Magento Travailler avec les thèmes sous Magento Construire votre propre thème Introduction aux Layout Back to Top 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 voue 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 : 1. Blocks structurels 2. Blocks de contenu 3. 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 : 1. Imaginez les arrêtes d'un Block vide (diagram 1 -- Nous ne ferrons pas référence au diagram à chaque fois.) 2. Maintenant, imaginez les arrête d'un Block contenant un Block. 3. Maintenant imaginez deux Blocks et les arrêtes qui englobent ces deux Blocks. 4. Maintenant imaginer 3 Blocks et les arrêtes qui les englobent tous les 3. 5. Maintenant imaginez 4 Blocks et les arrêtes les englobant. Diagram 1 6. Maintenant, regardez cette capture de la page de catégories dans Magento : Diagram 2 10/02/09 10:19 Magento - Designer Guide Page 2 sur 4 http://netambition.dynalias.org/magentoTraduction/designerGuide/how-magento-builds-content.html Diagram 3 Diagram 4 7. 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 10/02/09 10:19 Magento - Designer Guide Page 3 sur 4 http://netambition.dynalias.org/magentoTraduction/designerGuide/how-magento-builds-content.html Back to Top 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 : 1. Templates 2. Layouts 3. Blocks 4. 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 Template "squelette" 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 appel 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. 10/02/09 10:19 Magento - Designer Guide Page 4 sur 4 http://netambition.dynalias.org/magentoTraduction/designerGuide/how-magento-builds-content.html Travailler avec les thèmes sous Magento Introduction aux Layout Diagram 5 Où sauvegarder les Templates ? 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 : 1. Allez dans l'administration et naviguer jusqu'à Système -> Configuration 2. Sélectionnez votre boutique en haut à gauche 3. 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. Où trouver les Layouts 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" 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. <reference name="root"> <action method="setTemplate"> <template>page/2columns-right.phtml</template> </action> </reference>