Vous êtes sur la page 1sur 354

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.

com) - 29 Novembre 2010 16:10

Mickal Blanchard

ento g a M 1.4
Cou vre

Prface de Sbastien Lepers

Magento
Russir son site e-commerce

user 177 at Thu Nov 11 07:36:42 +0100 2010

Pour que linformatique soit un outil et non un ennemi !


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento
Russir son site e-commerce
Magento, la plate-forme libre de e-commerce qui monte !
Avec 1,5 million de tlchargements en moins de trois ans dexistence, Magento remporte dj ladhsion de plus de 50 000 sites marchands de toutes envergures. Construit sur PHP, Apache et MySQL, ce logiciel souple et puissant, aux grandes capacits dextension, permet de grer tous les aspects dune boutique en ligne personnalise, aussi bien sous MS-Windows que sous Mac OS ou GNU/Linux.

Exploitez le potentiel de Magento pour russir votre commerce en ligne !

Dnissez et planiez votre projet (quipe, hbergement,


nom de domaine, dploiement) de dveloppement les promotions scuriss

Installez et congurez Magento et comprenez son environnement Structurez votre catalogue, crez des lots de produits et grez Paramtrez les devises, taxes, frais de port et modes de paiement Grez votre clientle et administrez les commandes
(livraison, suivi de stock, remboursements) et le systme de commentaires

Animez votre boutique par du contenu ditorial, des sondages Faites la promotion de votre boutique en dlisant vos visiteurs
(ux RSS, bons de rduction, newsletter) et en optimisant son rfrencement un thme et proposez des magasins en plusieurs langues les fonctionnalits du site

Personnalisez lapparence de votre boutique en ajoutant


Ingnieur certi Dveloppeur PHP Zend, Mickal Blanchard est responsable de projet dans la SSII Dawan (Nantes), consultant et formateur en dveloppement et technologies web, tout spcialement en PHP. Ses consultations et formations lui ont permis dapprcier de multiples situations dutilisation des systmes de e-commerce libres comme osCommerce, Joomla et, bien sr, Magento.
Sbastien Lepers (alias SeL) est un membre actif de la communaut Magento France.

Ajoutez et dveloppez des extensions pour enrichir


En annexe : Extensions utiles. Rappels sur PHP. Le Zend Framework pour Magento. Rappels sur XHTML, CSS, JavaScript et XML.

qui sadresse cet ouvrage ?

Code diteur : G12515 ISBN : 978-2-212-12515-3

toute entreprise commerante, TPE ou PME souhaitant construire son site marchand Aux administrateurs de systmes dinformation et prestataires chargs de mettre en place un site de e-commerce Aux dveloppeurs PHP en charge de maintenir et dtendre un site cr avec Magento

35
user 177 at Thu Nov 11 07:36:42 +0100 2010

Conception : Nord Compo

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Prface
Depuis le temps que la communaut attendait ce moment, voici enfin un livre en franais sur la plate-forme e-commerce dont tout le monde parle depuis deux ans : Magento. Pourquoi avoir d attendre si longtemps ? Tout dabord, Magento est une solution complte et souple, dote dun norme potentiel, mais qui en contrepartie demande du temps pour lapprivoiser... donc du temps pour en faire un livre. On aurait pu se contenter de traduire un livre anglais ou allemand existant. Mais non, on est plus exigeant que cela, il fallait que ce livre sadresse rellement un public qui travaille en France et dont les problmatiques sont propres ce pays, mme si aisment adaptables pour les lecteurs des autres pays francophones europens. Ensuite, les utilisateurs, dveloppeurs et experts de Magento ont une activit professionnelle charge, qui leur laisse peu de temps pour la rdaction. Enfin, ds quon aborde le sujet Magento, on ne peut se limiter loutil en lui-mme. On doit ncessairement sintresser beaucoup dautres sujets et mtiers, allant du marketing lhbergement, en passant par le rfrencement et la logistique. Ds lors, on comprendra que plusieurs tentatives de rdaction aient chou et que la seule aboutir pour le moment se soit fait attendre. Je pense que Mickal Blanchard ne me contredira pas si jaffirme que son livre est reprsentatif des connaissances que lon retrouve au sein de la communaut Magento. Tout le mrite davoir su les structurer et transmettre son exprience sur le logiciel lui revient. Petit retour en arrire sur lhistoire de Magento et de sa communaut francophone. Nos blogueurs francophones prfrs ont repr ds juin 2007 le petit bijou qui se prparait outre-Atlantique et qui allait bouleverser le paysage du commerce lectronique open source. Le 31 aot, la premire version bta de Magento tait rendue publique et tlcharge par les plus
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

impatients. Le plus dur tait alors de savoir quil faudrait attendre plusieurs mois avant davoir une premire version stable. Mais lquipe de dveloppement a su nous faire patienter en publiant de nombreuses versions bta chaque fois enrichies de nouvelles fonctionnalits. Cest en septembre 2007 que la communaut franaise a t officialise avec louverture du site www.fragento.org et le lancement de la traduction franaise sur limpulsion du Capitaine Commerce. Aprs quelques jours seulement, il tait possible dutiliser Magento bta en franais. Ds la sortie de la version 1.0, fin mars 2008, Varien, la socit californienne qui dite Magento, a dtect que le trafic sur son site www.magentocommerce.com tait plus important en provenance de la France et de lAllemagne quen provenance des tats-Unis. lcoute de la communaut, Varien a trs vite compris que son systme de taxes ntait pas compatible avec celui de lEurope et a donc modifi son plan de lancement en consquence, afin de proposer un systme de taxes compatible ds juillet 2008, dans la version 1.1. Les exemples dimplication et de contribution de la communaut dans le dveloppement de Magento se sont ensuite multiplis. En vrac, citons les retours de bogues, les extensions communautaires ou commerciales, les contributions sur les forums multilingues, les tutoriels et les articles wiki. Il est vident que ce que Varien a offert la communaut, celle-ci le lui a largement rendu sous de multiples formes et quau final, de nombreuses personnes bnficient de cette collaboration. Malgr sa jeunesse, Magento est dj entr dans lhistoire du Web. Que vous soyez dveloppeur ou utilisateur, jespre que la dcouverte et lutilisation de Magento vous encourageront dcouvrir cette communaut et nous rejoindre. Ce livre saura vous guider et vous viter de renoncer comme lont fait quelques utilisateurs non accompagns. Pour conclure, je vous souhaite beaucoup de plaisir et de russite dans vos projets e-commerce avec Magento. Sbastien Lepers, alias SeL

VI
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Table des matires


AVANT-PROPOS ............................................................ 1 Pourquoi ce livre ? 1 qui sadresse ce livre ? 2 Structure de cet ouvrage 3 Remerciements 4 1. PETITE INTRODUCTION AU E-COMMERCE AVEC MAGENTO .. 5 Le e-commerce et le libre 6 Les principaux logiciels 7 OsCommerce 7 VirtueMart 7 PrestaShop 8 Comparaison des logiciels 8 propos de Magento 8 La licence OSL (Magento Community Edition) 9 Rapide historique 9 Votre projet Magento 10 Dfinir son projet de site e-commerce 11 tudier le march et de la concurrence 11 Dterminer ses besoins 12 Lquipe projet 12 Profils dcisionnels 13 Comptences graphiques et ergonomiques 13 Rles techniques 13 Gestion quotidienne et ditoriale du site 14 Dveloppement et production 14 Lhbergement 15 Choisir un nom domaine 15 Acheter un nom de domaine 15 Plusieurs noms de domaine, est-ce possible ? 16 La planification du projet 16
Groupe Eyrolles, 2009
user 177 at Thu Nov 11 07:36:42 +0100 2010

Estimer les cots 17 Mettre en place dun calendrier prvisionnel 17 Tenir compte des imprvus 18 2. LENVIRONNEMENT DE DVELOPPEMENT .........................19 Le Web : rappels fondamentaux 20 Les adresses ou URL 20 HTTP... S ? 21 Structure dun site web 22 Pourquoi utilise-t-on des services web ? 23 Le langage (X)HTML 24 HTML, CSS et JavaScript 25 Script.aculo.us 25 MySQL, la base de donnes 25 Organisation gnrale dune base MySQL 26 PhpMyAdmin et SQL 26 PHP, le langage la base de Magento 28 O est PHP et comment fonctionne-t-il ? 28 Le Zend Framework 29 Les fichiers CSV 29 XML dans les fichiers et les messages 30 3. INSTALLER ET TESTER MAGENTO ...................................31 Les lments indispensables pour installer Magento 32 Les outils requis 32 Apache 32 Linterprteur PHP 32 MySQL 33 Un hbergement commercial 33 Serveur mutualis ou ddi ? 33 Quel matriel ? 34

VII

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les services supplmentaires 34 La qualit du service et le support 34 Un serveur domicile 34 Installer un serveur domicile 35 Tester et paramtrer le serveur 36 Configurer PHP 36 Crer le rpertoire Magento 38 Les droits daccs 39 Rves de grandeur ? 40 Phases dinstallation, pas pas 40 Obtenir Magento 40 Prparer larchive 41 La base de donnes 42 Installer 42 Tester linstallation 46 Les tches cron 48 Mise en place dune tche cron sous Unix 49 Mise en place dune tche planifie sous Windows 49 Magento en franais 51 It does not work ? 51 Rcuprer la cl dextension pour le French Language Pack 51 Installer lextension 53 Ajouter un premier produit dans la boutique 54 4. VISITE GUIDE DES FONCTIONNALITS OFFERTES AU VISITEUR ............................................................... 59 Visiter le site 60 Rechercher des produits 60 Acheter 62 Le panier dachat 62 Le processus de commande 62 Le compte de lutilisateur 66 Contribuer 67 Associer des tags aux produits 67 Crer son catalogue personnel : la wishlist ou liste denvies 67 Comparer les produits entre eux 68 5. ADMINISTRER LE SITE .................................................. 71 Connexion linterface dadministration 72 Les diffrents types de messages 74 Les messages publics mis par Magento 74 La gnration automatique de courriels 74 Les gabarits de courriels 75

Les gabarits par dfaut 75 Personnaliser les gabarits 75 Prsentation de linterface standard 77 Len-tte et le menu 77 Le pied-de-page 77 Les listes 78 Les formulaires 79 Cration et configuration des magasins 80 Configuration des magasins et des diffrentes vues 81 Crer un magasin supplmentaire 83 Configuration gnrale de Magento 85 Les zones de configuration du systme 85 Fonctionnement gnral du paramtrage 85 Les options du menu Gnral 87 Options gnrales (menu Gnral>Gnral) 87 Options Web 87 Paramtrer la page Contactez-nous 88 Option denvoi un ami 89 Les options du menu Catalogue 89 Options gnrales 89 Cration dun plan de site Google 93 Activation des flux RSS 94 Les options du menu Clients 95 Paramtres des comptes clients 95 Paramtres de navigation 95 Activation de la liste denvies 96 Les options du menu Ventes 96 Paramtrer le droulement dune vente en ligne 96 Impression de documents PDF 97 Paramtrer la commande et le rglement des achats 97 Paramtres de livraison 98 Configurer laccs aux services Google 98 Configuration avance 99 Paramtres pour ladministration 99 Paramtres systme 100 Paramtres utiles au dveloppeur 101 Gestion du cache 101 Gestion de votre quipe dadministrateurs 103 Mon compte 103 Les rles 103 Les utilisateurs 105 6. PUBLIER SUR LE SITE ..................................................107 Crer des pages de contenu 108
Groupe Eyrolles, 2009

VIII
user 177 at Thu Nov 11 07:36:42 +0100 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Ajouter une page 109 Renseigner les mtadonnes 110 Insrer des blocs statiques 111 Crer un bloc 111 Affecter un bloc une page 112 Administrer des sondages 113 7. METTRE EN PLACE SA BOUTIQUE ................................. 117 Structurer les produits en catgories 118 Arborescence des catgories 118 Crer et paramtrer une catgorie 119 Informations gnrales 119 Paramtres daffichage 120 Produits de la catgorie 121 Hirarchie des catgories 121 Caractriser les produits grce aux attributs 122 Crer des attributs 123 Paramtrer le comportement des attributs pour le visiteur 124 Intituls et valeurs des attributs 126 Grer les groupes dattributs 127 Cration dun nouveau groupe 127 Rpartition dans les sous-groupes 128 Mettre en place les produits 129 Cration dune fiche produit 129 Informations gnrales 130 Fixer les prix 132 Ajouter des informations mta 133 Associer des images 134 Proprits dinventaire pour la gestion des stocks 134 Affecter le produit aux sites web et catgories 135 Produits apparents, ventes incitatives et ventes croises 136 Abonnements aux alertes sur les produits 136 Ajouter des options personnalisables : choix de la taille, de la couleur, etc. 137 Les diffrents types de produits 138 Les produits configurables 139 Les produits groups 142 Les produits packags 144 Les produits tlchargeables 146 Les produits virtuels 149 Grer les promotions 149 Les promotions catalogue 149

Dfinir une rgle 149 Conditions dapplication de la rgle 150 Rsultat 151 Les promotions panier 152 Dfinir une rgle 152 Bons de rduction 152 Conditions dapplication de la rgle 153 Les conditions gnrales de vente et dutilisation 154 Optimiser le rfrencement de votre boutique via les URL 156 Les URL automatiques 157 Rcrire manuellement les URL 158 8. GRER LES VENTES ....................................................161 Le processus complet dachat 162 Devises et taux de change 162 Configurer les devises 163 Fixer les taux de change 164 Grer sa clientle 165 Voir les clients en ligne 165 Constituer des groupes de clients 166 Informations sur les clients 166 Crer un client pour une commande par tlphone 167 Dfinir les taxes 169 Les classes de taxe produit 170 Les classes de taxe client 170 Les taux de TVA en fonction des zones de taxe 171 Les rgles de taxes 172 Laffichage des taxes et leurs options 174 Modes de livraison et frais de port 175 Points communs entre tous les modes 175 Le mode Tarif unique 176 Le mode Tarification 176 Le mode Livraison gratuite 177 Modes de paiement 177 Points communs entre les diffrents modes de paiement 178 Paiement par carte enregistre 179 Paiement par chque, mandat ou virement 180 Paiement par bon de commande 180 Administrer les commandes 180 Traiter les commandes 181 Produire des factures 182 Prparer les expditions 184 Grer les remboursements 186 Analyser le tableau de bord des commandes 187

Groupe Eyrolles, 2009


user 177 at Thu Nov 11 07:36:42 +0100 2010

IX

Table des matires

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

9. PROMOTION DE LA BOUTIQUE : COMMUNIQUER AVEC SES VISITEURS .................................................. 189 Autoriser les avis sur les produits 190 Configurer les notations 190 Modrer les commentaires 192 Grer les mots-cls ou tags 193 Amliorer la recherche interne 195 Analyser les recherches des visiteurs 195 diter les recherches 196 Autres amliorations possibles 197 Envoyer une lettre dinformation (newsletter) 197 Grer les inscriptions 198 Prparer un gabarit 199 diter et envoyer la lettre 200 Mieux connatre votre clientle : utiliser les rapports 201 Les diffrents tats disponibles 201 Manipuler les tats 202 Utiliser les services web 203 Vrification rapide du bon fonctionnement 204 Services XML-RPC 204 Services WS-* 205 Mthode dutilisation 205 Scurit : crer des utilisateurs 206 10. PERSONNALISER LAPPARENCE DE SA BOUTIQUE ......... 209 Configuration de base du design 211 Len-tte HTML 211 Le titre de la page (title) 211 Les balises mta et autres indications pour les moteurs de recherche 212 Les petits plus 212 Len-tte visible de la page 213 Le pied de page 213 Ajouter un filigrane sur les images de produits 214 Crer un thme graphique 215 Organisation des fichiers 215 Organisation gnrale 215 Organisation des thmes au sein des rpertoires 216 Le principe de surcharge 217 Crer un paquet 218 Crer et appliquer un nouveau thme 218 Application partielle dun thme 219 Exceptions 220 lments statiques du thme : images, CSS et JavaScript 222

Modifier des images ou fichiers JavaScript 222 Modifier les styles grce aux CSS 222 Design et internationalisation 223 Rpertoires de traduction 223 Les textes intgrs au thme 224 Les textes indpendants du thme 224 Mcanisme de traduction 224 Modifier les fichiers pour corriger ou ajouter une traduction 225 Ajouter des widgets 225 Modifier les gabarits (templates) 228 Les avantages de larchitecture MVC 228 Modifier un gabarit 229 Les gabarits spciaux 231 Syntaxe des gabarits 231 Classes et fonctions utiles 232 Traduction 233 Remplacement des caractres spciaux 233 Affichage dun bloc enfant 233 Les assistants 233 Le modle 233 Modifier les agencements (layouts) 234 Syntaxe gnrale et surcharge 235 Structure dun fichier dagencement 235 En pratique 236 Modification de la balise <default> 237 Le contenu des agencements 238 La balise <block> 238 La balise <reference> 239 La balise <action> 240 Exemple : changer la couleur du pied de page 240 Exemple : supprimer un bloc 242 Exemple : ajouter un bloc HTML 243 Exemple : ajouter un lien vers une page 244 Personnaliser le design via linterface dadministration 246 Paramtres de design personnalis 246 Exemple dajout de paramtres de design personnalis 247 11. AJOUTER ET CRER UNE EXTENSION ...........................249 Installer une extension prexistante 250 Choisir une extension 250 Obtenir la cl dinstallation 253 Tlcharger et installer lextension avec Magento Connect 254
Groupe Eyrolles, 2009

X
user 177 at Thu Nov 11 07:36:42 +0100 2010

Exemple de configuration 257 Crer soi-mme ses extensions 259 Modifier Magento ? 259 Structure et fichiers essentiels dune extension 261 Trouver les erreurs 263 Un exemple complet : cration dun premier module daccs une base de donnes 265 Dclaration : crer le fichier de configuration de lextension 265 Structure des fichiers 266 Crer le bloc correspondant au module 267 Fichier de bloc : LeMessage.php 267 Fichier dagencement : message.xml 268 Fichier de configuration : config.xml 269 Fournir une traduction du message 271 Modification du gabarit 271 Cration des fichiers de traduction CSV 272 Modification du fichier de configuration 272 Afficher un message dynamique partir de la base de donnes 273 Crer la table denregistrements 273 Prvoir linstallation automatique de la table 274 Construire le modle 275 Dclarer le modle 277 Modifier la classe de bloc pour afficher le rsultat 278 Bilan du premier module 279 Suite de lexemple : crer un second module pour la livraison 280 Construire la structure et les classes du module 281 Crer les rpertoires 281 Construire la classe Back 281 Crer les fichiers de traduction 284 Adapter les fichiers de configuration 284 Fichier de configuration etc/config.xml 284 Fichier de dpart de lextension 285 Rendre lextension configurable 286 Un menu spcial pour notre extension 287 Ajout de paramtres dans un onglet existant 291 Lecture des paramtres depuis la classe du modle 294 Crer un paquet pour publication 296 Informations du paquet 296 Informations de publication 297 Responsables de la maintenance 297 Dpendances 298

Contenu 298 Sauvegarde et mise en ligne 299 A. QUELQUES EXTENSIONS UTILES DE MAGENTO ...............301 Paiement en ligne par carte bancaire 301 CM-CIC p@iement (CyberMUT Paiement/Paiement CIC) 301 SPPLUS Extension (Caisse dpargne) 302 Et pour les autres banques ? 303 Modes de livraison 303 J2T TNT Module (relais colis TNT) 303 Owebia Shipping 2 304 Thmes et design 304 Advanced Menu 304 Clean EasyStart Theme 305 Internationalisation 306 French (France) Language Pack 306 Autres extensions utiles 307 osCommerce fixed migration tool 307 Blog 308 B. HTML, CSS ET JAVASCRIPT ......................................311 (X)HTML 311 La page 311 Les balises principales 313 Les commentaires 313 Le corps de texte et sa mise en forme 313 Les titres 314 Listes et tableaux 314 Les balises de liens 315 Lien vers une autre page 316 Images 316 Lencodage des caractres 316 CSS 317 Intgrer les CSS dans le HTML 317 Associer le code CSS au HTML 319 Quelques proprits CSS 320 Couleurs 320 Polices de caractres 320 Marges et bordures 321 Autres 321 JavaScript 321 Intgrer le JavaScript dans le HTML 322 Script.aculo.us 323

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Groupe Eyrolles, 2009


user 177 at Thu Nov 11 07:36:42 +0100 2010

XI

Table des matires

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Utilisation 323 Principaux effets 324 Comportements 324 Ajax 325 C. PHP ET LE ZEND FRAMEWORK ................................... 327 PHP 327 Les apports de PHP 5 328 Le Zend Framework 329 Le Zend Framework dans Magento 329 Interaction avec les bases de donnes 330

Le SQL avec ladaptateur 331 Le contrleur 332 Le client HTTP 333 Autres classes utiles 333 D. XML.......................................................................335 Pourquoi XML ? 335 Les rgles fondamentales du XML 336 Autres normes associes XML 337 INDEX ......................................................................339

XII
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Avant-propos
B http://www.fevad.com

CONSEIL Visiter et acheter


Si jamais vous naviez quune ide vague de ce quest une boutique en ligne, passez quelques temps sur des sites de e-commerce, quels quils soient. Il serait mme utile que vous fassiez un achat complet, au moins jusqu la phase de paiement. En voici quelques exemples :
B http://www.eyrolles.com B http://www.amazon.fr B http://www.alapage.fr

En 2009, on comptait 56 000 sites marchands actifs en France, pour un chiffre daffaires total de 5,6 milliards deuros (daprs la FEVAD, Fdration du e-commerce et de la vente distance, qui ralise des tudes priodiques de rfrence sur le sujet). cela sajoutent les plates-formes de mutualisation et les simples marchands rfrencs sur des sites intermdiaires (denchres, de publication...). La mise en place dune boutique sur lInternet demande la ralisation logicielle des mcanismes classiques de toute entreprise commerante, et plus gnralement de tout nouveau canal de vente : le maintien de produits et rubriques de produits dans une base de donnes ; le processus dachat ; le processus de paiement ; le maintien de clients, de leurs adresses, de leurs commandes ; ltablissement des frais de livraison ; la prise en compte de la taxation. Lexistence de cet ensemble de points communs justifie gnralement lemploi dune plate-forme logicielle existante, plutt que la cration complte dun site sur mesure, afin de faciliter la mise en place de tous ces processus. Cest dans ce logiciel que vous devrez, une fois celui-ci configur, intgrer vos donnes et ladapter vos besoins propres, dans son apparence comme dans son comportement.

SAVOIR Identification renforce


Le mcanisme de paiement en ligne par carte bancaire volue en France, pour plus de scurit. Dsormais, il nest plus suffisant de disposer du code de la carte, et du cryptogramme inscrit au dos, mais une identification supplmentaire est ncessaire, tels un code secret ou la date de naissance du client. Le vendeur, cest--dire le propritaire du site de e-commerce, na pas modifier son site pour sy adapter, car cela se passe au niveau de la banque.

Pourquoi ce livre ?
Magento est lun de ces logiciels, parmi les plus rcents et les plus complets, et libre de surcrot. Rput pour sa puissance et ses grandes capa Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

cits de configuration grce lajout et au dveloppement de nombreux nouveaux modules, il peut pour cette raison sembler au premier abord quelque peu difficile daccs. Cest pourquoi cet ouvrage a pour objectif, daprs mon exprience dans linstallation de ce logiciel pour diverses entreprises, de vous assister dans la mise en place de votre site de e-commerce, depuis la dfinition des besoins jusqu lajout de modules supplmentaires, en passant par la configuration, la cration et lalimentation de la base de donnes, sans oublier la personnalisation de lapparence graphique.

qui sadresse ce livre ?


Cet ouvrage a t crit pour tous les niveaux dapprentissage de Magento, et sil sadresse avant tout ladministrateur qui sera charg de la mise en place et de la gestion dun site de e-commerce, il servira galement de guide au dveloppeur qui souhaitera lexploiter au maximum de ses capacits. Les dbutants complets, utilisateurs de lInternet mais peu familiers de ses spcificits techniques, dcouvriront Magento, les technologies qui le composent, ses possibilits et les enjeux de son utilisation. Les derniers chapitres de ce livre ne les concerneront pas dans limmdiat, car ils demandent des connaissances techniques en programmation qui ne peuvent sacqurir simplement par la manipulation, mme en profondeur, de Magento. Cependant, le reste de louvrage a t crit avec des rfrences et un vocabulaire exacts, qui sefforcent de leur offrir une lecture claire et sans verbiage inutile. Si vous tes expriment en HTML, voire en PHP, mais que vous abordez Magento avec un il neuf, vous tes au centre des proccupations de lauteur. Cest alors lensemble du livre qui vous concerne ; laissez-vous guider par les fonctionnalits dont vous avez vraiment besoin. Lordre de louvrage devrait vous convenir parfaitement, et les quelques chapitres gnralistes pourront tre simplement survols. Vous tes un expert en dveloppement web ? Ce livre devrait tre pour vous une aide prcieuse. Lauteur, fort de son exprience dans le dveloppement de solutions associes des CMS (Content Management System), boutiques en ligne ou autres outils en PHP, sest appliqu dtailler les points les plus dlicats de Magento. La cration de modles (templates) et de thmes graphiques (layouts), particulirement exotique et ardue, est explique, exemples lappui. Quant la fabrication dextensions, cest le point qui devrait mriter le plus votre attention. Elle a t crite afin

2
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

de parcourir le plus de possibilits et de besoins que vous auriez rsoudre, et certaines astuces vous feront gagner de nombreuses heures.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Structure de cet ouvrage


Lordre des chapitres assure une cohrence maximale. Aucun point nest dvelopp tant que les lments ncessaires nont pas t expliqus. Le chapitre 1 (Petite introduction au e-commerce avec Magento) propose des informations gnrales propos de Magento et de son cosystme, ainsi que des conseils pour mettre en place votre propre projet de boutique en ligne. Le chapitre 2 (Lenvironnement de dveloppement) prsente toutes les technologies sous-jacentes Magento, commencer par le Web. Vous trouverez ensuite des complments sur ces technologies en annexe. Le chapitre 3 (Installer et tester Magento) indique en dtail comment installer Magento, en prsentant de multiples situations. Le chapitre 4 (Visite guide des fonctionnalits offertes au visiteur) montre comment vos visiteurs et clients utilisent le site que vous mettez en place. Le chapitre 5 (Administrer le site) dtaille les actions fondamentales ralises par les administrateurs dune boutique Magento, configuration des diverses fonctionnalits incluse. Le chapitre 6 (Publier sur le site) indique comment publier sur le site des informations qui ne font pas partie du processus dachat. Le chapitre 7 (Mettre en place sa boutique) est consacr lensemble des donnes commerciales, cest--dire les produits, catgories, commandes, etc. Le chapitre 8 (Grer les ventes) prsente la configuration dtaille du processus de vente (paiement, livraison, etc.). Le chapitre 9 (Promotion de sa boutique : communiquer avec ses visiteurs) dcrit ladministration des fonctionnalits interactives destination des visiteurs, comme les commentaires des produits. Il vous donne ainsi diffrents moyens de faire connatre votre boutique et dattirer les internautes. Le chapitre 10 (Personnaliser lapparence de sa boutique) est un premier point de la mise en place potentiellement complexe dun site, savoir lapplication de thmes graphiques aux diffrentes pages dun site Magento.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Avant-propos

Magento

Le chapitre 11 (Ajouter et crer une extension), destination des dveloppeurs, explique les points cls et les mthodes permettant la modification et la cration dextensions diverses et varies pour Magento.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Pour terminer, les annexes dcrivent quelques extensions utiles un site franais et prsentent les bases des technologies utilises par et pour Magento.

Remerciements
Je tiens remercier les stagiaires successifs qui, depuis 2008, ont eu la bonne ide de demander une formation Magento, et se sont prts de bonne grce aux exemples que je leur soumettais, voire m'ont pouss coucher sur le papier la somme de connaissances que je leur apportais. Je suis grandement redevable envers les membres passs et prsents de Dawan, leur culture du savoir fut un moteur essentiel dans ma rdaction. J'applaudis les intervenants actifs et dtermins de Magento de par le monde, en particulier ceux de Varien, qui mrite son succs, mais aussi Florent Sabourin et Sbastien Lepers, qui ont collabor cet ouvrage. Enfin, un merci chaleureux aux ditions Eyrolles, Fabienne LHostis, Sophie Hincelin, Pascale Sztajnbok, Anne-Lise Banath, Gal Thomas et surtout Karine Joly, qui ont russi transformer ce projet avec un grand talent.
UN MOT DE LAUTEUR Mickal Blanchard
Mickal Blanchard est ingnieur en dveloppement. Il est actuellement responsable de projet dans la SSII Dawan, intervenant en conseil sur des dveloppements Internet, intranet et extranet de toutes sortes, gnralement en PHP. galement formateur depuis six ans dans de nombreuses technologies du Web, dont lune des premires formations dexpertise pour PHP 5 depuis 2005, il donne aussi des formations pour OsCommerce, Joomla!, et bien sr Magento. Il est certifi Dveloppeur PHP Zend. Ses formations comme ses consultations lui ont donn loccasion dapprcier de multiples situations dutilisation de systmes de commerce lectronique, et lvolution dans les annes rcentes de Magento. Les diffrents services production, assistance, formation pour lesquels lauteur et sa structure se mettent votre disposition sont dtaills sur le site : Bhttp://www.dawan.fr

4
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Petite introduction au e-commerce avec Magento

1
SOMMAIRE

B Le e-commerce et le libre

Vous envisagez de mettre en place une boutique en ligne, et souhaitez dfinir plus prcisment votre projet. Ce chapitre dintroduction au e-commerce avec le logiciel libre Magento devrait rpondre plus dune de vos questions...

B propos de Magento B Dfinir son projet Magento


MOTS-CLS

B e-commerce B logiciel libre B Varien B projet B hbergement B nom de domaine B planning B quipe

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Le e-commerce est constitu de milliers de boutiques sur lInternet, accessibles tout instant de nimporte o dans le monde. Au-del des problmatiques gnrales inhrentes louverture dun commerce lectronique, chacun de ces commerces a besoin dun logiciel (par exemple, Magento), et dune phase de mise en place prcdant son ouverture.

Le e-commerce et le libre
De nombreuses solutions de e-commerce sont apparues et ont disparu depuis quinze ans. Parmi elles, les solutions propritaires nont jamais eu de succs que pour les sites de trs grande envergure, pour lesquels des dveloppeurs plein temps taient disponibles. La majorit des sites de e-commerce ont pu tre mis en place, et le seront encore prochainement, en utilisant des produits libres et gratuits tels que Magento.
COMPRENDRE Un logiciel libre ?
Un logiciel libre est un logiciel dont le code source (assimilable la recette de cuisine dont le logiciel serait le plat) est publi et librement accessible, et dont lauteur offre quiconque toute latitude pour lutiliser, le modifier et le diffuser. Lexemple le plus connu de logiciel libre est sans doute le noyau Linux. Les logiciels libres sont distribus sous diffrentes licences, dont la plus connue est sans doute la GNU GPL (GNU General Public license). On trouve galement la licence BSD, les Creative Commons et la licence OSL (Open Software License) dont est dot Magento. Quant au terme open source , il dsigne galement les logiciels dont le code source a t libr, mais en les considrant dun point de vue purement technique, en le dpouillant des aspects thiques, philosophiques et politiques du logiciel libre (source : Le Jargon Franais, http:// jargonf.org). Pour en savoir plus sur cette question, vous pouvez vous rfrer aux ouvrages suivants : R R. Stallman, S. Williams, C. Masutti, Richard Stallman et la rvolution du logiciel libre Une biographie autorise, Eyrolles, 2010. R F. Elie, conomie du logiciel libre, Eyrolles, 2008. Le logiciel libre quelque fois est mis en accusation, sur laffirmation quil serait le produit de lamateurisme, quil ne fournirait pas de support utilisateur, comporterait des risques lgaux, etc. Il sagit gnralement de mdisances et rumeurs, et le fait quil soit ainsi soumis ltude, la critique et la possibilit dtre corrig par tous confre au contraire dynamisme et fiabilit aux logiciels libres qui rencontrent le succs. Il existe en effet de nombreuses applications libres succs, dans tous les domaines (Apache pour les serveurs, Ubuntu pour les systmes dexploitation, MediaWiki, le wiki la base de Wikipdia, ou encore Open ERP, progiciel de gestion dentreprise de plus en plus pris, parmi tant dautres). Des logiciels libres ou open source sont notamment soutenus et proposs par des multinationales telles que Microsoft, IBM, Google, etc.

6
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Sur le Web, une grande partie des projets libres sont raliss au moyen du langage PHP, notamment en ce qui concerne le commerce lectronique (pour dautres domaines, on trouvera aussi le langage Java).
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

T PHP

Les principaux logiciels


OsCommerce
OsCommerce, cr par Harald Ponce de Leon (Allemagne), est loutil de commerce lectronique le plus connu et le plus rpandu. Disponible depuis 2003, il dispose dun grand nombre de contributeurs ayant apport des fonctionnalits abondantes, en particulier vis--vis des spcificits nationales de la vente en ligne. De nombreux outils issus de OsCommerce ont vu le jour ces dernires annes, afin de pallier ses limitations et de fournir des versions incluant linstallation des configurations et modules considrs alors comme essentiels. Or, bien que de nouvelles versions sortent rgulirement (la version 3 est attendue depuis au moins trois ans), une grande quantit de sites de commerce lectronique passent actuellement de OsCommerce VirtueMart, PrestaShop ou Magento.

PHP (PHP: Hypertext Preprocessor) est un langage de programmation libre permettant de raliser un site web de A Z, depuis la simple gnration de documents HTML aux requtes dans les bases de donnes, lenvoi automatique de mail ou le chiffrement des donnes. Il est trs complet et volue trs vite (on en est la version 5), en parfaite association avec Linux, Apache et MySQL (on parle alors de LAMP, daprs les initiales de ces quatre technologies). Cest le langage utilis par Magento, chez les hbergeurs ou sur votre propre serveur.
B http://www.php.net

B http://www.oscommerce.com

VirtueMart
VirtueMart, cr par Sren Eberhardt-Biermann (Allemagne), est une extension du CMS Joomla! qui permet dy ajouter des fonctionnalits spcifiques au commerce lectronique. Joomla! est un CMS moderne actuellement trs populaire, proposant un grand nombre de fonctionnalits. VirtueMart profite de cette structure afin de combler les besoins dun site de commerce lectronique.
CULTURE CMS et e-commerce
Un CMS (Content Management System) ou systme de gestion de contenu est un logiciel destin la conception et la mise jour dynamique dun site web. Il permet notamment de sparer la gestion de la forme et du fond et autorise lintervention de plusieurs rdacteurs. Les CMS les plus clbres sont sans doute Spip, Joomla!, Drupal et ceux ddis en priorit aux blogs comme WordPress ou Dotclear. Dautres CMS, tel eZ Publish, se sont lancs dans ladjonction de fonctionnalits e-commerce. Cela a le plus souvent abouti un chec, les fonctionnalits de commerce en ligne ncessitant plus quune attention secondaire de la part des dveloppeurs.
B http://virtuemart.net

LIRE Joomla et Virtuemart


R V. Isaksen, Joomla et Virtuemart Russir

sa boutique en ligne , Eyrolles, 2009.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

1 Petite introduction au e-commerce avec Magento

Magento

B http://www.prestashop.com

PrestaShop
PrestaShop, cr par Igor Schlumberger et Bruno Lvque (France), est un outil lger de commerce lectronique, disponible depuis 2008. Il est plus simple dployer et personnaliser, au prix de fonctionnalits moins avances, et fait une utilisation abondante dAjax afin de proposer une ergonomie de qualit.

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

T Ajax

Ajax (Asynchronous JavaScript and XML), technologie fortement associe au Web dit 2.0, est un mlange de techniques classiques permettant dexploiter davantage les ressources du poste client plutt que celles du serveur, en ralisant des requtes asynchrones. Cela permet notamment damliorer la ractivit dune application, et donc son ergonomie. Voir ce sujet dans lannexe B, la section ddie JavaScript.

Comparaison des logiciels


Voici une comparaison rapide des quatre produits dont on peut envisager lutilisation pour un nouveau projet de commerce lectronique : OsCommerce, VirtueMart, PrestaShop et Magento.
Fonctionnalits de gestion de contenu (CMS) Qualit, scurit, robustesse Communaut

Nom

Fonctionnalits boutique

OsCommerce VirtueMart PrestaShop Magento

+++ + + ++ +++ + + ++ + ++

+++ + ++ ++

Lapprciation de la qualit est issue de lexprience de lauteur sur ces diffrents produits, et son analyse gnrale du code source. Un code de grande qualit a pour avantage dassurer, entre autres, la scurit et, dune manire gnrale, la maintenance et lvolution facile de lapplication.
COMPRENDRE De multiples versions
En plus de ces logiciels, vous trouverez, avec des intituls plus ou moins proches, des adaptations de ceux-ci des besoins particuliers. Cela inclut des versions prtes linstallation, avec une mme base mais quelques modules prinstalls en plus. Comme ces logiciels sont libres, ceci est tout fait lgal et habituel, et cest ce quon appelle une distribution. Il nexiste pour le moment aucune distribution spciale notable issue de Magento.

Quant la communaut lie au logiciel, cest un critre dimportance dans le choix dun logiciel libre. En effet, une grande communaut pour avantage : de proposer un plus grand nombre dextensions, de traductions, de corrections ; damliorer la prennit dans le temps ; dtre prsente et vous fournir des rponses lorsque vous rencontrez des problmes.

propos de Magento
Magento est une application PHP de commerce lectronique. Il sagit, sur un site web, de montrer, dans lobjectif de les vendre, des produits de tout type. Cr en 2007 dans sa version libre et gratuite, Magento Community Edition, il existe depuis 2009 une version payante, Magento Entreprise 8
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Edition. Magento a t cr et est maintenu par la socit californienne Varien (renomme dernirement Magento Inc., comme le laisserait entendre le site de Magento). Cette compagnie propose des services de support, design et formation, ainsi que la version payante de Magento.

La licence OSL (Magento Community Edition)


Magento Community Edition, savoir la version communautaire de Magento, est distribue sous la licence OSL 3.0 (Open Software License, version 3). Cest une licence trs libre, dont les limitations les plus importantes sont cependant les suivantes : Mme aprs lavoir modifie, vous ne pouvez pas distribuer lapplication sous une autre licence (installer loutil chez un hbergeur nest pas considr comme une distribution , donc les limites de la licence ne sy appliquent pas) ; plus quune contrainte, cela assure en fait la prennit du produit pour la communaut. Lapplication doit tre distribue avec son code source et une copie de la licence. Vous perdez tout droit dutilisation ou de redistribution si vous dclarez que lapplication enfreint un brevet logiciel (ceci est la diffrence majeure par rapport la GNU GPL, licence comparable beaucoup plus rpandue).

SOURCE OSL (Open Software Licence)


Le texte de la licence OSL est disponible ladresse suivante, en anglais :
B http://www.opensource.org/licenses/osl-

3.0.php
Vous trouverez plus dexplications son sujet sur le site ci-aprs, en franais :
B http://www.vvlibri.org/

index.php?title=Open_Software_License

Rapide historique
La premire version bta de Magento date de lt 2007, suivie en mars 2008 par la version 1.0. Les versions 1.1 1.4, entre juillet 2008 et fvrier 2010, apportrent des corrections et des optimisations, ainsi que quelques ajouts. En avril 2009 est sortie la version Entreprise, qui ajoute la version communautaire les avantages suivants : de relles fonctionnalits supplmentaires, comme la gestion plus fine des droits, les avoirs, les bons dachat, les ventes prives, la gestion des versions (plusieurs versions du mme site, des fins de test) ; un support en ligne, fournissant une aide la mise en place, la mise jour et lutilisation. La version entreprise est annonce en 2010 8 900 USD au minimum (incluant un an de support technique). Il est en revanche incertain que toutes les extensions proposes puissent tre lgalement utilises avec la version Entreprise. Ceci doit tre vrifi au cas par cas sur la fiche de description de lextension.
T Extension

Une extension dsigne lamlioration des capacits dun matriel ou dun logiciel par ladjonction dun composant. Le terme dsigne la fois le composant ajout que lopration elle-mme. Lorsquil sagit dun logiciel, lextension se prsente sous la forme de module, de plug-in, de patch, etc. On dit alors que le systme bnficiaire est tendu. Dans Magento, par exemple, en plus de linstallation par dfaut, ladministrateur peut installer un module supplmentaire afin dapporter des fonctionnalits nouvelles ou des lments de design personnaliss. Voir le chapitre 11 ce sujet.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

1 Petite introduction au e-commerce avec Magento

Magento

CULTURE Double licence


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Distribuer un logiciel, tel Magento, avec deux licences diffrentes, une libre et une propritaire, est habituel. La grande majorit des utilisateurs choisissent alors, pour commencer, une version entirement communautaire, qui leur permettra par exemple de dupliquer leur installation, sils ouvrent plusieurs boutiques, sans payer de licence supplmentaire.

Cet ouvrage traite essentiellement des points communs entre la version Community et la version Entreprise.
SAVOIR La communaut autour de Magento
Lun des grands avantages avec un certain nombre de logiciels libres, et avec Magento en particulier, rside dans lexistence dune communaut active autour du logiciel. Cela permet notamment de trouver de laide moindre frais et, pour ceux que cela intresse, de simpliquer plus avant dans le projet de dveloppement du logiciel. Le site officiel de Varien, qui propose officiellement le logiciel et maintient le systme dextensions, Magento Connect, est le point nvralgique de la communaut associe Magento. Des solutions diverses et abondantes dentraide y sont proposes, comme les forums, wikis ou mme sminaires ; par exemple, le Magento Developers Paradise runit tous les ans les dveloppeurs du logiciel et sa communaut autour de confrences, dateliers et de concours de dveloppement. Pour les adeptes, il existe mme depuis peu une application iPhone officielle Magento sur laquelle vous retrouverez les activits de Magento Connect ainsi que des tutoriels vidos (screencasts). Bhttp://www.magentocommerce.com Autour de ce site gravitent un grand nombre de sites web et dactions indpendantes mens par des acteurs de Magento destination dautres acteurs et utilisateurs. Parmi eux, en franais, citons le site Magentix, qui propose de nombreux tutoriels, et Fragento, le site de la communaut francophone grce auquel vous serez tenu au courant des dernires actualits et sur le forum trs frquent duquel vous pourrez trouver de laide (en franais). Bhttp://www.magentix.fr Bhttp://www.fragento.org Enfin, des journes vnementielles organises rgulirement, les Bargento, proposent des rencontres avec retours dexpriences dutilisateurs et de prestataires, dbats, ateliers, etc. Cet important rendez-vous Paris a lieu environ deux fois par an, et le quatrime sest tenu en mai 2010. Bhttp://www.bargento.fr

Votre projet Magento


Monter un site de e-commerce, avec Magento ou tout autre logiciel, est un vritable projet. Cela ne se prvoit pas la lgre et demande une vritable organisation, comme pour tout autre projet dentreprise. Voici quelques informations non techniques qui vous permettent, dans le cas o vous ny seriez pas habitu, de matriser le droulement du projet de mise en place de Magento. Elles sont valables galement pour dautres projets centrs sur lutilisation dun outil informatique. 10
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Dfinir son projet de site e-commerce


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Avant toute autre considration de dveloppement, votre projet de boutique doit tre bien dfini. Chaque projet comportera en effet ses contraintes propres, selon que vous dcidiez douvrir une boutique en ligne partir dun commerce existant ou que vous souhaitiez dmarrer une nouvelle activit, par exemple. Toutes ces considrations pourront tre formalises dans un business plan, un document qui rsume les objectifs, la stratgie et le financement de votre entreprise. Il pourra vous aider valuer la viabilit de votre projet.

tudier le march et de la concurrence


Comme pour tout commerce, la premire tape consiste bien videmment faire une tude de march afin de bien connatre votre public et valuer votre clientle potentielle. En effet, si de nos jours, tout se vend sur lInternet, il vaut mieux vous assurer au pralable quil y a une relle demande sur les produits que vous vous proposez de vendre, et surtout si les clients sont prts lacheter via le canal Web.
CULTURE Le cadre juridique du e-commerce
et les associations professionnelles Selon larticle L121-1-1 du Code du commerce, toute personne exerant des actes de commerce et qui en fait son activit habituelle est considre comme commerante aux yeux de la loi. partir du moment o vous devenez vendeur professionnel, vous devez donc respecter certaines obligations lgales, et devez souscrire des inscriptions administratives et des dclarations fiscales et sociales. Certaines de ces obligations sont spcifiques la vente distance (VAD), telles celles issues de la loi Chatel du 3 janvier 2008 pour le dveloppement de la concurrence au service des consommateurs . Bhttp://www.legifrance.gouv.fr/affichTexte.do?cidTexte=JORFTEXT000017785995 De plus, en tant que dtenteur dun fichier clients et de donnes personnelles, vous devrez enregistrer votre site auprs de la Cnil (Commission nationale de linformatique et des liberts), qui vous enverra un numro de dclaration faire figurer dans les mentions lgales de votre site. Bhttp://www.cnil.fr Pour en savoir plus sur le cadre juridique de la vente distance, consultez le site de la Fevad (Fdration du e-commerce et de la vente distance), et le Forum des droits sur lInternet, qui pourra rpondre vos questions lies au Web, aux droits du consommateur et du commerant. Bhttp://www.fevad.com Bhttp://www.foruminternet.org En plus de la Fevad, une autre association professionnelle pourra vous informer et vous renseigner sur les pratiques du commerce lectronique : lAcsel (Association de lconomie numrique). Bhttp://www.associationeconomienumerique.fr Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

11

1 Petite introduction au e-commerce avec Magento

Magento

SAVOIR
Ressources pour ltude de march

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Informations sur toutes les socits enregistres au tribunal du commerce :


B http://www.societe.com

Ensuite, vous pourrez faire ltude de vos concurrents, car cela vous aidera mieux monter votre commerce : qui sont-ils, combien sont-ils, quelle est leur offre, par quel biais se font-ils connatre, quelles sont les raisons de leur succs (ou non), quelle est leur rputation ?

Informations sur les sites web :


B http://who.is

Dterminer ses besoins


Avant de lancer votre site, il faudra rflchir soigneusement aux fonctionnalits que vous voudrez y intgrer, que ce soit au niveau de la publication du catalogue et des moyens de paiement. partir de l, demandez-vous de quoi vous aurez besoin (photos ou vidos, informations sur les produits, sur les fournisseurs, etc.). Le choix de la solution de paiement en ligne ne doit surtout pas tre fait la lgre. Tout dpendra de votre activit. Les moyens de paiement traditionnel (chque, virement bancaire) ne posent pas de problme particulier. Si vous prvoyez un chiffre daffaires lev, votre banque pourra vous proposer ses services de paiement en ligne par carte bancaire via son terminal de paiement lectronique, moyennant des frais de diverses natures (mise en service, abonnement, commission...) et la signature dun contrat de vente distance. Si vos ventes sont plus occasionnelles, vous pourriez prfrer passer par des intermdiaires de paiement sur lInternet, comme PayPal, avec des cots limits un pourcentage de la transaction. Renseignez-vous bien chaque fois, car, en fonction du type de produits que vous vendez (jeux, articles pour adultes...), certains intermdiaires ne vous seront pas accessibles. Quant au transporteur pour vos livraisons (Colissimo, Chronopost, UPS, DHL...), vous pourrez le choisir en fonction du poids et du volume de vos colis, de leur valeur et de leur destination. Renseignezvous bien aussi sur leurs conditions dutilisation. Enfin, vous devrez galement prendre en compte tous les paramtres lis la promotion et au rfrencement (techniques et budget) et, bien sr, lexpdition des colis et la gestion des stocks. Pensez en particulier la faon dont vous parviendrez tenir des dlais de livraison.

Archives du Web (pour analyser lvolution des sites) :


B http://www.archive.org

B http://www.paypal.fr

Lquipe projet
CONSEIL Faire un diagramme
Plus facile raliser et plus rapide lire, un simple diagramme, avec les noms des personnes concernes et des flches pour les relier, est une forme idale pour un document destin dfinir les diffrents rles.

La ralisation dun site avec un logiciel comme Magento met en uvre une somme de comptences techniques et gnrales quil faut prvoir et organiser. Toutes ne seront pas ncessaires, suivant le rsultat dsir. Ces comptences peuvent tre rparties en rles, tels que ceux donns titre dexemples ci-aprs. Chacun de ces rles pourra tre rparti entre plusieurs acteurs, mais bien videmment, chaque acteur pourra endosser plusieurs rles. Le maintien dun document clair faisant correspondre
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

12

des personnes relles ces diffrents rles vous permettra, vous comme chacun dentre eux, de connatre chaque instant les tches et responsabilits du projet.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Voici un exemple de liste de ces rles, rpartis par type de comptences demandes.

Profils dcisionnels
Le demandeur, cest--dire, dans le cadre dun projet de e-commerce,

le responsable commercial, connat les enjeux du projet, il a pour responsabilit de sassurer de sa viabilit financire. Le manager est responsable de la gestion des ressources humaines internes au projet et de leurs rles respectifs. Le chef de projet est responsable de la bonne marche technique du projet et du respect dun planning.

Comptences graphiques et ergonomiques


Le webdesigner propose les grandes inflexions du graphisme et de la ERGONOMIE Lutilisabilit dun site web
Dans le jargon des concepteurs web, lutilisabilit (traduction de usability, en anglais, parfois traduit aussi usabilit ) se mesure en termes defficacit (permettre lutilisateur datteindre son but le plus aisment possible), defficience (optimiser les conditions pour atteindre cet objectif vite et sans erreurs, notamment) et de satisfaction de lutilisateur (valuation subjective). Cette notion a t dveloppe notamment par Jakob Nielsen, auteur de plusieurs ouvrages sur le sujet. R J. Nielsen, Designing Web Usability, New Riders Publishing, 2000. R J. Nielsen, M. Tahir, Lart de la page daccueil, Eyrolles, 2002. Pour une bonne introduction lergonomie dun site web, consultez le livre de la spcialiste franaise Amlie Boucher : R A. Boucher, Ergonomie web Pour des sites web efficaces, Eyrolles, 2e dition, 2009.

manipulation gnrale de la partie publique du site. Le graphiste prsente des dessins, images, animations, maquettes pour la partie publique du site. Lergonome, responsable du confort et de lefficacit dans lutilisation du produit par les clients et les gestionnaires (cest ce quon appelle lutilisabilit dun site web).

Rles techniques
Ladministrateur systme maintient le systme informatique sous-

jacent au serveur web et le serveur web lui-mme.


Ladministrateur de base de donnes est responsable du bon fonction-

nement (robustesse, scurit, performances...) de la base de donnes.


Lintgrateur web ralise le passage des productions du graphiste, ra-

lises dans un logiciel de cration dimage (Photoshop, Gimp...) en HTML, CSS, JavaScript, voire PHP. Lanalyste prpare et tudie les solutions de cration et de modification des codes sources en PHP et JavaScript, tandis que le programmeur ralise les crations et modifications sur les codes sources en PHP et JavaScript. Le testeur vrifie le fonctionnement unitaire ou gnral de lapplication. Le conditionneur prpare le dploiement (packaging) de Magento sur une machine de production et le dployeur ralise le dploiement et la mise en production de loutil.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

13

1 Petite introduction au e-commerce avec Magento

Magento

Ladministrateur Magento a la responsabilit du bon fonctionnement

gnral de lapplication en production.


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Gestion quotidienne et ditoriale du site


Enfin, le gestionnaire soccupe des produits, des commandes et des clients dans Magento, ainsi que de la relation quotidienne entre ces donnes et les acteurs physiques de lactivit de commerce (livreurs, transporteurs, emballeurs, avocat, etc.).

Dveloppement et production
Il est galement important dtablir un planning prvisionnel des diffrentes tapes de cration et de mise en production du site. Un calendrier simpliste de cration technique de votre boutique pourrait tre celui-ci : 1 achat dun hbergement et dun nom de domaine ; 2 mise en place de Magento sur cet hbergement ; 3 modifications ventuelles de Magento sur cet hbergement ; 4 ouverture au public. Malheureusement, vous courrez alors droit la catastrophe, pour les deux raisons suivantes : Vous aurez scuriser ou masquer de manire spcifique votre boutique pendant la cration. Une fois ouverte, plus aucune modification de taille ne sera envisageable sur le site sans contorsions multiples. Cest pourquoi tout projet informatique de ce type sera gnralement loccasion de la mise en place de plusieurs serveurs. Une solution complte consiste mettre en place les serveurs suivants : un serveur de prparation ; un serveur de dveloppement ; un serveur de validation (tests) ; un serveur de production. Seul le dernier serveur doit ncessairement tre reli lInternet, car cest le seul auquel accderont vos clients. Les autres peuvent tre des simples machines locales (voire une seule) dans votre infrastructure. Au minimum, considrez la prsence, en plus du serveur de production, dun serveur de dveloppement. Celui-ci devra tre conu de manire tre techniquement le plus proche possible du serveur de production, afin que la tche de dploiement du premier au second soit la plus simple et la plus facile possible.

T Client-serveur

En informatique, larchitecture client-serveur se dfinit par opposition aux architectures de type matre-esclave (o le serveur communique de manire unidirectionnelle vers le client) ou pair pair (peer to peer, en anglais, o les deux machines communiquent pied dgalit). Ici, cest le client qui initie la communication, en demandant les informations dont il a besoin au serveur, tandis que le serveur est unique pour plusieurs clients.

CONSEIL
On a tous un serveur porte de main
Dans le cas du serveur de dveloppement, ce terme ne doit pas vous effrayer ! Une machine de bureau dil y a moins de dix ans sera amplement suffisante pour tenir ce rle, en particulier si lquipe de votre projet est rduite quelques personnes.

14
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

La prparation de ces serveurs est dtaille dans la premire section du chapitre 3, Installer et tester Magento .
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Lhbergement
Le site en production devra tre hberg, cest--dire quune machine physique, fonctionnant en permanence et connecte lInternet, est disponible et accessible par vous. Diffrentes solutions sont proposes par des tiers pour lhbergement, en fonction de vos moyens, des performances ncessaires, etc. Ceci est galement dtaill au chapitre 3.
T Hbergement

Lhbergement est un service propos par un tiers, payant ou gratuit, afin de mettre en place une application web. Il inclut des ordinateurs allums et connects en permanence, et une connexion haut dbit.

Choisir un nom domaine


Lhbergement ne vous fait pas bnficier automatiquement dun nom de domaine. La plupart des hbergeurs commerciaux vous fourniront une adresse de ce type : m132883.hebergement.example.org, qui vous permettra de tester votre site, mais qui nest certainement pas acceptable sur vos supports de communication et autres documents publicitaires. Le nom de domaine, choisi avant tout sur des critres de communication (et de disponibilit, bien sr) devrait en effet reflter au plus prs le nom, lactivit et limage de votre entreprise. Cest en effet ce nom que lit linternaute dans la liste des rsultats dune recherche sur Google, par exemple, et cest ce nom quil retiendra (ou non) par la suite si le site la convaincu. Le nom de domaine constitue donc indirectement une aide au bon rfrencement de votre site.
CULTURE Le rfrencement
Le rfrencement dun site consiste le rendre visible sur lInternet, cest--dire que les internautes soient en mesure de le trouver le plus facilement et le plus rapidement possible. Les techniques de rfrencement sont nombreuses et de diffrentes natures (SEO, liens sponsoriss, rfrencement naturel...), mais le but est toujours le mme : arriver le plus haut possible dans la liste des rsultats de Google et autres moteurs de recherche. Un bon rfrencement est une des cls primordiales du succs de votre boutique. Loptimisation du rfrencement de votre site est aborde plusieurs reprises dans cet ouvrage au fil daparts, et notamment dans les chapitres 5 et 7, dans la section Optimiser le rfrencement de votre boutique via les URL .

Acheter un nom de domaine


Cest pourquoi vous devrez, auprs du mme fournisseur, ou de vendeurs indpendants (les registrars, parfois traduit en registraires), louer un nom de domaine, du type rizdumonde.fr. Le cot dun nom de domaine slve environ 10 30 euros par an, suivant lextension choisie (.fr, .com, .biz, .eu, .org, etc.). Voici comment choisir un nom de domaine : 1 Dterminez les mots-cls de votre activit, ou le nom de la boutique. 2 Enlevez espaces, accents, caractres spciaux, et vrifiez que cela reste comprhensible. Vous pouvez ajouter des tirets, mais attention au rsultat final ! Par exemple, a eu pay devient ca-eu-paye, ce qui est incomprhensible. 3 Choisissez une extension, suivant le prix, mais surtout le type de site (.com, .fr sont les plus rpandues pour des sites franais) et la disponibilit. Nimporte quel registrar vous indiquera, parmi les extensions auquel il a accs (un registrar franais ne permettra pas ncessairement laccs au .nl par exemple), les noms disponibles. vitez les astuces du type monsite.tv, .tv correspondant larchipel des Tuvalu, et non la tlvision.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

15

1 Petite introduction au e-commerce avec Magento

Magento

CULTURE La loi de la jungle


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
De nos jours, nimporte qui peut commander nimporte quel nom de domaine. Premier arriv, premier servi ! Il est tout fait possible que le nom que vous choisissiez soit dj pris, en particulier sil est simple. Dans ce cas, son occupant est soit un propritaire lgitime, soit un simple profiteur, qui espre, grce son avance sur vous, vous le revendre prix dor. Attention, lhonntet de ces derniers est gnralement discutable, mieux vaut choisir un autre nom, ou simplement une autre extension. Des recours en justice sont sans doute possibles, mais il semblerait que la jurisprudence ce sujet soit quasi inexistante.

4 Commandez le nom de domaine ; la dure de validit (en annes) est

au choix, vous serez contact de nouveau avant expiration.

Plusieurs noms de domaine, est-ce possible ?


Il est tout fait possible, pour un mme site, davoir plusieurs noms de domaine. Avec Magento, il faudra alors constituer concrtement une redirection. De manire gnrale, en fonction du registrar, trois principes sont possibles. La redirection temporaire Les noms de domaines secondaires sont indiqus auprs des serveurs de noms de domaines (DNS) comme redirigs, et chaque fois que le navigateur web les atteint, il lui est indiqu de changer de site. La redirection permanente Le mcanisme est le mme, mais le navigateur, ou les autres clients (moteurs de recherche, par exemple) peuvent considrer comme dfinitive cette redirection, et donc la raliser automatiquement plus tard. Ce sera dommageable si finalement vous dcidez dutiliser la troisime solution. La redirection par Magento Le registrar ne saura pas quil y a redirection, mais tous les noms de domaine se dirigeront vers la mme machine. Magento fera alors des demandes de redirection quand il le jugera ncessaire, sassurant que, quel que soit le domaine demand par le visiteur, celui-ci navigue ensuite sur les pages dun des domaines, choisi comme principal. Vous trouverez plus dinformations propos du mcanisme de requtes sur lInternet dans le chapitre 3, Installer et tester Magento .

T DNS

Le DNS (Domain Name System ou Domain Name Server) dsigne le systme des noms de domaines sur lInternet. Un serveur DNS est contact par nimporte quel client dsirant associer un nom de domaine particulier une adresse IP. Voir la section sur le Web dans le chapitre 2, ainsi que la page web suivante :
B http://www.dns.net/dnsrd/rfc/

La planification du projet
Lors de la mise en place du projet, quelle que soit la solution technique adopte, quelques facteurs dterminants orientent vos choix : De quelles fonctionnalits particulires a-t-on besoin absolument (paiement par carte de crdit, calcul automatique de frais de livraison, etc.) ? De quelles fonctionnalits serait-il souhaitable de disposer ? Quel niveau de personnalisation graphique dsire-t-on ? (Seulement des logos ? Quelles couleurs ? Des graphismes complexes ? Un bouleversement de lergonomie ?) Cest en fonction de ces choix que peuvent tre estims des cots et tabli un calendrier de mise en place. 16
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Estimer les cots


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les cots induits par la ralisation dune boutique en ligne devront prendre en compte aussi bien les paramtres de matriel, dhbergement et de nom de domaine, que la rmunration des comptences ncessaires et le temps consacr la gestion de la boutique. Ceux-ci seront donc variables en fonction de vos exigences et de vos comptences. Le matriel consistera essentiellement en lachat dun ordinateur vocation de serveur et en la location dune connexion Internet. Quant la mise en place, accompagne de cet ouvrage, elle demandera quelques journes deffort de votre part, ou quelques semaines, suivant la complexit graphique et les modifications techniques souhaites. Enfin, chaque anne, la gestion gnrale de la boutique reprsentera aussi un investissement en temps de quelques heures par semaine, voire davantage si les commandes sont abondantes (sajoute alors le temps pour la prparation et lenvoi des commandes).
EN PRATIQUE Pour une petite boutique
Pour une petite boutique, lhbergement et le nom de domaine sera de quelques centaines deuros par an. Comptez aussi, si vous nen disposez pas encore, avec lachat dun ordinateur de bureau (quelques centaines deuros) et la location dune connexion Internet classique (dix trente euros par mois).

Mettre en place dun calendrier prvisionnel


Voici un exemple raliste (en considrant une quipe de personnes travaillant en parallle), bien quoptimiste (voir la section suivante), en un mois :
Tableau 11 Exemple de planification dun projet Magento (sur 30 jours) Jour 1 Jour 2 Jour 3 Jour 4

Choix de la solution gnrale. Achat de lhbergement et dun nom de domaine. Prparation de tests de recette, dun cahier des charges, des mthodes et documents de la gestion de projet. Recherche dune solution gnrale pour le design et les graphismes. Mise en place dun serveur de dveloppement local, du serveur de production. Installation de Magento sur le serveur de test. Travail auprs dun avocat (conditions de vente, limitations internationales, etc.).

Jour 5 Jour 6 Jour 7 Jour 8 Jour 9 Jour 10 Jour 11

changes, allers-retours entre les graphistes et le responsable commercial. Entre de donnes fictives sur le serveur de test, et dcouverte de loutil par les analystes et programmeurs.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

17

1 Petite introduction au e-commerce avec Magento

Magento

Tableau 11 Exemple de planification dun projet Magento (sur 30 jours) (suite) Jour 12

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Jour 13 Jour 14 Jour 15 Jour 16 Jour 17 Jour 18 Jour 19 Jour 20 Jour 21 Jour 22 Jour 23 Jour 24 Jour 25 Jour 26 Jour 27 Jour 28 Jour 29 Jour 30

Prparation des produits : textes, photos...

Intgration sous forme de gabarits des graphismes choisis.

Installation dextensions et modifications lgres sur celles-ci par les analystes et programmeurs.

Tests multiples, dont tests de recette (droulement de scnarios prconus).

Packaging de la solution complte. Dploiement sur le serveur de production, accompagn ensuite des donnes relles. Test de recette, et, comme tout va bien, ouverture !

Entre de donnes relles.

Tenir compte des imprvus


Bien sr, ce calendrier effectif est un exemple de projet isol, se droulant sans catastrophe. Dans la ralit, prvoyez ce type de dsagrments : produits pas prts, incertains ; graphismes changer au dernier moment, car finalement a ne va pas ; hbergement aux capacits insuffisantes ; fonctionnalit imprvue mais mettre en place absolument ; problmes techniques ou humains. Chaque projet aura donc sa propre organisation, en fonction de ses spcificits. Limportant ici est que vous ayez conscience que la mise en place dun site de e-commerce est un vrai projet, et que, mme si les cots dentre sont dsormais bien plus faibles que limplantation physique dun commerce, il faut le grer de faon professionnelle et mthodique.

CONSEIL Lhabituelle catastrophe


Combien de fois la communication autour dun site web ne sest-elle pas faite bien avant louverture de celui-ci... Rsultat : la date tant fixe, le site a d ouvrir en catastrophe, alors quil tait non achev. Prvoir une marge importante est une scurit vidente. Mieux encore, ouvrir le site sans communication massive, avant de raliser, plus tard et en grande pompe, une seconde ouverture, une fois que tout va bien.

18
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Lenvironnement de dveloppement

2
SOMMAIRE

B Le Web

Magento est construit sur diverses technologies (langages de programmation, bases de donnes, etc.), que vous connaissez ou non, selon votre niveau pralable en informatique. Si les lecteurs les plus spcialistes auront peu dintrt sy attarder, les plus novices trouveront dans ce chapitre tout ce quil leur faut connatre de lenvironnement de dveloppement de Magento, ainsi quune explication des termes utiliss tout au long de cet ouvrage.

B Le langage HTML B MySQL, la base de donnes B PHP, la base de Magento B Les fichiers CSV B XML dans les fichiers
et les messages MOTS-CLS

B Internet B Web B HTML B SQL B PHP B XML

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Voici les technologies essentielles utilises par Magento. Il est utile de les connatre, den comprendre les contraintes, et, suivant les manipulations que vous dsirez faire sur votre installation, de les matriser. Pour ce dernier cas, les introductions qui suivent ne seront pas ncessairement suffisantes. PHP, notamment, demandera, si vous en avez le besoin (par exemple pour modifier Magento), un apprentissage complet spcifique. Pour aller plus loin sur chacune de ces technologies, vous pouvez galement vous rfrer aux annexes en fin douvrage.

Le Web : rappels fondamentaux


Magento est un logiciel qui fonctionne sur le Web uniquement. Mme si vous faites partie des internautes rguliers, vous ne matrisez peut-tre pas tous les termes utiliss dans la suite de cet ouvrage.
CULTURE Le Web, cest lInternet ?
LInternet est le rseau qui connecte ensemble une grande partie des systmes informatiques de toutes formes dans le monde. Suivant les utilisations quon en fait (envoi de-mail, accs aux sites web), des protocoles techniques sont automatiquement utiliss par les logiciels associs. Le World Wide Web, autrement dit la Toile , est le sous-ensemble de lInternet qui concerne laccs aux pages web. Il utilise les protocoles hypertextes HTTP et HTTPS (voir la section HTTP... S ci-aprs). Vous tes par exemple habitu aux adresses (URL) du type http:// www.blabla.com, apparaissant dans la barre dadresses en haut des navigateurs Internet. Il est donc plus exact de parler de site web que de site Internet . Or bien dautres protocoles existent sur lInternet : SMTP (envoi de courriels), FTP (transfert de fichiers), POP (rception de courriels), etc. Ces protocoles sont standardiss afin que tous les outils qui les concernent sachent communiquer les uns avec les autres.

Les adresses ou URL


Un site web se prsente donc sous la forme dune succession de pages, associes par des liens (ou hyperliens) sur lesquels les utilisateurs cliquent pour y accder. Cest cette navigation dite hypertexte qui caractrise le Web. chacun de ces liens correspond une adresse, appele URL (Uniform Resource Locator), commenant par http:// ou https://, que lon peut ventuellement aussi saisir telle quelle dans la barre dadresses du navigateur pour accder directement la page. Les URL observent toutes la forme suivante :
[protocole]://[sous-domaine].[domaine].[extension]:[port]/[emplacement][page]?[paramtres]

T Adresse IP

Une adresse IP (Internet Protocol) est un ensemble unique de 4 (IPv4) ou 6 (IPv6) nombres dun octet (0 255) dsignant une machine dans un rseau, en particulier lInternet.

Mais certains de ces lments sont optionnels.

20
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Voici un exemple complet, dont nous dtaillons les lments dans le tableau ci-aprs :
http://fra.youha.com:80/various/search.do?q=18

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Tableau 21 Dtail des composantes de lURL http://fra.youha.com:80/various/search.do?q=18 http fra

Protocole utilis Sous-domaine

Voir la section suivante pour plus de dtails. Il sagit dun texte qui permet de dlimiter les grandes parties du site de faon claire. Trs souvent, il sagit de www. Il peut tout fait tre omis, faites donc lexprience de saisir la mme adresse dun site avec ou sans www... vous atterrirez exactement sur la mme page ! Ils sont achets auprs dun fournisseur de noms de domaines, appel registrar. Le nom de domaine correspond alors, par lintermdiaire de lhbergeur, du registrar et de multiples autres acteurs, une (ou plusieurs) machine(s) physique(s) (voir aussi le chapitre prcdent sur le choix et lachat du nom de domaine). Ce systme de numrotation vient du IP (Internet Protocol), et permet ainsi davoir des serveurs de toutes sortes sur une mme machine : deux applications peuvent exister cte cte si elles ne rclament pas au systme dexploitation les mmes ports. Chaque fois quune requte arrive sur la machine identifie par les lments prcdents de ladresse, le systme dexploitation observe alors quelle application est associe au numro demand, et lui envoie la requte. Les sites web sont presque toujours accessibles par le numro 80. Le navigateur lindique donc naturellement automatiquement par dfaut. Cela peut tre un chemin trs complexe, comportant plusieurs lments spars par des slashs (barre oblique), reprsentant larborescence des diffrents rpertoires o sont stocks les pages web. Magento cre ses propres emplacements lors de linstallation, mais sil est install dans un rpertoire particulier, cela peut aussi apparatre dans cette partie de ladresse. Cela peut tre une image, une page, un document, etc. Pour mieux en comprendre le fonctionnement, essayez de faire une requte quelconque dans un moteur de recherche, puis lisez attentivement les paramtres de cette barre dadresse afin dy reprer les lments de votre recherche.

youha.com

Domaine et son extension

80

Numro de port (entre 1 et 65535)

/various/

Emplacement ou chemin

search.do ?q=18

Ressource demande Paramtres supplmentaires qui dpendent de lapplication, et mme de chaque page particulire

Figure 21

Le paramtre contenant la recherche

HTTP... S ?
HTTP et HTTPS sont les deux protocoles hypertextes disponibles pour un site web. Une partie du site peut tre en HTTP et lautre en HTTPS. HTTP est le sigle de HyperText Transfer Protocol (protocole de transfert hypertexte), tandis que le S de HTTPS signifie secured, scuris. Le systme de protection utilis est une technologie appele SSL (Secure Socket Layer). Il sagit dune scurit pour la confidentialit (pas de lecture de la

T SSL

SSL (Secure Socket Layer) est un protocole de scurisation des donnes, particulirement adapt la confidentialit des messages sur Internet. Il est appel dsormais TLS (Transport Layer Security). Voir la RFC 2246 :
B http://tools.ietf.org/html/rfc2246

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

21

2 Lenvironnement de dveloppement

Magento

part dun tiers) et lintgrit (pas de modification de la part dun tiers) des donnes transmises via le Web.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Figure 22

Barre dadresses pour un site scuris

Lorsque le HTTPS est en place, les donnes sont chiffres entre le navigateur de votre visiteur et votre serveur. Une tierce personne (sur le mme rseau dentreprise que votre client, chez votre fournisseur daccs, chez votre hbergeur...) ne peut plus avoir accs aux donnes, dans un sens comme dans lautre ; elle peut seulement savoir si des requtes sont effectues.
CULTURE Les certificats
Pour un site public, le SSL ncessite lachat dun certificat sign par un organisme officiel, qui cote quelques centaines deuros par an. Si lhbergeur propose le HTTPS, cest quil a dj fait cet achat, et quil vous propose den profiter. Partager ce certificat avec dautres sites nest gnralement pas problmatique.

Or si le HTTP est disponible quoiquil arrive, le HTTPS est plus dlicat mettre en place. Cela inclut notamment lachat (quelques dizaines deuros) dun certificat valable quelques annes. Magento est adapt lutilisation du HTTPS, et cela peut tre une bonne ide de le mettre en place si certaines donnes doivent rester confidentielles tout prix. Par exemple : le paiement, si celui-ci se fait directement sur votre site (ce qui est rare), afin de vous protger des vols de numros de cartes bancaires ; la lecture de votre part des bilans, afin de vous protger de vos concurrents ; certaines pages particulires, qui seraient accessibles uniquement par certaines personnes (une section ventes prives , par exemple). La mise en place du SSL (systme de protection du HTTPS) sur le serveur entranant quelques ralentissements, celui-ci est donc souvent, mme lorsquil est mis en place, rserv aux seules pages concernes par les besoins que nous venons de citer. Enfin, ce systme demande des comptences dadministration de serveur web spcifiques au serveur en question, qui ne sont pas abordes dans cet ouvrage. Si le SSL fait partie de loffre de votre hbergeur, il ny aura alors aucune difficult. Il naura qu vous indiquer le port spcial du HTTPS (souvent 443 au lieu de 80).

Structure dun site web


Gnralement, un site web est caractris par deux lments : le nom de domaine, qui a t achet pour lui ; le serveur, une machine physique correspondant ce nom de domaine.

22
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Sur un mme site, portant un mme nom de domaine, plusieurs outils peuvent ventuellement cohabiter, sans que cela ne pose de problmes majeurs. Ces diffrents systmes doivent alors tre diffrencis dans les URL. Voici les trois solutions : crer diffrents sous-domaines (exemples : magento.rizdumonde.fr et xsltcms.rizdumonde.fr) ; indiquer diffrents chemins (exemples : www.rizdumonde.fr/magento/ et www.rizdumonde.fr/spip/) ; utiliser diffrents ports (exemples : www.rizdumonde.fr:81 et www.rizdumonde.fr:80).

Figure 23

Plusieurs sites sur un mme serveur

La seconde solution, consistant diffrencier des chemins, est la plus simple (voir le chapitre suivant Installer et tester Magento ). Les autres solutions demandent des comptences dadministration de serveur web qui ne sont pas abordes dans cet ouvrage.

CONSEIL Cohabitation et collaboration


entre deux applications
Si deux applications peuvent tre accessibles sur le mme site, elles ne communiqueront pas ensemble naturellement. Ceci demanderait des efforts de programmation supplmentaires, quelques fois trs importants, suivant la collaboration dsire entre les deux.

Pourquoi utilise-t-on des services web ?


Les services web (Web Services ou WS) sont des systmes de communication entre applications htrognes utilisant le HTTP ou le HTTPS. Cest un bon moyen pour profiter des architectures existantes afin de faire passer des donnes entre applicatifs divers, par exemple des sites web loigns lun de lautre. Plusieurs normes bases sur le XML sont utilises, parmi lesquelles : XML-RPC, une norme simple et lgre, plus ancienne et plus limite ; WS-* (incluant SOAP), qui sont les services web du W3C, beaucoup plus complexes, car entrant dans tous les dtails dune communication complte entre applications.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

T XML

XML (eXtensible Markup Language) est un mtalangage permettant la ralisation de langages extensibles, surtout pour la configuration et la communication. Voir la section XML de ce mme chapitre et la page suivante sur le site du W3C :
B http://www.w3.org/XML/

23

2 Lenvironnement de dveloppement

Magento

T Soap

Magento a plusieurs occasions dutiliser des services web, ce que nous verrons par exemple dans le chapitre 8, pour les taux de change.
CULTURE Le W3C ou la standardisation du Web
Le World Wide Web Consortium (abrg en W3C) est un organisme but non lucratif fond pour promouvoir la compatibilit des technologies utilises sur le Web. Ce consortium international dentreprises regroupe des spcialistes du World Wide Web afin de publier, de temps autres, des normes sous forme de documents textuels. Il ne sagit pas de normes au sens europen du terme, mais des recommandations valeur de standards industriels : les acteurs du march peuvent, sils le dsirent, implmenter ces normes, cest--dire crer des logiciels qui les respectent (ou modifier les logiciels existants en fonction de ces standards). Bhttp://www.w3.org

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Soap dsigne un format de messages norm par le W3C essentiellement utilis par les services web. Voir la section Utiliser les services web du chapitre 9 et la page suivante :
B http://www.w3.org/TR/soap/

CULTURE La rvolution des services Web


Les communications de donnes entre entits, entreprises, institutions, etc. se font de plus en plus par des mcanismes de services web. Cela concerne des traoctets de donnes chaque jour en France.

Le langage (X)HTML
CONSEIL Apprendre le (X)HTML
Le HTML est utilis non seulement par Magento, mais aussi par tous les autres outils web. Existant depuis longtemps et pour longtemps, son apprentissage, ais, est devenu une base dans toute formation linformatique. Il est connu par des millions de personnes dans le monde. Les ouvrages suivants vous donneront toutes les bases ncessaires : R F. Draillard, Premiers pas en CSS et XHTML, Eyrolles, 3e dition, 2010, 256 pages (petit ouvrage dinitiation dans la collection Poches Accs libre, prenant en compte les nouveauts de HTML 5 et CSS 3). R M. Nebra, Russir son site web avec XHTML et CSS, Eyrolles, 3e dition, 2010, 318 pages (ouvrage de rfrence dans la collection Accs libre).

Comme toute application web, lun des langages principaux de Magento est le HTML (HyperText Markup Language). Cest le langage de marquage utilis pour reprsenter la plupart des donnes prsentes sur le Web. Il est utilis par Magento dans une variante rcente, le XHTML 1.0 strict. Le HTML est un langage simple, destin toute personne dsirant publier sur le Web. Ce nest pas un langage de programmation, mais dorganisation des donnes, en fonction de leur statut dans le document. Il indique, pour une page, quels sont les titres, les paragraphes, les liens, etc., au moyen de balises ouvrantes et fermantes (par exemple, <h1>titre de niveau 1</h1>, <p>texte dun paragraphe</p>, <a href="URL"> pour un lien). Le XHTML est une variante rcente (dont la version 1.0 est presque la seule utilise), datant de 2001. Le X de XHTML signifie eXtensible, car cette variante se fonde sur la syntaxe du langage de structuration XML (eXtensible Markup Language), abord dans la dernire section de ce chapitre. Cette variante est trs proche du HTML qui existait auparavant. Elle est un peu plus systmatique, un peu moins permissive, car soumise certaines contraintes du XML. Ces deux langages, ainsi que ceux qui suivent, sont standardiss par le W3C (voir lapart page prcdente). Tous les navigateurs web en cours aujourdhui respectent le XHTML correctement.

24
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

PERSPECTIVE HTMl 5 et CSS 3


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Depuis 2010, une nouvelle norme est en train de faire son apparition, le HTML 5. Elle vient augmenter le XHTML afin dy ajouter de nombreuses balises, en particulier afin daccepter sons et vidos. Associe CSS 3, qui succde la version courante CSS 2, elle permettra de multiplier les possibilits daffichage des pages web, sans forcment passer par le JavaScript ou la technologie Flash dAdobe. Il est cependant prfrable dattendre que la grande majorit des navigateurs des clients acceptent ces nouveaux langages (sans doute aux alentours de 2014) avant de les utiliser dans une boutique.

EN SAVOIR PLUS CSS


Voici les spcifications du W3C au sujet des CSS :
B http://www.w3.org/Style/CSS/

Vous pourrez trouver des didacticiels aux adresses suivantes :


B http://fr.html.net/tutorials/css/ B http://www.w3.org/Style/Examples/011/

firstcss.fr.html
Et en plus des ouvrages cits prcdemment propos du XHTML : R R. Goetter, CSS 2 Pratique du design web, 2e dition, Eyrolles, 2009.

HTML, CSS et JavaScript


La plupart du temps, le HTML est employ en association avec les CSS (Cascading Style Sheet), feuilles de style permettant de rgler la mise en forme de toutes les pages (couleurs, polices, etc.) partir dun seul fichier .css. Il peut contenir aussi du JavaScript, un langage de script spcialis dans laffichage dynamique des pages, cest--dire autorisant linteractivit. Connatre le HTML, le CSS et le JavaScript nest utile que si vous dsirez modifier le design de Magento, savoir la prsentation des pages.
EN SAVOIR PLUS JavaScript
Des didacticiels sont disponibles aux adresses suivantes :
B http://javascript.developpez.com/tutoriels/

introduction/
B http://www.xul.fr/ecmascript/tutoriel/

Script.aculo.us
Script.aculo.us est la principale bibliothque JavaScript fournie avec Magento. Une bibliothque (library, en anglais) est un ensemble de fonctions, procdures, classes ou prototypes rassembles dans un fichier pour tre rutilis par divers programmes pour un langage de programmation particulier. Dans Magento, les bibliothques Prototype (base de Script.aculo.us) et ext.js sont galement disponibles, bien que la seconde y soit trs peu utilise (pour afficher des arborescences). Bibliothque libre et gratuite, Script.aculo.us fournit des composants et fonctions graphiques pratiques et lgants pour linteraction avec lutilisateur et Ajax. Elle est abondamment utilise et bien documente. Une prsentation complte du HTML, de CSS, de JavaScript et de Script.aculo.us est propose lannexe B.
B http://www.script.aculo.us B http://www.prototypejs.org B http://extjs.com

LINTRIEUR Bibliothques, langages et frameworks


Script.aculo.us utilise Prototype, un framework luimme bti sur le langage JavaScript. Ainsi les interdpendances sont multiples entre lments applicatifs : une bibliothque est simplement un morceau dapplication, rutilisable, tandis quun framework est un type de bibliothque exigeant de lapplication utilisatrice le respect dun cadre strict, englobant alors une partie mme de cette application (voir plus loin la section Le Zend Framework ). Cela vite tout simplement de rinventer la roue chaque nouveau produit.

MySQL, la base de donnes


MySQL est un systme de gestion de base de donnes relationnelle (SGDBR). Il se prsente sous la forme dun logiciel install sur le serveur qui, dans un protocole spcifique, peut tre interrog afin denregis Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

25

2 Lenvironnement de dveloppement

Magento

T SQL

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

SQL (Structured Query Language) est un langage permettant la communication avec une base de donnes relationnelle, propos par IBM et accept par la plupart des systmes de bases de donnes, notamment MySQL. Voir lannexe C, ainsi que de nombreux didacticiels tels que ceux disponibles aux adresses :
B http://sql.1keydata.com/fr/ B http://sgbd.developpez.com/cours/

trer des donnes mises par le client ou de renvoyer des donnes enregistres prcdemment vers le client. Il est fond sur le langage dinterrogation de base de donnes SQL (Structured Query Language), prsent dans lannexe C. Ltude de MySQL et du SQL est utile en cas de modification du comportement interne de Magento, ainsi que pour occasionnellement interroger ou modifier les donnes (clients, produits, etc.) directement, sans passer par linterface de Magento (cas rares et dconseills). De nombreux systmes du mme type existent. MySQL a la particularit dtre libre, gratuit et facile administrer depuis longtemps, et en consquence systmatiquement prsent chez les fournisseurs dhbergement.

Vous pouvez galement consulter les ouvrages suivants : R C. Soutou, Apprendre SQL avec MySQL, Eyrolles, 2006. R C. Pierre de Geyer, G. Ponon, S. Mariel, Mmento PHP 5 et SQL, 2e dition, Eyrolles, 2009. R R. Rimel, Mmento MySQL, Eyrolles, 2007.

Organisation gnrale dune base MySQL


Lorganisation gnrale de MySQL est rpartie sur quatre niveaux, chaque lment tant imbriqu dans le prcdent :
3 4

Un serveur (sur une machine ou sous forme dun cluster de machines), contenant :

des bases de donnes, chacune ayant un nom et des droits spcifiques. Souvent, une base correspond un projet, un site, contenant :

des tables, chacune portant un nom et contenant :

des champs et des enregistrements, chaque enregistrement ayant une valeur pour chaque champ.

On pourra par exemple parler de la valeur du champ sku de lenregistrement 3 de la table catalog_product_entity de la base magento_rizdumonde de mon serveur. Bien sr, comme pour tous les outils du mme type, linstallation de Magento demande lemplacement de la base et, sil la trouve, le logiciel cre lui-mme toutes les tables ncessaires lintrieur. Votre travail sera donc minimal ce sujet.

PhpMyAdmin et SQL
Ladministrateur de Magento aura tout intrt connatre les bases du SQL, afin de raliser au besoin manuellement des requtes sur ses propres donnes. Gnralement, un outil courant, PhpMyAdmin, est disponible pour cela, notamment chez les hbergeurs de sites web. Cet outil permet la visualisation des diffrents niveaux cits ci-dessus. Une fois Magento install, il suffit de choisir gauche une base, si plusieurs sont disponibles, puis de slectionner une table. Longlet Afficher en haut permet de voir toutes les donnes de la table en question.

26
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 24 Affichage dune base de donnes avec PhpMyAdmin

Longlet SQL permet de raliser soi-mme des requtes de tout type.

Figure 25

Une requte dans longlet SQL

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

27

2 Lenvironnement de dveloppement

Magento

PHP, le langage la base de Magento


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

O est PHP et comment fonctionne-t-il ?


PHP est le langage de programmation principal dans lequel a t dvelopp Magento. Cest un langage impratif, procdural et objet, assez simple et moderne. Il sagit de lun des langages usuels pour raliser des sites web dynamiques. Son nom est un acronyme rcursif, PHP Hypertext Preprocessor et sa licence (licence PHP), mme si incompatible avec la licence GNU GPL, en fait un logiciel libre. Des millions de sites sont raliss en PHP, de toutes tailles et complexits (par exemple : www.wikipedia.org, www.facebook.com). PHP sexcute, par opposition JavaScript, sur le serveur. Tout le code PHP reste donc sur le serveur, car le rsultat de lexcution du PHP est simplement du HTML, qui sera interprt par le navigateur du client. Voici le schma dune requte typique envoye un site Magento :
T Formulaire

Un formulaire est une partie de page web qui propose lutilisateur dentrer des donnes et de les envoyer au serveur.

EN SAVOIR PLUS Matriser PHP


Consultez les ouvrages de rfrence suivants : R E. Daspet, C. Pierre de Geyer, PHP 5 avanc, 5e dition, Eyrolles, 2008. R D. Seguy, P. Gamache, Scurit PHP 5 et MySQL, 2e dition, Eyrolles, 2009. Et pour les tudiants : R J. Engels, PHP 5, 2e dition, Eyrolles, 2009.

Figure 26

Une requte vers Magento

1 Le client clique sur un lien, utilise un marque-page de son navigateur

CULTURE Les autres langages pour le Web


PHP est lun des langages les plus connus pour raliser des applications web dynamiques. On trouve aussi Java (dans la plate-forme JEE), VB (associ ASP), Ruby (avec Rails), Python, etc. PHP est le plus souvent propos par les hbergeurs, ce qui a certainement prvalu lors de son choix par les architectes de Magento.

ou envoie un formulaire. 2 Le navigateur cre une requte selon le protocole HTTP. La requte est envoye via lInternet jusquau serveur. 3 Le serveur reoit la requte et, observant quelle correspond du HTTP et ensuite au langage PHP (grce lextension .php de la ressource demande), appelle linterprteur correspondant. 4 Linterprteur PHP utilise la requte et, ventuellement, communique avec une base de donnes, afin de produire un rsultat HTML. 5 Le rsultat HTML est renvoy au serveur. 6 Ce mme rsultat est renvoy au navigateur, qui le transforme en une prsentation lcran. Lensemble de ces phases a dur quelques diximes de secondes.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

28

Le Zend Framework
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Vous naurez besoin de connatre le PHP que si vous dsirez modifier le comportement de PHP dans Magento. Or il sagit de manipulations difficiles et coteuses en temps. Dans de nombreux cas, Magento et ses extensions seront suffisants, sans que vous ayez besoin dcrire du PHP. Le Zend Framework est la principale bibliothque utilise par les dveloppeurs de Magento. Quelques classes issues de PEAR (PHP Extension and Application Repository), une autre collection de bibliothques PHP, sont aussi incluses. Lobjectif est ici de rutiliser plutt que de rcrire, en bnficiant de tout lcosystme du logiciel libre (dont des licences compatibles entres elles, qui permettent un mlange sans restrictions). La socit Zend est le mainteneur principal de PHP. Quant au Zend Framework, cest un framework PHP libre, cest--dire une bibliothque proposant un cadre de dveloppement. Connatre le fonctionnement du Zend Framework est utile pour le dveloppeur PHP qui veut profiter de ses bibliothques. La syntaxe de PHP est prsente dans lannexe C, ainsi que le Zend Framework.
CULTURE Lavnement des frameworks PHP
De plus en plus de frameworks sont disponibles pour PHP. Les plus modernes sont Symphony, eZ Components, CakePHP et le Zend Framework. Davantage quune mode, leur avnement est d lapparition et laboutissement de PHP 5, et les nouveaux grands projets en PHP font gnralement appel lun ou lautre. Les frameworks PHP ont donn lieu de nombreux ouvrages, parmi lesquels : R F. Potencier, H. Hamon, Symfony, Eyrolles, 2009, 486 pages. R J. Pauli, G. Ponon, Zend Framework, Eyrolles, 2008, 446 pages.

Les fichiers CSV


Les fichiers CSV sont des fichiers textuels simples pour les donnes tabulaires. Ils peuvent tre ouverts et modifis avec des diteurs textuels ou des tableurs tels que OpenOffice.org Calc ou Microsoft Excel. Lextension est habituellement .csv.
Exemple de fichier CSV :
"Pays","Rgion/tat","Code postal","Poids (et au-del)","Prix" "France","*","*",0,4 "France","*","*",.05,4.55 "France","*","*",.25,6.18 "France","*","*",.45,7.14 "France","*","*",1,11.20

SAVOIR Les retours la ligne


Les retours la ligne, dans un fichier textuel, et notamment CSV, posent problme, car ils ne sont pas cods de la mme manire dans les diffrents systmes dexploitation (Microsoft Windows, Unix, Linux, etc.). Avec Windows, utilisez plutt Wordpad que Notepad (bloc-notes) pour viter des affichages tranges de ces fichiers.

La premire ligne est une ligne den-tte, souvent optionnelle. Les lignes suivantes contiennent les donnes. Les valeurs sont spares par une virgule, comme lindique en anglais le sigle CSV (Comma Separated Values). Les valeurs susceptibles de contenir des virgules peuvent tre entoures de guillemets, afin dviter toute ambigut.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

29

2 Lenvironnement de dveloppement

Magento

XML dans les fichiers et les messages


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

XML (eXtensible Markup Language) est un langage incomplet, cest-dire un langage gnrique qui doit tre augment afin dtre complet. On parle aussi de mtalangage. Il sagit en quelque sorte dun ensemble de rgles de grammaire (syntaxe) et de vocabulaire (description de donnes) utiles pour structurer des documents et crer de nouveaux langages. Comme le HTML, il fait lusage de balises dont les rgles dimbrication sont strictement rglementes. Il est particulirement adapt lenregistrement de documents de petite ou moyenne taille (par exemple, un fichier de configuration) ou la transmission de donnes (pour les services web, par exemple).
EN SAVOIR PLUS Apprendre XML
R A. Brillant, XML Cours et exercices,

Eyrolles, 2007, 2e dition, paratre, 2010.

Magento utilise abondamment le XML. Il est ncessaire de le connatre si lon veut matriser la cration de nouveaux thmes pour Magento ou la configuration manuelle de loutil. La syntaxe du XML est dtaille en annexe D.

30
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Installer et tester Magento

3
SOMMAIRE

B Les lments indispensables

Pour commencer, il faut bien entendu installer Magento. Une chance : les auteurs ont tout fait pour quil y ait le moins dembches possible !

pour installer Magento

B Phases dinstallation et test B Les tches cron B Magento en franais B Crer un premier produit
MOTS-CLS

B Apache B serveur B PHP B MySQL B hbergement B droits daccs B cron B internationalisation

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Linstallation de Magento est plutt une tche facile, sans aucun comportement ou prrequis exotique. Si vous avez dj mis en place une autre application PHP, alors cela sera encore plus ais.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les lments indispensables pour installer Magento


Les outils requis
Magento a des exigences classiques pour un logiciel de ce type : un serveur web, de prfrence Apache, disposant dun interprteur PHP avec certains paramtres, et une base MySQL. Nous donnons ici une prsentation gnrale de ces besoins, et les chapitres suivants fournissent plus amples explications en fonction du cas qui vous concerne.
T Apache

The Apache Software Foundation est une fondation amricaine grant des projets de dveloppement de logiciels libres. Elle a donn son nom une licence libre, la licence Apache. Mais Apache dsigne aussi son projet le plus ancien et le plus connu, Apache HTTP Server, un serveur web ncessaire Magento.
B http://www.apache.org

Apache
Le serveur web de la fondation Apache, souvent raccourci en simplement Apache , est obligatoire pour Magento ; il dispose de fonctionnalits additionnelles ncessaires son fonctionnement. Par chance, cest un serveur trs courant, et il est libre et gratuit. Apache existe en deux grandes versions : Apache 1 (1.3.x), qui est encore la version la plus commune, et Apache 2 (2.0.x 2.2.x), dont la grande nouveaut rside notamment dans les modes de fonctionnement parallles, qui peuvent amliorer les performances dun site trs visit. Magento accepte chacune des deux versions, et prend en compte les nouveaux mcanismes de la version 2.

SAVOIR HTTPS avec Apache


Apache peut tre configur pour mettre disposition le HTTPS en plus du HTTP. Magento sera capable dutiliser correctement le HTTPS, condition que cela ne soit pas ralis avec un certificat SSL sign par soi-mme possibilit qui aurait de toute faon peu dintrt pour une boutique en ligne.

Linterprteur PHP
Linterprteur PHP doit tre install et configur pour tre utilis par Apache. Lui aussi est libre et gratuit. La version 5.2 est exige. Les extensions ncessaires de PHP qui doivent tre actives sont prsentes dans le tableau suivant.
Tableau 31 Extensions PHP activer

Extension

Description

PDO PDO_MySQL SimpleXML DOM Mcrypt

Pour lhomognisation de laccs aux bases de donnes. PDO remplace les extensions classiques daccs aux bases MySQL depuis PHP. Extension pour laccs et la modification facile du XML depuis PHP. Extension standard pour laccs et la modification du XML depuis PHP. Extension pour le chiffrement/dchiffrement, implmentant les algorithmes classiques. Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

32

Tableau 31 Extensions PHP activer (suite) Extension Description

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Hash GD iconv SOAP cURL

Extension pour la cration de valeurs de hachage (ou hash, en anglais), une technique utilise pour identifier des donnes en dtectant si deux valeurs ou deux textes (lempreinte) sont identiques. Extension ddie la manipulation dimages. N.B. Magento ne fait pas partie des produits ncessitant Imagick. Extension pour la conversion des chanes de caractres dun encodage lautre. Extension pour laccs et la cration de services web, utile seulement si Magento est utilis en ce sens (voir au chapitre 9 section Utiliser les services web ). Extension pour la gestion des protocoles usuels, en particulier laccs de serveurs distance.

La plupart de ces extensions sont actives dans toute installation de PHP. En particulier, SimpleXML, DOM et Hash sont toujours prsents avec PHP 5. Il ny a aucun paramtrage additionnel pour ces extensions. Par ailleurs, PHP doit tre configur de manire particulire (bien que commune) : safe_mode doit tre paramtr off et memory_limit suprieur ou gal 32M.

MySQL
MySQL doit tre disponible en version 4.1.20 ou ultrieure. Pas dinquitude, cette version date de 2006, et il ny a aucune raison de rester sur une version plus ancienne. Il existe plusieurs distributions de MySQL. La version communautaire, libre et gratuite, est suffisante. Les tables seront cres automatiquement en utilisant le moteur INNO-DB, toujours disponible.
SAVOIR INNO-DB
Certaines inquitudes ont t mises quant la prsence future du moteur INNO-DB, ncessaire pour Magento, dans MySQL. Aucune inflexion sur cette politique nest subvenue pour le moment de la part dOracle, sa socit propritaire, et il est probable que INNO-DB sera maintenu dans les prochaines versions de MySQL.

Un hbergement commercial
La trs grande majorit des sites Magento sont hbergs par un tiers sur des fermes de serveurs en location. De nombreuses socits proposent ce service, avec toutes sortes de fonctionnalits. Voici les lments dterminants qui doivent vous permettre de faire un choix parmi ces offres.

Serveur mutualis ou ddi ?


Un serveur mutualis est un serveur partag avec dautres clients, alors quun serveur ddi est votre disposition exclusive. Notez que si vous ne disposez pas dun administrateur systme, vous ne devriez raisonnablement pas louer un serveur ddi. Les avantages dun serveur ddi : toutes les ressources de la machine sont votre disposition, ce qui offre de meilleures performances, ainsi
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

33

3 Installer et tester Magento

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

ATTENTION Contrle des options


sur un serveur mutualis
Sur un serveur mutualis, vous naurez gnralement pas le contrle exact des options, notamment en ce qui concerne la version des logiciels et leurs paramtres. Assurez-vous que les lments indiqus dans le chapitre prcdent soient en place.

que la possibilit dajuster exactement les options de PHP et dApache. Les avantages dun serveur mutualis : un cot beaucoup plus faible, ladministration gnrale complte de la machine ralise pour vous.

Quel matriel ?
En fonction du nombre de visites que vous prvoyez, les performances de la machine sont prendre en compte. Considrez quen dessous de plusieurs milliers de visites relles par jour, toutes les configurations suffiront pour Magento.

Les services supplmentaires


La mise en place du SSL, la sauvegarde automatique, le serveur MySQL sur une machine spare ou la rplication sont des exemples de services votre disposition, souvent fournis sous forme de packs.

La qualit du service et le support


CONSEIL
Comparaisons dhbergeurs en ligne
Vous trouverez sur le Web des comparateurs de toutes sortes, et des avis dutilisateurs vis--vis des arguments objectifs prendre en compte.

La qualit du service et le support sont plus ou moins difficiles valuer. Considrez notamment les statistiques de disponibilit (99,9 % signifie 9h dabsence par an... toujours au pire moment !).

Un serveur domicile
Vous pouvez avoir deux bonnes raisons dinstaller un serveur sur votre ordinateur de bureau ou sur votre portable : disposer dun serveur de dveloppement et de test, sur lequel vous pourrez par ailleurs vous entraner avec cet ouvrage. Ceci est fortement recommand ; disposer dun serveur de production directement chez vous. Si ceci peut paratre sduisant, notez bien les contraintes que cela vous impose : maintenir proprement sa machine (ventuellement en salle blanche) et la scuriser (accs, etc.) ; il faut galement quelle soit allume en permanence ; disposer dune connexion Internet trs rapide. En effet, avec une connexion ADSL classique, les dbits en envoi (cest--dire en rception du ct de vos visiteurs) seront trs certainement insuffisants (cela dpend du fournisseur, de votre offre, de votre emplacement physique...).

34
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Installer un serveur domicile


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La premire tape dinstallation dun serveur domicile consiste prparer la machine qui va laccueillir. Vrifiez que lespace disque est suffisant (100 Mo minimum), que la machine est propre (pas de pare-feu en fin de vie qui bloquerait anarchiquement les requtes) et quil ny a pas dj un serveur en fonctionnement (cela peut tre le cas avec Windows Server 2000 ou 2003, par exemple). Sous Windows, afin de vrifier ce dernier point, ouvrez une console (menu dmarrer>Excuter, puis taper la commande cmd), et entrez netstat -an (comme all et numeric, afin de voir tous les ports ouverts, selon leur numro TCP/IP). Si le port 80 y apparat, un serveur web est dj en fonctionnement sur votre ordinateur. Avec un systme UNIX, le test est identique, en entrant dans un terminal.
netstat -an,

Figure 31

Rsultat dun appel Netstat

Dans ce cas, il serait ventuellement possible dutiliser lexistant, ou den placer un second sur un autre port. Sinon, tchez dinterrompre ce serveur superflu. Il faut ensuite obtenir Apache, PHP et MySQL. Suivant votre systme dexploitation, vous disposez de distributions gratuites trs faciles installer, contenant ces trois logiciels (tlchargeables par exemple sur www.wampserver.com ou www.easyphp.org). Il serait possible de tlcharger et
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

35

3 Installer et tester Magento

Magento

installer ces trois logiciels sparment, mais leur configuration, en particulier celle dApache, est difficile et hors du propos de cet ouvrage.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Tester et paramtrer le serveur


SAVOIR Le serveur localhost
localhost et 127.0.0.1 sont deux dnominations particulires dsignant le serveur sur lordinateur sur lequel vous travaillez. Bien sr, dans un rseau, celles-ci ne permettent pas datteindre un ordinateur depuis un autre.

Enfin, vous devez vous assurer que le serveur fonctionne correctement et dispose des bonnes options. Accdez par un navigateur ladresse http:// localhost/ (ou bien http://127.0.0.1/). Si un pare-feu essaie de vous en empcher, contraignez-le, il ny a pas de risque. La page daccueil de votre serveur devrait alors souvrir. Le seul paramtrage particulier intressant du serveur Apache est la prsence de mod_rewrite. Celui-ci permet la rcriture dURL (voir au chapitre 7 la section Optimiser le rfrencement de votre boutique via les URL ). Cherchez le fichier httpd.conf de votre serveur. Il suffit alors dter son statut de commentaire la ligne contenant rewrite_module en supprimant le dise # au dbut.
Activation de la fonction mod_rewrite sur le serveur Apache
LoadModule rewrite_module modules/mod_rewrite.so

Configurer PHP
Configurons PHP ensemble : il vous faut trouver le fichier php.ini, qui contient tous les paramtres de PHP. Ouvrez-le avec un diteur textuel quelconque. Ds que vous le modifiez, vous pouvez lenregistrer, puis redmarrer le serveur Apache, afin que les ajouts ou suppressions soient prises en compte. Il sagit dun fichier INI classique. Chaque valeur a une rubrique (les intituls entre crochets), un nom gauche du signe gal et une valeur droite. Les points-virgules commentent la ligne en cours.
Composition dun fichier INI
[Rubrique] nom = valeur ; commentaire

Il y a des configurations usuelles de PHP, attachons-nous ici aux lments qui peuvent varier, dans leur ordre dapparition. Dsactiver le safe-mode Le safe-mode est une configuration de loutil peu utilise. Il faut la dsactiver :
safe_mode = Off

36
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Limiter les ressources Les limites sur les ressources donnent un contrle particulirement utile sur les systmes des hbergements mutualiss. La valeur max_execution_time permet dinterrompre les requtes trop longues (en secondes), max_input_time celles trop longues dans lenvoi de donnes de formulaires et memory_limit celles qui utilisent trop de mmoire vive (RAM). Voici des valeurs acceptables :
max_execution_time = 60 max_input_time = 60 memory_limit = 32Mo

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Afficher ou non les erreurs Laffichage des erreurs est utile (On) sur un serveur de dveloppement, mais videmment dsactiver (Off) sur un serveur de production, afin quen cas de catastrophe, vos visiteurs ne se retrouvent pas face des messages incomprhensibles en anglais.
display_errors = On

Limiter la taille des fichiers envoys Deux options (un peu loignes dans le fichier) concernent lenvoi de fichiers vers le serveur. Vous les utiliserez si vous publiez (voire vendez) des documents dans votre boutique en ligne. Vous utiliserez alors des formulaires pour les envoyer vers le serveur. Le premier paramtre indique la taille totale maximale des documents envoys par un formulaire, le second la taille maximale de chacun des champs, notamment des champs denvoi de fichier.
post_max_size = 8M upload_max_filesize = 4M

CONSEIL Proposer de trs gros fichiers


Si vous disposez de fichiers trs lourds, par exemple des vidos publier ou vendre, dautres problmes de toutes sortes, communs tous les sites web, se poseront (espace de stockage, bande passante, etc.). Magento noffre aucune aide particulire ce sujet.

Dsactiver magic-quote Lutilisation de magic_quote est une bizarrerie qui renforait la scurit, mais qui disparat progressivement. Cela devrait tre dsactiv, mais ce nest pas primordial.
magic_quotes_gpc = Off

Autoriser fopen Lorsque Magento ouvre des fichiers situs sur des serveurs distants (quelques fonctionnalits le demandent), il utilise la fonction fopen vers leur URL particulire ; il faut donc lautoriser :
allow_url_fopen = On

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

37

3 Installer et tester Magento

Magento

Extensions Les extensions PHP utilises sont indiques ensuite. Habituellement, une longue liste dextensions est propose ; il faut dcommenter celles qui vous sont utiles, comme suit (en rfrence au tableau des extensions prsent plus haut) :
extension=php_curl.dll extension=php_gd2.dll extension=php_mcrypt.dll extension=php_mysql.dll extension=php_pdo.dll extension=php_pdo_mysql.dll

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Crer le rpertoire Magento


Vous devez donc maintenant redmarrer votre serveur (laction raliser dpend de la distribution dApache utilise, vous pouvez sinon redmarrer lordinateur lui-mme). Ensuite, crez dans le rpertoire ddi (souvent www ou root ou wwwdoc) un sous-rpertoire pour Magento, du nom que vous voudrez. Notez bien que vous pourriez ainsi (comme sur un serveur distance) avoir un grand nombre doutils associs un mme serveur, chacun dans son rpertoire. Cest tout fait normal, et vous pourrez en profiter.

Figure 32

Votre rpertoire la racine

Accdez votre rpertoire par le navigateur, en y ajoutant le nom ladresse, par exemple http://localhost/rizdumonde/.

38
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Les droits daccs


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Vous devez mettre en place des droits daccs complets pour lutilisateur systme de votre serveur Apache sur les rpertoires suivants :
1 app/etc/ 2 var/ 3 media/

Sur un systme Windows, si vous ny avez quun seul compte (administrateur), vous navez rien faire. Sinon, il faut modifier les proprits du rpertoire, en donnant un contrle total lutilisateur (lecture, criture, modification, excution, affichage du contenu...) comme sur la figure ciaprs :

Figure 33

Scurit des rpertoires


T FTP

Sur un systme de type Unix, une simple commande suffira pour chaque rpertoire :
> chmod -R 777 ./app/etc > chmod -R 777 ./var > chmod -R 777 ./media

distance (cest--dire avec un accs via FTP), la manipulation sera tout aussi possible. Consultez la documentation de votre client FTP si ncessaire.

Protocole de communication alternatif au HTTP, trs simple, FTP (File Transfer Protocol) permet le transfert (envoi et rception) de fichiers. On dsigne aussi par FTP les nombreux outils permettant cette communication (clients et serveurs FTP). Pour plus dinformations, consultez la RFC 959 (les RFC ou Request For Comment sont des documents publis sur lInternet, dcrivant des protocoles ou des standards) :
B http://tools.ietf.org/html/rfc959

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

39

3 Installer et tester Magento

Magento

Rves de grandeur ?
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Avec laccroissement invitable de votre activit, pourrait se poser la question de besoins supplmentaires : un espace disque accru cause dun grand nombre de produits, doffres, de clients (plusieurs millions) ; davantage de bande passante, de mmoire, de processeurs cause dun grand nombre de visiteurs et dacheteurs (plusieurs milliers chaque jour).
CONSEIL Lvolution des services
Les services dhbergement samliorent petit petit, grce lvolution du matriel. Ainsi, mme si le nombre de vos clients crot rgulirement, votre hbergement peut tout fait rester suffisant.

Si vous atteignez les limites de votre hbergement, des solutions de qualit suprieure devraient tre envisages auprs de votre fournisseur. Voici une configuration possible pour une boutique de trs grande taille : 10 000 produits en catalogue, pour 1000 acheteurs par jour, avec un grand nombre dimages et de mini-applications communautaires en place (un forum, par exemple) : un cluster de cinq serveurs web ddis puissants, le premier soccupant de raliser la rpartition de la charge (load-balancing) sur les quatre autres identiques ; deux serveurs supplmentaires, pour la base de donnes ; le second est une rplication du premier, mis en place but de sauvegarde, de remplacement en cas de chute du premier (fail-over) et de requtes en informatique dcisionnelle (business intelligence) ; une bande passante en sortie de 500 Mbps ; un administrateur Linux avec une astreinte et environ 20 h de maintenance par mois. Cette configuration a bien sr un cot lev ; elle est reprsentative de ce que lon peut trouver pour quelques boutiques en ligne (moins dune centaine en France).

Phases dinstallation, pas pas


Obtenir Magento
B http://www.magentocommerce.com

Magento Community Edition est disponible en tlchargement sur le site officiel : slectionnez Download>Download Magento dans le menu de la page daccueil. Un formulaire propose linscription auprs du site, mais cela na pas dintrt pour vous pour le moment : cliquez sur la mention No thanks, just take me to the download page en bas du formulaire pour passer cette tape.

40
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Pour tester Magento plus facilement, il pourrait tre utile de tlcharger et installer pralablement Sample Data. Cet lment tlchargeable supplmentaire permet de disposer de donnes de test afin dvaluer Magento. Nous allons ici nous en passer pour nous consacrer directement notre propre site.

Figure 34

Versions de Magento proposes au tlchargement

CONSEIL Sauvegardez la version

Deux versions de Magento sont alors disponibles : Downloader (environ 700 Ko) permet de raliser linstallation de faon diffre : seule une premire partie de loutil est tlcharge, qui elle-mme ira chercher le reste. Lavantage est dtre certain davoir la dernire version, et ventuellement viter un tlchargement complet. Full Release (environ 16,5 Mo) permet de mieux se rendre compte de loutil et de ddramatiser cette installation. Nous allons utiliser la seconde version, en slectionnant le format magento-xxx.zip (ou .tar.gz si vous y tes habitu), puis en cliquant sur le bouton de tlchargement DOWNLOAD.

tlcharge
Si jamais plus tard vous reprenez une installation, il vous sera peut-tre utile de repartir de la mme version exactement, alors que celle du site officiel aurait change. Cest pourquoi vous devriez sauvegarder quelque part la distribution que vous venez de tlcharger.

SAVOIR Les clients FTP


Il existe de nombreux clients FTP gratuits, tels FileZilla ou Core FTP. Ils sont faciles utiliser et fournis avec une documentation. Les paramtres FTP y utiliser sont fournis par votre hbergeur.
B http://www.filezilla.fr B http://www.coreftp.com

Prparer larchive
Dcompressez larchive dans le rpertoire prvu la section prcdente. Attention, cette archive contient elle-mme un rpertoire racine, ignorer (ou bien dcompressez larchive dans le rpertoire racine de votre serveur web, et renommez le rpertoire cr ventuellement ensuite). Le rpertoire dcompress contient une dizaine de rpertoires et autant de fichiers. Si vous faites une installation sur un hbergement distance, utilisez un client FTP afin denvoyer, sur le rpertoire qui vous est offert, celui que vous venez de dcompresser.

Figure 35

Les rpertoires de Magento Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

41

3 Installer et tester Magento

Magento

La base de donnes
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La base de donnes MySQL doit tre cre et en fonctionnement. Utilisez pour cela PhpMyAdmin, prsent dans le chapitre 2, et gnralement inclus dans les hbergements mutualiss tout comme dans les distributions prtes installer.

Figure 36

Page daccueil de PhpMyAdmin

LINTRIEUR Les bases dun hbergement mutualis


Les hbergeurs mutualiss grent de multiples bases pour leurs clients. Chacun ne peut accder qu sa propre base, bien que tous peuvent partager le mme serveur.

Sur un hbergement mutualis, la base aura t cre pour vous, ou

alors un utilitaire en ligne, une console web, vous permettra de le faire (cela dpend de lhbergeur). Sur votre propre installation, faites cette cration en entrant un nom quelconque (exemple : Magento ) dans la case au centre, et choisissez un inter-classement utf8_general_ci. La base de donnes doit alors apparatre gauche. Il nest pas ncessaire de raliser des manipulations supplmentaires dadministration, mais cette page pourra vous tre utile ensuite pour la maintenance et lexcution directe de requtes SQL.

Installer
1 Utilisez votre navigateur pour poursuivre linstallation. Rendez-vous

ladresse http://localhost/rizdumonde/, rizdumonde correspondant au rpertoire de votre projet indiqu ci-dessus. 2 Vous tes accueilli par une page vous demandant de valider la licence dutilisation. gauche, un menu indique votre passage dans le processus dinstallation. Vrifiez que vous avez bien compris les termes de la licence (voir le chapitre 1 ce sujet), cochez la case et cliquez sur Continue. 42
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 37 Page de bienvenue

3 Vous sont ensuite demands des paramtres de localisation : quelle

T Locale

langue (Locale) par dfaut, quel fuseau horaire (Time Zone) et quelle monnaie (Default Currency). Le tableau suivant prsente des paramtres raisonnables.

Dans le monde du Web, ce terme non traduit dsigne les paramtres locaux, savoir une langue et ventuellement un pays (anglais du RoyaumeUni, anglais des tats-Unis, franais de France, franais du Canada...).

Figure 38

Options dinternationalisation
Tableau 32 Valeurs pour linternationalisation, suivant le pays Votre localisation Locale Time Zone Default Currency

Canada, Qubec France Belgique Suisse Groupe Eyrolles, 2010

Franais (Canada) Francais (France) Franais (France) Franais (France)

Eastern Standard Time Romance Standard Time Romance Standard Time Romance Standard Time

canadian dollar euro euro franc suisse

43
user 177 at Thu Nov 11 07:36:42 +0100 2010

3 Installer et tester Magento

Magento

4 La page suivante demande des informations de configuration sys-

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

tme de Magento. La configuration de la base de donnes dpend du type dinstallation. Sur votre propre serveur, choisissez comme Database Name le nom choisit prcdemment lors de la cration de la base. Laissez localhost et root pour les champs Host et User Name, et le mot de passe devrait tre vide. Sur un serveur mutualis, ces informations doivent vous tre indiques par votre hbergeur. Le prfixe des tables est au choix. Lorsquil crera les tables, le nom de chacune sera alors prfix. Ceci est utile si plusieurs projets se partagent la mme base (souvent, sur les serveurs mutualiss, une seule base est fournie). Ce champ peut tre laiss vide.

Figure 39

Configuration pour la base

5 Les paramtres daccs sont aussi demands :

LURL de base (Base URL) est lURL correspondant la faon courante daccder votre site. Une fois que vous aurez achet un nom de domaine, il faudra modifier la configuration de Magento en consquence. Pour le moment, la valeur dtecte est certainement la bonne. Le champ Admin Path na pas grande importance. La valeur par dfaut est raisonnable. Loption Skip Base URL validation before next step devrait tre dsactive. Il sagit dune vrification dans le cas o vous auriez fait une erreur pour lURL de base. Loption Use Web Server (Apache) Rewrites devrait tre active, cela permet davoir des URL plus propres et plus agrables lire. Laissez cette case dcoche si vous navez pas pu prcdemment activer mod_rewrite pour Apache. 44
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Loption Use Secure URLs (SSL) dpend de la disponibilit ou non du SSL. En local, vous ne laurez pas mis en place.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

CONSEIL Premiers paramtres


Ces premiers paramtres sont les plus importants, mais pourront tre modifis plus tard. Si vous tes incertain, gardez les valeurs par dfaut.

Figure 310

Configuration de laccs au site

6 Une dernire option est disposition : la faon denregistrer les ses-

sions (Session storage options). La session est le mcanisme qui permet de sauvegarder de faon trs temporaire les donnes correspondant un utilisateur particulier. Cela est utile par exemple lors de lachat sur votre boutique. Il sera gnralement plus rapide et moins coteux (en espace sur le disque dur) denregistrer les sessions sur le disque dur (File system), mais certains administrateurs considrent que cela constitue une faille potentielle de scurit.

Figure 311

Choix de lenregistrement des sessions

LINTRIEUR La cl de chiffrement 7 Il vous est propos ensuite de crer le compte administrateur de la

boutique. Les trois premiers champs correspondent aux prnom, nom et email de ladministrateur. Bien quobligatoires, ils ne sont pas essentiels. Ensuite, vous devez choisir un Username (nom dutilisateur) et Password (mot de passe, entrer deux fois), cest--dire de quoi vous authentifier. Vous pouvez laisser admin pour le nom dutilisateur, mais choisissez un mot de passe suffisamment long et complexe. Laissez la cl de chiffrement (Encryption Key) vide.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

La cl de chiffrement est utilise afin dviter que les mots de passe soient sauvegards tels quels dans votre base de donnes. Ainsi, un accs celle-ci ne compromettrait pas les mots de passe que vos visiteurs pourraient avoir utiliss ailleurs.

CONSEIL Enregistrer le premier utilisateur


Cest une bonne ide de noter dans un fichier vos nom dutilisateur, mot de passe et cl de chiffrement, et de mettre ce fichier de ct.

45

3 Installer et tester Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 312

Cration du compte dadministration de Magento

8 Vous obtenez un message de flicitations : bravo !

Tester linstallation
la fin de linstallation, deux boutons sont affichs : Go to Frontend et Go to Backend. Ils correspondent deux adresses : le site public (frontend), utilisant lURL la plus simple, par exemple
http://localhost/rizdumonde/ ;

le site priv (backend) ou interface dadministration du site, utilisant une

URL fabrique partir de la prcdente et du nom de rpertoire choisi ci-dessus (Admin-path), par exemple http://localhost/rizdumonde/admin/.
Figure 313

Choix la fin de linstallation

Ouvrez les deux dans un navigateur. Un navigateur avec onglets sera lidal, les modifications faites dans chaque onglet ayant ainsi des rpercussions sur ce que lautre onglet affiche. Dans linterface dadministration (Admin Panel), connectez-vous avec le nom dutilisateur et le mot de passe choisis prcdemment, afin datteindre la page daccueil (Dashboard) de ladministration (voir figures 3-15 et 3-16). Ignorez le message qui peut safficher au centre.

46
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 314 La partie publique du site par dfaut, sans article

Figure 315

Laccs la partie prive du site

Figure 316

La partie dadministration de Magento

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

47

3 Installer et tester Magento

Magento

DPLOIEMENT Dployer, copier une installation


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Une fois une premire installation ralise au complet, vous pourriez vouloir la recopier sur un autre serveur, par exemple pour le dploiement de votre serveur de test vers le serveur de production. Il suffit alors, aprs avoir prpar le serveur, dy copier lensemble des donnes dans une base de donnes sur le serveur en question (par exemple, en passant par les onglets Exporter et Importer de PhpMyAdmin), et dy copier aussi lensemble des fichiers. Enfin, il faudra aussi probablement modifier, sur le nouveau serveur, les paramtres de connexion la base de donnes, en fonction de la nouvelle base, dans le fichier app/etc/local.xml :
<?xml version="1.0"?> <!-- ... commentaire ... --> <config> <global> ... <default_setup> <connection> <!-- serveur de la base --> <host><![CDATA[]]></host> <!-- utilisateur --> <username><![CDATA[mag]]></username> <!-- mot de passe --> <password><![CDATA[mag18cbze]]></password> <!-- nom de la base --> <dbname><![CDATA[magento13]]></dbname> <active>1</active> </connection> ... </global> </config>

Les tches cron


T Cron

Cron est le nom dun programme de planification de tches informatiques pour les systmes Unix. Un cron associe une date, une heure et une priodicit, une application et des paramtres. Magento exige la mise en place dune tche cron, ou son quivalent sous Windows.

Les tches dites cron (appeles aussi tches planifies, sous Windows) sont les activits programmes par avance pour se raliser une heure prcise, rgulirement. Sans tches cron, le code sexcute uniquement lors de la rception dappels depuis les clients. Or certaines tches mritent dtre ralises rgulirement, mme en labsence de visiteur. Cest ce que nous allons mettre en place maintenant. Voici, pour les connaisseurs, lintitul exact du besoin : le script cron.php, la racine du rpertoire, doit tre appel toutes les quinze minutes. Lors des phases de dveloppement et de tests, il vous suffit simplement daccder ladresse de ce script, par exemple : http://www.rizdumonde.fr/cron.php.

48
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Mise en place dune tche cron sous Unix


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Sous les systmes de type Unix (Linux et Mac OS X compris), la mise en place dune fonctionnalit cron passe par la ralisation dun rpertoire de configuration appel crontab . Vous serez assists pour cela par le fichier cron.sh qui se trouve la racine du rpertoire. Chaque utilisateur a son propre crontab ; demandez-en ldition par la commande :
crontab -u user -e

CONSEIL Hbergement mutualis


sans tches cron
Si vous ntes pas administrateur du serveur (dans le cas dun hbergement mutualis, par exemple), vous bnficiez certainement tout de mme dun systme quivalent, permettant dappeler un fichier .sh (cron.sh la racine du rpertoire) ou une URL (par exemple http:// www.rizdumonde.fr/cron.php).

Le fichier ouvert alors (ventuellement vide) contient un paramtre indiquant ladresse e-mail pour lenvoi des rsultats, suivi de lignes ddies aux tches, chacune ayant ce format :
minute heure jour mois jourdelasemaine commande

Pour chacune de ces valeurs, indiquez un nombre, une toile signifiant tous et une toile suivie dun nombre signifiant tous les... . Voici un exemple de tche valide pour Magento :
*/15 * * * * /home/www/rizdumonde/cron.sh

SUIVRE... Paramtrage des tches cron


Les tches cron peuvent tre paramtres au moyen de diverses options dans le menu dadministration Avanc>Systme (voir la section Configuration avance dans le chapitre 5).

Ou, si lexcutable de PHP ne peut tre trouv :


*/15 * * * * wget -q http://www.rizdumonde.fr/cron.php

Mise en place dune tche planifie sous Windows


Sous Windows, vous pouvez crer une tche planifie qui appellera le script. 1 Crez, dans un rpertoire quelconque, un fichier texte batch (exemple magento.bat). Cest un fichier qui contiendra la srie dinstructions excuter. 2 Ouvrez ce fichier avec un diteur textuel, et indiquez ceci :
c:\abcd\php.exe -f "c:\efgh\cron.php"

Ici,

php.exe

et efgh sont bien sr respectivement les emplacements de et cron.php. 3 Lancez lutilitaire des tches planifies : Panneau de configuration>Tches planifies. 4 Demandez la cration dune nouvelle tche. 5 Trouvez, dans lassistant de cration, le fichier batch que vous venez de raliser, comme Programme excuter.
abcd

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

49

3 Installer et tester Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 317

Page principale des tches planifies

6 Compltez ensuite avec les autres paramtres, qui ne comportent pas

de difficults particulires (Tous les jours). 7 Une fois la tche cre, revenez dans ses proprits, et visualisez la planification avance, afin de Rpter la tche toutes les quinze minutes, pendant vingt-quatre heures.

Figure 318

Fentre de mise en place des pages

La tche sexcutera alors la rgularit prvue, tant que la machine est allume. 50
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

SAVOIR Faire appel un service tiers de cron


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Une solution supplmentaire est disponible : passer par un systme extrieur de cron. De nombreux services gratuits sont disponibles pour cela sur lInternet, par exemple : Bhttp://www.onlinecron.com Bhttp://cron-job.org Ladresse quil faut leur indiquer sera alors la mme que plus haut, de type http://www.rizdumonde.fr/cron.php. Notez tout de mme que cette solution est impossible si votre serveur est local et invisible de lextrieur (serveur de test).

Magento en franais
It does not work ?
Vous pouvez observer que, dans la partie du site rserve ladministration, les libells des options, ainsi que tous les autres textes, sont rests en anglais. Pourtant, tout en bas de la page, un menu droulant indique la langue choisie lors de linstallation, ici le franais de France.

Figure 319

En bas de la page, le choix de langue

Que sest-il pass ? En fait, comme il manque le module correspondant au franais, le choix de la langue a t ignor. Il va donc falloir tlcharger ce module (French Language Pack) partir du site de Magento. Ce processus dinstallation est dtaill dans la section Design et internationalisation du chapitre 10, mais nous en donnons dj une prsentation sommaire ici.

LINTRIEUR Les traductions dans Magento


Plutt que de raliser elle-mme des traductions, Varien a choisi, pour certaines langues, de dlguer ce travail des volontaires. Le rsultat est un succs, des dizaines de langues tant disponibles et jour. Mais comme ces traductions sont ralises a posteriori, elles ne sont pas disponibles dans linstallation standard ; cest pourquoi il nous faut les tlcharger aprs coup.

Rcuprer la cl dextension pour le French Language Pack


1 Sur le site officiel de Magento, rendez-vous sur Magento Connect et SUIVRE... Installation dun module
supplmentaire
Pas de panique si vous ne comprenez pas exactement tout ce dont on parle ici, les notions abordes sont dtailles dans le chapitre 11.

demandez les extensions (ou modules complmentaires) qui correspondent Languages/Locales. 2 Retrouvez French (France) Language Pack (pour le franais de France) dans la liste et cliquez sur Get extension key.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

51

3 Installer et tester Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 320

Lien vers les modules linguistiques sur Magento Connect

Figure 321

Demande de la cl dextension sur la fiche du module

3 Acceptez la licence propose (AFL, Academic Free License, une licence

trs libre), et copiez la cl propose. Cette cl se prsente sous la forme magento-community/Locale_Mage_community_fr_FR dans le cas du franais de France.

Figure 322

Acceptation de la licence la cl est affiche !

52
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Installer lextension
1 Rendez-vous dans votre section dadministration et, dans le menu,
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

choisissez System>Magento Connect>Magento Connect Manager.

Figure 323

Accs Magento Connect dans la partie dadministration

2 On vous demande ensuite une nouvelle authentification ; utilisez les

mmes nom dutilisateur et mot de passe que prcdemment. Vous arrivez alors dans un outil spcifique linstallation dextensions. Sur la page principale, indiquez la cl copie auparavant dans la case correspondant Paste extension key to install puis cliquez sur Install.

Figure 324

Installer lextension

3 Un cran ressemblant une console souvre et vous indique les tl-

chargements et installations raliss (si tout va bien). 4 Cliquez sur le bouton Refresh afin de revenir sur la page de prsentation. Lextension franaise doit cette fois apparatre dans la liste.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

53

3 Installer et tester Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 325

La console dinformation de linstallation de lextension

Figure 326

Lextension qui vient dtre installe apparat enfin dans la liste.

CONSEIL chec linstallation


Si jamais cette phase venait chouer, vous trouverez un forum de discussion ddi cette extension, au mme endroit que le lien de tlchargement, sur la fiche descriptive du module :
B http://www.magentocommerce.com/boards/

5 Cliquez sur le lien Return to Admin en haut, et constatez le change-

ment de langue sur linterface.

viewchild/10683/

Ajouter un premier produit dans la boutique


Terminons linstallation et la configuration par linsertion rapide dun premier produit sur votre site. Toute cette procdure est explique ensuite plus en dtail dans le chapitre 7, Mettre en place sa boutique . 1 Dans le menu de la partie rserve ladministration, choisissez Catalogue>Grer les catgories. La cration dune nouvelle catgorie est tout de suite propose ; indiquez un nom, rendez la catgorie active et cliquez sur Sauvegarder la catgorie en haut droite.

Figure 327

Crer une nouvelle catgorie

54
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

2 Enfin, gauche, ralisez un glisser-dposer de votre catgorie sur la

catgorie Default Category (catgorie par dfaut). Notre premire catgorie est cre.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

LINTRIEUR Interface ergonomique grce


Script.aculo.us
La fonctionnalit de glisser-dposer (drag&drop en anglais) est propose par la bibliothque JavaScript Script.aculo.us, installe avec Magento. Dautres lments agrables de la partie dadministration en sont issus.

Figure 328

Figure 329 La nouvelle catgorie, dsormais

Dplacer la nouvelle catgorie

lintrieur de la catgorie racine

3 Dans le menu de ladministration, choisissez Catalogue>Grer les pro-

duits, puis cliquez sur le bouton Ajouter un produit.

Figure 330

Le bouton dajout dun produit

4 Une premire page vous demande quelques informations prliminaires

pour les attributs, laissez pour le moment les valeurs par dfaut.

Figure 331

Premire page de cration du produit

5 Cliquez sur Continuer ; une page pour la saisie des donnes apparat.

La signification de tous ces attributs est aborde plus loin dans cet ouvrage. Pour le moment, entrez des informations quelconques pour Nom, Description, Description courte, Rf. (rfrence, cest--dire un numro quelconque), Poids (en kg) et Statut (activ ou dsactiv). 6 Ensuite, cliquez gauche sur Prix, et indiquez un prix et une classe de TVA : Taxable Goods. 7 Puis, cliquez gauche sur Inventaire et indiquez un stock de 100 et une disponibilit En stock.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

55

3 Installer et tester Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 332

Page principale de cration dun article

Figure 333

Onglet pour dterminer les prix de larticle

Figure 334

Onglet pour la gestion des stocks de larticle

56
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

8 Enfin, gauche, choisissez Catgories et cochez la case en face de

Default Category. Cliquez en haut sur Sauvegarder.


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 335

Catgories de larticle

Voil, vous avez cr un produit dans votre boutique ! Vous pouvez maintenant explorer linterface publique de votre site, laquelle est consacr le chapitre suivant.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

57

3 Installer et tester Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

user 177 at Thu Nov 11 07:36:42 +0100 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Visite guide des fonctionnalits offertes au visiteur

4
SOMMAIRE

B Visiter le site

Un site conu avec Magento permet vos internautes de raliser un grand nombre doprations, dautant plus lorsque ceux-ci deviennent clients... Petite visite guide des fonctionnalits offertes sur linterface publique dun site !

B Acheter B Contribuer
MOTS-CLS

B boutique B commande B compte B tag B wishlist

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Nous vous prsentons ici les manipulations possibles pour vos visiteurs et clients. Il est utile, en effet, que vous sachiez parfaitement quelles sont les capacits et les limites de linstallation dun produit aussi complet que Magento.

Visiter le site
CONSEIL Visitez, en profondeur
Vous devriez visiter et faire visiter votre site le plus possible. Cela vous permet non seulement de vrifier le rsultat de vos modifications, mais aussi de reprer les ventuelles anomalies et les difficults corriger ou compenser.

La partie publique dun site est ouverte et disponible ds linstallation. Elle ne contient alors aucun produit, aucune catgorie, aucune page... Mais linsertion du premier produit que nous venons de raliser permet dj de se comporter comme un visiteur et de faire ses courses. Rendez-vous sur la partie publique. Si vous y tiez dj, actualisez la page daccueil. En haut, une zone de recherche apparat, puis le menu. En dessous, dans un bandeau, les catgories principales. droite (et ventuellement, plus tard, gauche), apparaissent des botes de toutes sortes. Enfin, au centre, vous voyez le contenu principal de la page en cours de visite.

Figure 41 La page daccueil par dfaut

CULTURE Et dans les autres boutiques ?


Les boutiques en ligne peuvent tre trs diffrentes en ce qui concerne leurs organisation, graphisme, etc., mais les mcanismes principaux, comme la rpartition des produits par catgories, varient trs peu. Seuls quelques sites font exception, par exemple les boutiques de vente de billets davion. Pour elles, le dveloppement a t fait sur mesure.

Votre site, mme aprs modification du graphisme telle que propose au chapitre 10, aura toujours un principe dinterface utilisateur identique celui-ci. Il rpond, entre autres, aux critres dergonomie auxquels sattend probablement votre client, afin de ne pas se sentir perdu dans votre boutique.

Rechercher des produits


Le visiteur doit pouvoir trouver (et retrouver !) facilement les produits en vente. Pour cela, il peut utiliser le lien portant le nom de la rubrique, en

60
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

haut. Une page de rubrique est alors affiche, avec les diffrents produits disponibles, et leurs particularits. Il suffit ensuite de cliquer sur le nom du produit pour disposer de plus dinformations.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 42

Une page de rubrique : liste de produits

Le moteur de recherche (en haut) est efficace et prsente les rsultats organiss de faon identique aux catgories constitues. Une bote de dialogue Affiner la recherche est disponible, bien quinutile pour nous pour le moment (sa configuration est traite dans le chapitre 7).

Figure 43

Rsultats dune recherche

La prochaine recherche qui sera effectue bnficiera dune assistance. En pratique, si vous entrez le dbut dune recherche qui a dj t saisie au pralable (par nimporte quel visiteur, sur nimporte quel ordinateur), celle-ci sera propose automatiquement, comme sur lexemple de la figure 4-4. On voit quici, la recherche riz long a dj t faite, et quelle aura un rsultat.
Figure 44

Recherche assiste : un rsultat disponible

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

61

4 Visite guide des fonctionnalits offertes au visiteur

Magento

LINTRIEUR Un fil dAriane sans JavaScript


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Le fil dAriane (breadcrumbs, en anglais, en rfrence au Petit Poucet), appel parfois aussi chemin de navigation, est cet enchanement de liens en haut de page permettant au visiteur de toujours savoir o il se trouve dans larborescence dun site et de revenir en arrire. Par exemple : Accueil> Catalogue>Riz>Riz bio. Dans un site Magento, il ne contient pas de JavaScript, malgr ce principe de retour en arrire qui semblerait y convenir. Les auteurs du logiciel ont prfr mettre en place de vritables liens HTML, qui non seulement fonctionnent en permanence, mais favorisent aussi le rfrencement (sans compter laccessibilit, puisquils restent compatibles avec les navigateurs fonctionnant sans JavaScript).

Pour trouver dautres produits, le visiteur dispose du bandeau de menus, toujours prsent, qui permet de naviguer entre les diffrentes rubriques. De plus, un fil dAriane (breadcrumbs) permet chaque instant de revenir en arrire.
Figure 45

Le fil dAriane

Acheter
Le panier dachat
Linternaute est pouss lachat par de nombreux boutons Ajouter au panier, associs une quantit. Le panier regroupe tout ce que le client va acheter en une fois ; cest une mtaphore de marchs ou supermarchs.

LINTRIEUR Toujours le mme bouton


Si le bouton Ajouter au panier ou un autre bouton quivalent apparat sur de nombreux types de page, non seulement mne-t-il toujours au mme endroit, mais il fait aussi appel au mme code interne. Ainsi, nous sommes donc bien exactement face au mme comportement, quelle que soit la manipulation ralise par linternaute pour son achat.

Figure 46

La page de produit avec un bouton dajout au panier

tout instant avant davoir conclu son achat, lutilisateur peut retrouver son panier et le modifier : aprs chaque ajout dun produit ; en cliquant sur Mon panier, en haut de lcran.
SAVOIR Quelques absences de traduction
Leffort de traduction de Magento en franais est important, mais il ne couvre pas encore la totalit de lapplication. Les lments manquants seront faciles ajouter par vous-mme, comme cela est expliqu dans le chapitre 10, la section Design et internationalisation .

Le bouton Mettre jour le panier permet de modifier les quantits. Le gros bouton Proceed to Checkout (ne vous inquitez pas de la version anglaise pour le moment) mne au paiement. Vous pouvez tester lensemble du fonctionnement tel que prsent ici, car il ny aura pas de consquence sur vos finances relles.

Le processus de commande
Lachat est ralis en plusieurs phases distinctes, dont lordre ne peut varier. 62
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 47 Le panier dachat

1 La premire phase consiste en lidentification. Lachat peut se faire en

tant quutilisateur enregistr (nouveau ou ancien) ou anonyme. Choisissez de crer un nouveau client.

Figure 48

Premier volet : lidentification

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

63

4 Visite guide des fonctionnalits offertes au visiteur

Magento

2 Entrez des donnes quelconques dans les diffrents champs de la fac-

turation (ladresse par dfaut), et choisissez la livraison la mme adresse.


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 49

Deuxime volet : adresse de facturation

3 Un seul mode de livraison est disponible, acceptez-le. Bien sr, si

nous avions choisi une adresse de livraison diffrente de ladresse de facturation, elle nous aurait t demande juste avant, dans un troisime volet identique au second. Les modes de livraison disponibles dpendent du lieu de livraison.

Figure 410

Quatrime volet : le mode de livraison

4 Lors de ltape suivante, vous observez deux modes de paiement,

pour le moment. Payons par chque.


5 Nous pouvons dsormais valider la commande (Place Order). L

encore, ne vous inquitez pas de langlicisme.

64
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 411

Cinquime volet : choix du mode de paiement

Figure 412

Sixime volet : rsum de la commande

6 La page suivante est une page dinformation. Elle indique la possibi-

lit daccder la commande ralise, et annonce quun mail va tre envoy (si vous utilisez une installation locale, ceci chouera probablement).

Figure 413

La commande est termine !

Vous pouvez tester la robustesse du processus en actualisant votre navigateur (F5). Vous observez alors que contrairement ce que vous auriez pu redouter, il ne passe pas une seconde commande la catastrophe est vite !

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

65

4 Visite guide des fonctionnalits offertes au visiteur

Magento

Le compte de lutilisateur
CULTURE Acheter sans compte ?
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Pour des raisons de simplicit, certaines boutiques conues sans Magento ne proposent pas de compte pour les acheteurs. Cela oblige alors les clients entrer de nouveau chaque fois leurs adresses, et ne leur permet gnralement pas de consulter ltat de leurs commandes. Nul doute que la possibilit de senregistrer saura sduire et fidliser vos acheteurs !

Comme nous venons de crer un nouveau compte client en commandant, nous pouvons ds lors visiter les pages ddies ce compte. Il suffit pour cela de cliquer sur Mon compte, en haut de la page. Le tableau de bord est indicatif et comprhensible. Il permet de nombreuses actions en correspondance avec les commandes et leur volution.

Figure 414

Le tableau de bord de lutilisateur

LINTRIEUR Partage dadresse


Lagencement des donnes de Magento ne propose pas le partage par plusieurs clients dune mme adresse. Toutefois, ce nest pas interdit non plus, et seul le nom dutilisateur ne peut pas tre commun plusieurs de vos clients.

Un utilisateur peut avoir plusieurs adresses. Celles-ci peuvent tre cres chaque commande ou tre inscrites dans le carnet dadresses, afin dtre utilises comme adresses de facturation ou livraison.

Figure 415

Le carnet dadresses de lutilisateur

T Cookie

Le cookie est une petite information, invisible pour lutilisateur, envoye par un serveur web un client, et renvoye ensuite systmatiquement au serveur par ce client, afin de diffrencier les donnes de chaque utilisateur. Figure 416

Sil le dsire, lutilisateur peut se dconnecter. Sinon, sa session est maintenue par un cookie, qui reste en place jusqu la fermeture du navigateur.

Le lien de dconnexion

66
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Contribuer
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

En plus de consulter les pages et dacheter des produits en ligne, le visiteur, et potentiellement futur client peut avoir une relle interaction avec le site. Ceci aura pour effet bnfique de : crer une communaut autour du site ; renforcer limplication du client ; permettre damliorer le site ; vous apporter des informations marketing. Les grands sites de vente ont mis en place et valu depuis longtemps ces fonctionnalits supplmentaires, et nhsitent pas multiplier des accessoires pour les mettre en avant, preuve de leur relle valeur ajoute !

Associer des tags aux produits


Chaque produit peut tre associ un ou plusieurs tags (tiquettes, mots-cls). Chaque tag peut tre associ un ou plusieurs articles. Le visiteur est invit proposer des tags pour chaque article, qui sont bien sr soumis validation de ladministrateur.
T Tag

Figure 417

Ajouter des tags

Une fois un certain nombre de tags attribus, un nuage de tags saffichera sur certaines pages publiques, les tags prpondrants tant mis en valeur en fonction de leur importance. Cela offre lavantage de proposer une navigation plus intuitive, transversale aux catgories.

Tag, en anglais, signifie balise. Cest un lment permettant lajout dinformations de contenu ou de mise en forme dans un texte, en HTML, par exemple, mais dans le monde du Web interactif, cela dsigne aussi un mot-cl associ un article, une photo, une vido ou un produit par les clients. Cela permet ensuite notamment damliorer la recherche vers ces lments. Vous retrouvez ces tags notamment sur les blogs et sur les sites communautaires comme YouTube, Flickr, etc. Souvent, les tags sont regroups en nuage de tags (tag cloud), cest--dire une reprsentation graphique dun ensemble de tags qui rend visible la prpondrance de certains tags sur les autres.

Figure 418

Le nuage de tags

Crer son catalogue personnel : la wishlist ou liste denvies


La wishlist, littralement liste denvies , est une liste de produits associe un utilisateur et qui lui est propre. Il sagit de produits quil souhaiterait et pourrait acheter potentiellement, chaque produit tant associ
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

67

4 Visite guide des fonctionnalits offertes au visiteur

Magento

un commentaire optionnel. Cela lui permet en quelque sorte de se constituer un catalogue personnalis ou de constituer une liste de mariage, de cadeaux, etc.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Sur une page produit, il est possible de demander Ajouter la liste denvies. La liste apparat alors, comme sur la figure ci-aprs. Le bouton Partager la liste denvies permet denvoyer cette liste dautres personnes, par e-mail, tandis que le bouton Tout ajouter au panier ajoute en une seule fois tout le contenu de la wishlist au panier. Enfin, notez quaprs modification des commentaires, il faut cliquer sur le bouton Mettre jour pour quils soient pris en compte.

Figure 419

La liste denvies dun visiteur

Comparer les produits entre eux


Lutilisateur peut comparer les produits suivant leurs diffrentes caractristiques. Il faut pour cela tout dabord ajouter des produits au comparateur. Pour comparer ensuite tous les articles ainsi ajouts, utilisez le bouton Comparer les articles apparaissant droite.

Figure 420

Le bouton pour comparer les produits

Une page prte limpression souvre alors, proposant une comparaison de certains attributs (nom, description, prix...), comme sur la figure ci-aprs. 68
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 421

Le lien dajout pour la comparaison

Figure 422

Le rsultat dune comparaison

Enfin, signalons une dernire interaction possible entre le client et le site : le contact direct, en passant par un formulaire trs simple de mise en contact (page Contactez-nous), dont la mise en place est prsente dans Les options du menu Gnral du prochain chapitre.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

69

4 Visite guide des fonctionnalits offertes au visiteur

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

user 177 at Thu Nov 11 07:36:42 +0100 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Administrer le site

5
SOMMAIRE

B Connexion linterface

tape indispensable avant de mettre en vente tous vos produits, dentrer vos donnes, prparons le site en configurant toutes les options ncessaires et assurons-nous que nous pourrons y travailler sereinement.

dadministration

B Messages et gabarits B Interface standard B Cration et configuration


des magasins

B Configuration gnrale
du logiciel

B Gestion de lquipe
MOTS-CLS

B administrateur B e-mail B gabarit B magasin B vue magasin B cache B utilisateur B rle

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Le terme administrer est considr ici dans son sens le plus gnral. Il sagit de toutes les tches que lon peut raliser dans la partie prive du site, quon appelle linterface dadministration. Si les chapitres qui suivent sintressent tous ces diffrents points, celui-ci prsente les aspects les plus gnraux de cette administration.

Connexion linterface dadministration


Laccs ladministration du site exige votre authentification. Chaque utilisateur est identifi par un nom et un mot de passe, dfinis lors de la cration de cet utilisateur lors de linstallation de Magento (voir la section Phases dinstallation du chapitre 3).

Figure 51

Connexion la partie dadministration

Vous avez (dj) oubli votre mot de passe ? condition davoir un systme de courriel en place (voir la section Configuration avance )., vous pouvez demander la rcupration de votre mot de passe grce au lien Mot de passe oubli ?. Attention, au bout de cinq essais, le compte administrateur est dsactiv.

Figure 52

Formulaire pour la rception du mot de passe

Entrez alors ladresse e-mail que connat cette installation de Magento (celle qui a t indique lors de la cration de cet utilisateur), sachant que :

72
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

1 Il ne peut y avoir deux utilisateurs enregistrs pour la partie dadmi-

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

nistration avec la mme adresse e-mail. 2 Si vous ne vous souvenez plus de ladresse indique, vous pouvez : essayer toutes celles qui vous semblent justes ; demander un autre utilisateur inscrit quil se connecte et vous dise quelle adresse e-mail vous correspond (menu Systme>Permissions>Utilisateurs), puis utiliser ce formulaire avec celle-ci. Les deux formulaires qui prcdent ne concernent que les utilisateurs ayant accs linterface dadministration du site, cest--dire les administrateurs et leurs dlgus ne pas confondre avec les clients, visiteurs du site public, pour lesquels ces formulaires seront sans effet. Une fois connect, le tableau de bord vous accueille. ventuellement, un message apparatra lors de votre connexion (voir la section suivante).

Figure 53 Le tableau de bord laccueil de linterface dadministration

Figure 54 Un message dinformation dimportance mineure vous accueille

Vous pourrez vous dconnecter plus tard grce au lien Dconnexion en haut droite.

CONSEIL Dconnexion et scurit


Si vous vous absentez de votre poste de travail, la dconnexion ne se fera pas toute seule. Par contre, elle aura lieu si vous fermez le navigateur.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

73

5 Administrer le site

Magento

Les diffrents types de messages


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les messages publics mis par Magento


CONSEIL Messages de mises jour
La majorit des messages concernent les mises jour de Magento. Appliquez ces mises jour seulement si leur descriptif indique des volutions qui vous intressent. La faon dappliquer ces mises jour est variable, consultez l-aussi le descriptif.

Le logiciel Magento install chez vous se connecte rgulirement, autant que possible, au site officiel, afin de rcuprer les messages gnraux issus par ce site. La frquence de rcupration de ces messages est paramtrable via le menu de configuration Avanc>Systme (voir la section Configuration avance un peu plus loin). Aprs leur tlchargement, les messages sont affichs destination de ladministrateur. Afin den obtenir la liste, cliquez sur Go to messages inbox en haut droite ( remarquer que quelques messages et informations ne sont quelques fois pas traduits, volontairement ou non). La liste des messages est une bote de rception minimaliste, les messages utilisant un format propre Magento. Il ne sagit en aucun cas de courriels et il ny a pas denvoi possible. Chaque message contient : un objet, un degr dimportance (majeur, mineur, annonce), une date et un lien. Ce lien permet de lire le message sur le site officiel (Lire le dtail). Vous pouvez Marquer comme lu le message afin quil napparaisse plus chaque connexion, ou mme le supprimer. La coloration est diffrente suivant ltat du message, voici le mme exemple, une fois le second message marqu comme lu :

Figure 55 Messages dans la bote de rception, en tat lu et non lu

La gnration automatique de courriels


Magento est bien sr en mesure de gnrer des e-mails. Lors de certains vnements, il peut en envoyer aux administrateurs comme aux clients. Pour cela, deux conditions sont ncessaires :

74
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Magento doit avoir t configur correctement (voir la section Con-

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

figuration avance de ce mme chapitre) ; le systme sous-jacent doit tre capable denvoyer des e-mails (cela implique, sous Windows, que le serveur SMTP soit disponible, et sous les systmes de type Unix, que Sendmail ou Postfix fonctionnent). Attention, lchec denvoi de courriel sera gnralement silencieux. Par ailleurs, des adresses e-mail sont indiques pour la boutique ellemme. Elles ne sont pas utilises pour lenvoi, puisquil sagit dun systme denvoi automatique, mais seulement comme information pour celui qui reoit le message (adresse de rponse). Par exemple, ladresse du Reprsentant des ventes est indique comme metteur pour le-mail de confirmation de commande au client. Ainsi, lorsque le client recevra ce courriel, sil clique sur le bouton Rpondre de son logiciel, ladresse du destinataire sera automatiquement celle-ci. Pour paramtrer les adresses e-mail dun magasin, le menu Gnral>Adresses mail du magasin (voir plus loin la Configuration gnrale ) permet dindiquer un nom (Nom de lexpditeur) et une adresse e-mail (Mail de lexpditeur), qui seront utiliss sous cette forme lors de lenvoi automatique de courriels vers les clients ou les administrateurs.
from: nom <nom@example.org>

Les gabarits de courriels


Les gabarits par dfaut
La plupart des courriels envoys automatiquement sont mis en forme selon des gabarits prdfinis qui sont prsents la section Modifier les gabarits du chapitre 10. Cela signifie que les donnes spcifiques sont crites dans un modle, et que lensemble forme le sujet et le texte de lemail. Par exemple, lorsquun client signale un produit un ami, un gabarit de courriel lui est spcialement propos.
CONSEIL Vrifier les gabarits par dfaut
Vous pouvez gagner du temps en conservant les gabarits par dfaut, mais il est prfrable de les vrifier, car certains dentre eux contiennent des donnes de test (noms de socit, coordonnes...), en particulier dans les versions antrieures Magento 1.4.

Personnaliser les gabarits


Pour certains traitements, ladministrateur peut directement raliser des gabarits, en utilisant une syntaxe identique celle des blocs statiques (voir la deuxime partie du chapitre 6 Publier sur le site ), cest--dire un mlange de HTML et de balises spciales. Ces gabarits peuvent tre crs et modifis dans linterface dadministration, via le menu Systme> E-mails transactionnels.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

75

5 Administrer le site

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 56 Liste des gabarits des e-mails transactionnels

La liste contient au dpart un gabarit par dfaut (pour que le client puisse signaler un produit un ami (Send product to a friend). Il est possible de modifier un gabarit en cliquant dessus, ou de crer des gabarits supplmentaires avec le bouton Nouveau gabarit. Il est alors possible de prendre pour point de dpart un gabarit standard, issu des modles (templates). Ensuite, pour crer le vtre, choisissez un nom. Le sujet et le contenu sont les lments qui apparatront dans les courriels construits partir de ce gabarit. Il utilisent la syntaxe des blocs statiques mentionne prcdemment.

Figure 57 Formulaire de choix dun gabarit standard

Figure 58 La cration du gabarit

Le gabarit ainsi cr pourra tre indiqu dans certains paramtres de la configuration standard, voir la section Configuration gnrale plus loin dans ce chapitre. 76
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Prsentation de linterface standard


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Len-tte et le menu
Une fois connect en tant quadministrateur, un grand nombre de pages sont votre disposition (le tableau de bord, les panneaux de vente, les pages de configuration, etc.). Chaque page a sa propre adresse (contenant ventuellement une cl, voir la section Configuration avance plus loin dans ce chapitre), nhsitez donc pas crer des marques-pages dans votre navigateur pour les espaces qui vous sont le plus utiles.

Figure 59 En-tte de linterface dadministration

En haut de la page vous disposez dans lordre des lments suivants : un logo, qui est un lien vers laccueil (le tableau de bord) ; un champ de recherche qui peut vous amener, selon le ou les mots de votre requte, vers un espace de donnes particulier (produit, rubrique, client) ; un indicateur de lutilisateur en cours (ici admin) ; la date du jour ; un lien pour se dconnecter ; le menu droulant ( JavaScript est indispensable) ;

Figure 510 Message saffichant lorsque JavaScript ne permet pas laffichage du menu droulant

un lien vers une page de documentation associe la page en cours

SAVOIR Une documentation incomplte


Gnralement, la documentation associe aux pages nexiste pas encore ; vous obtiendrez alors un message tel que Youve followed a link to a topic that doesnt exist yet.

(Obtenir de laide pour cette page) ; une barre pour les messages divers.

Le pied-de-page
En bas de la page, vous trouvez dautres liens et informations permanents : un lien vers le systme de gestion des bogues ; sil vous semble avoir trouv un bogue, la dmarche est simple : 1. cliquez sur ce lien qui vous dirige sur le site officiel ;
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

77

5 Administrer le site

Magento

2. vrifiez, via le moteur de recherche, que ce bogue na pas t dj

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

signal ; 3. si ce nest pas le cas, crez un nouveau rapport de bogue (il faut alors tre authentifi sur le site officiel), en anglais.

Figure 511 Le pied-de-page de la partie dadministration

Figure 512

Les bogues sur le site officiel

le numro de version de Magento ; un lien vers le site officiel ; une information lgale.

Les listes
Linterface dadministration se prsente le plus souvent sous forme de listes, dont la prsentation varie peu. La figure ci-aprs montre une liste reprsentative, la liste des produits (menu Catalogue>Grer les produits). Voici quoi correspondent les diffrentes zones de cette liste : le type des lments de la liste (autrement dit, le titre) ; le bouton pour ajouter des lments ; la pagination, dans le cas o ces lments sont nombreux (aller de 20 en 20, de 50 en 50...) ; un bouton de recherche, en fonction des critres dfinis dans le champ ;

78
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 513 Une page reprsentative des listes, la liste des articles

des actions, ayant un effet sur les lments slectionns via la case cocher ; les critres de recherche ou attributs : indiquez ici des filtres ou autres

paramtres utiles, tels que le type de produit ou une fourchette de prix, sur lesquels pourront porter une recherche ; les lments slectionns pour laction . Parmi les enregistrements, cochez la case de ceux sur lesquels vous souhaitez exercer une action, puis utilisez la liste droulante afin de choisir une action qui sappliquera tous les lments cochs ; sur tout le reste de la ligne, les informations, le rsultat de la recherche ; les actions disponibles pour chaque enregistrement. Ce systme de listes permet donc dafficher les enregistrements, suivant ventuellement un tri ou un filtrage, et de raliser des actions sur ces enregistrements.

ASTUCE Trier les lments des listes


Les en-ttes de chacune des colonnes permettent dordonner les enregistrements de la liste selon le contenu de chacune de ces colonnes : cliquez sur un en-tte pour trier les lments (par exemple, cliquer sur Prix aura pour effet dordonner la liste dans lordre croissant ou dcroissant des prix des produits).

Les formulaires
Lorsque vous crez ou modifiez un enregistrement dune liste, un formulaire apparat. Les formulaires sont spcifiques chaque type denregistrement. Deux mcanismes sont notables dans cette interface, comme nous pouvons le voir dans ce formulaire de cration dun produit. Lorsque vous atteignez un formulaire de taille importante et que vous faites dfiler la page vers le bas, un bandeau translucide jaune apparat afin de vous donner accs facilement en permanence aux boutons essentiels (Enregistrer, Annuler...).
LINTRIEUR Des formulaires web
Les formulaires web sont envoys en une seule fois sur le poste client. Cela peut donc tre long et, en cas dchec, il est possible de les renvoyer avec le bouton Actualiser du navigateur (ou F5).

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

79

5 Administrer le site

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 514 Bandeau jaune pour rinitialiser depuis nimporte o

Si le formulaire est encore plus long, il sera alors dcoup en plusieurs

sections, accessibles par des onglets ; cela vite de se retrouver face une page trop longue et difficilement navigable. Ceci est ralis uniquement en JavaScript, cest--dire que le dcoupage de la page en onglets successifs est seulement un artifice daffichage : les onglets peuvent tre complts dans nimporte quel ordre, et linformation de lensemble ne sera enregistre que lors du clic sur le bouton orange Sauvegarder.

Figure 515

Nombreux onglets pour morceler la cration des articles

Cration et configuration des magasins


Avec une seule installation de Magento, il est possible dtablir toute une hirarchie pour vos espaces de vente en ligne : pour une installation, un certain nombre de sites web ; pour chacun de ces sites, un certain nombre de magasins ; pour chacun de ces magasins, un certain nombre de vues magasin. Un site web correspond par exemple un nom de domaine, ce qui est significatif pour la fragmentation de votre activit de e-commerce (deux sites web signifient gnralement deux boutiques). Avoir plusieurs sites web pour une mme installation permet dadministrer tous ces sites en mme temps. Chaque site web peut avoir son propre paramtrage. 80
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Chaque site web est associ un magasin par dfaut, mais il pourra contenir dautres magasins. Chaque magasin est reli a une catgorie racine de produits. Cela signifie que deux magasins peuvent prsenter exactement les mmes produits, ne variant que dans la faon dont ils sont prsents, par exemple par leurs couleurs dominantes ou les polices de caractres utilises, ou bien, et cest leur raison d'tre, des listes de produits diffrentes. Chaque vue magasin correspond un affichage particulier dun certain magasin, dans une certaine langue, par exemple, si votre boutique est multilingue. Les URL permettent daccder exactement la vue magasin (et donc aussi au magasin, au site et linstallation) de son choix. Les figures 5-16 et 5-17 prsentent deux exemples dutilisation de ces mcanismes, du plus simple (un site web, un magasin, une vue magasin) une organisation plus complexe (un site web, deux magasins et trois vues magasin).
ASTUCE Plusieurs installations de Magento
une seule installation correspond un rpertoire physique et une base de donnes. Vous pouvez donc tout fait crer plusieurs installations sur un mme serveur (chacune avec un rpertoire et une base), indpendantes les unes des autres. Cela nest pas abord plus loin dans cet ouvrage, mais cela implique la multiplication de chacune des tches en fonction du nombre dinstallations : il faut toutes les mettre jour, les extensions de chacune peuvent diffrer, il faut se connecter chacune, etc.

Figure 516

Au plus simple : un site web, un magasin, une vue magasin

Figure 517

Plus complexe : pour un site web, deux magasins et trois vues magasin

Configuration des magasins et des diffrentes vues


La modification de votre installation est disponible la page Systme>Grer les magasins. Comme vous le constatez, il y a par dfaut, pour votre installation, un site web (Main Website), un magasin (Main Website Store) et une vue magasin (Default Store View). Vous avez la possibilit de crer de nouveaux sites web, magasins et vues magasins. Dans cet exemple, nous allons crer un second magasin, en plus du premier laide duquel nous vendons du riz, pour la vente de livres de recettes raliser avec notre riz. De plus, le site principal sera disponible en une version franaise et une anglaise.
CONSEIL Prparez bien cette configuration
Bien que ces paramtres, comme tous ceux qui suivent, pourront tre modifis librement plus tard, les choix qui suivent sont trs importants, et auront un fort impact sur la suite. Assurez-vous davoir bien compris le chapitre prcdent avant de mettre en place votre ou vos magasins.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

81

5 Administrer le site

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 518 Installation par dfaut des niveaux des magasins

1 Modifions tout dabord les lments existants, commencer par le

magasin par dfaut, pour le nommer Magasin principal. Il suffit de cliquer sur celui-ci, et de changer le nom (le bouton denregistrement est, comme toujours, en haut droite).

Figure 519

Cration dun magasin

2 Ensuite, changeons de manire identique le nom de la vue, afin de

lintituler Franais. Afin de les distinguer, les vues ont aussi un code, mais laissons default pour celle-ci.

Figure 520

Cration dune vue magasin

3 Crons maintenant la vue en anglais. Aprs un clic sur le bouton

Crer une vue magasin, choisissons le Magasin principal, un nom et un code quelconque, activons-la et indiquons 10 pour lordre de tri. (Pourquoi 10, vous demanderez-vous, et pourquoi pas 1, puisque lautre valait 0 ? Parce que nous pourrions plus tard avoir envie dinsrer une nouvelle vue entre les deux.)

82
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 521

Cration dune nouvelle vue magasin, en anglais

Le rsultat peut tout de suite tre observ dans la partie publique du site. Une liste droulante y est apparue, via laquelle vous pouvez choisir Votre langue. Comme souvent, cet affichage sous forme de liste droulante en haut dpend des choix effectus lors de la cration des thmes (voir chapitre 10).

SAVOIR Les vues magasin proposes


par la liste Votre langue
Il est suppos, avec le thme graphique par dfaut, que les vues magasin correspondent diffrentes langues, ce qui est effectivement le cas le plus courant.

Figure 522

Menu droulant du choix de la langue

Changeons de vue au moyen de cette liste droulante. LURL devient alors : http://127.0.0.1/magento1.3/riz-simples.html?___store=en&___from_store=default. On y retrouve le code de vue magasin choisi auparavant, ici en . Le choix linguistique que nous venons de faire sera conserv pour laccs aux pages suivantes, jusqu ce que le client revienne ventuellement volontairement la vue en franais. Lassociation de cette vue en anglais laffichage des textes dans cette langue se fera un autre emplacement de la configuration, voir la section Options gnrales de la configuration gnrale.

Crer un magasin supplmentaire


La configuration dun magasin supplmentaire nest pas plus difficile. Il sagit tout dabord de crer ce nouveau magasin. Cliquez sur Crer un magasin, indiquez ensuite un Nom et, pour la Catgorie racine, Default Category (la catgorie de produit qui existe dj).

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

83

5 Administrer le site

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 523

Formulaire pour la cration dun nouveau magasin

Il faut bien sr crer une vue associe. La manipulation est identique celle ralise dans la section prcdente.

Figure 524

Nouvelle vue dans le magasin qui vient dtre cr

LINTRIEUR Le stockage des hirarchies


Les modifications que nous venons deffectuer nont aucun impact sur linstallation relle dans le rpertoire sur le disque dur. Cest bien la base de donnes qui enregistre tous ces paramtres.

Voil, notre site est complet ! En bas des pages (du thme graphique par dfaut), nous trouvons maintenant une liste droulante pour choisir le magasin. Il sera possible plus tard dajouter ou de modifier cette hirarchie librement, au fur et mesure de lvolution de notre activit.

Figure 525 La liste complte : trois vues dans deux magasins

Figure 526

Le visiteur peut changer de magasin au moyen dune liste droulante, sil y en a plusieurs.

84
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Configuration gnrale de Magento


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Il est temps daborder maintenant la configuration complte de Magento. Si vous prfrez tout de suite tester les fonctionnalits principales de Magento, vous pouvez ds lors passer aux chapitres suivants et revenir ensuite pisodiquement cette configuration, aux moments o vous en avez besoin.

Les zones de configuration du systme


La configuration de Magento est un petit peu ardue. Distinguons deux parties : les donnes courantes (utilisateurs, clients, magasins, produits...) ; la configuration indiquant le fonctionnement de Magento. Tout ce qui concerne le fonctionnement du logiciel peut tre modifi via le menu Systme. Il sagit en fait de lensemble des paramtres et donnes que lon modifie rarement. Cet ouvrage vous prsentera toutes les possibilits de ce menu, que ce soit dans cette section ou par la suite, dans les chapitres 8 et 9 (livraison, paiement, services web) ; nous y avons dj vu Grer les magasins. Attachons-nous maintenant au contenu de Systme>Configuration. Il sagit des paramtres techniques de notre installation.

Fonctionnement gnral du paramtrage


La liste droulante qui se trouve en haut gauche permet de choisir la porte des paramtres que lon se propose de modifier. Il peut sagir de toute linstallation (Configuration par dfaut), dun site web en particulier ou dune vue particulire. Cela signifie, dans notre cas, quun paramtre pourrait avoir une certaine valeur (1, par exemple) partout, exception faite de la vue English du Magasin principal dont la valeur serait 2. Certains paramtres ne sont configurables que pour le niveau vue , dautres uniquement pour le niveau magasin .
SAVOIR Comment les magasins
se distinguent-ils ?
Notez bien que deux magasins ne peuvent pas se distinguer par leurs paramtres, ce nest pas leur fonction. Les diffrences principales entre deux magasins concernent essentiellement la constitution de catgories racines de produits. Ensuite, partir de chacun des magasins, on pourra crer des vues diffrentes.

Figure 527

Liste droulante des configurations et vues

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

85

5 Administrer le site

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Rendons-nous dans la configuration de la vue English. On y observe cet hritage entre installation, site et vue magasin : des botes cocher (coches par dfaut), nous indiquent que la valeur pour cette vue est la mme que la valeur du niveau du dessus. Dans notre cas, dans la catgorie Gnral>Gnral>Options de locale, nous dcochons la case Utiliser le site web afin de passer en anglais du Royaume-Uni.
Figure 528

Dans la vue magasin English uniquement,rglage des paramtres locaux

CONSEIL vitez le sur-mesure


Autant que possible, utilisez le niveau Configuration par dfaut pour les paramtres, profitant ainsi du systme dhritage. Il est en effet difficile de maintenir des paramtres mis en place dans les niveaux infrieurs sans risque de se perdre inutilement...

Les paramtres de configuration sont rpartis par catgories et souscatgories, comme vous le voyez dans la colonne de gauche. Attention, contrairement au formulaire voqu prcdemment, ces catgories ne sont pas des onglets dun mme menu, il faut donc bien penser sauvegarder les modifications avant de changer de catgorie de paramtres. Par contre, dans une sous-catgorie, constituant une page de paramtres, les sous-sous-catgories (par exemple Options de pays dans Gnral> Gnral) sont toutes enregistres en mme temps.

Figure 529

Rpartition de paramtres nombreux, par catgories

Les diffrentes catgories et leurs paramtres essentiels sont prsents dans les pages qui suivent. Vous pourrez ainsi dterminer en consquence si vous les modifiez, et quel niveau. Pour certains paramtres dont la description est traite en contexte plus loin dans cet ouvrage, la rfrence du chapitre concern est alors indique dans un apart de type suivre... .

86
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Les options du menu Gnral


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Options gnrales (menu Gnral>Gnral)


Le Pays par dfaut est le pays indiqu par dfaut lors de lachat, pour les adresses des clients. Autoriser les pays permet dinterdire, lors de lentre de ladresse de facturation, certaines provenances. Profil local indique la langue utilise, tandis que Premier jour de la semaine et Jours de weekend sont des informations pouvant tre utilises dans les tats gnrs, par exemple (voir la section Mieux connatre votre clientle : utiliser les rapports au chapitre 9).

Options Web
Dans le menu Gnral>Web, Utiliser les rcritures du serveur web permet de profiter de la rcriture dURL (URL Rewriting), aborde dans les chapitres 3 et 8, afin dviter les URL inintelligibles. Les paramtres Non scuris et Scuris correspondent respectivement aux accs en HTTP et HTTPS. Paramtrage des URL Pour chacun, lURL de base indique la faon daccder au site. Cest partir de lURL de base que sont formes les autres URL, do lemploi de {{unsecure_base_url}} et {{secure_base_url}} dans tous les champs suivants, qui vous vite de les rcrire chaque fois. En cas de changement de nom de domaine, vous devez modifier la base de ces URL (premier champ), mais les extensions dfinies ici pourront rester les mmes. LURL de base lien est ladresse de base pour les liens hypertextes sur les pages, dans le menu. LURL de base habillage est ladresse de base pour les fichiers CSS. LURL de base Media est ladresse de base pour les images. LURL de base JavaScript est ladresse de base pour les fichiers JavaScript. LURL Web par dfaut correspond celle qui est saisie dans le navigateur lorsque le visiteur nindique que le nom de domaine (http:// www.rizdumonde.fr) ; cest lURL de la page daccueil. Paramtrage du systme de gestion de contenu (CMS) Certaines URL correspondent un sous-ensemble du site cr par Magento, le CMS. Il sagit des pages statiques de contenu (voir la premire section du chapitre 6 Publier sur le site ).

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

87

5 Administrer le site

Magento

Si lutilisateur entre la valeur indique dans loption URL web par defaut, loption Page daccueil CMS indique quelle page est alors affiche.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

RAPPEL Fil dAriane


Le fil dAriane, appel breadcrumb en anglais, et parfois chemin de navigation, est cet enchanement de liens indiqu en haut de page permettant lutilisateur de savoir exactement o il se trouve dans larchitecture du site (niveau et page). Par exemple : Accueil>Catalogue>Riz>Riz bio.

Lorsque linternaute tente daccder une page qui nexiste pas, via un lien erron ou une erreur de saisie dans la barre dadresses, par exemple, cest lURL non trouve par dfaut qui est utilise, et le contenu de la page indique par Page non trouve CMS est utilis. Si les cookies ne sont pas activs, une page Page pas de Cookies CMS est appele. Enfin, vous pouvez choisir dafficher ou non le Fil dAriane dans les pages du CMS. Paramtrage des cookies Le cookie de session est celui qui maintient, sur les parties publiques comme prives, lutilisateur connect. Il est possible de modifier le Domaine du cookie, afin de partager des cookies avec un site dun autre domaine, mais surtout le Chemin du cookie si sur le mme site plusieurs applications les utilisent. Plusieurs choix sont galement proposs au sujet de la Dure de vie des cookies (en secondes) avant disparition, ainsi que la tentative ou non de les transporter en HTTPS plutt que dUtiliser uniquement le HTTP. Ne modifiez pas ces informations si seul Magento est install sur votre site.

SAVOIR Le vol de cookies


Des attaques par vol de cookies sont rares et difficiles sur un site tel que Magento, vous ne devriez pas modifier les paramtres par dfaut.

Afin dviter les consquences dun vol didentit par un vol de cookie de session, il est possible de demander une nouvelle authentification dans le cas o lutilisateur dun cookie de session change dadresse IP (REMOTE_ADDR), de navigateur (HTTP_USER_AGENT) ou que le chemin des paquets envoys est dvi par un proxy (HTTP_VIA, HTTP_X_FORWARDED_FOR). Si les cookies ou le JavaScript sont dsactivs, il est bon ventuellement dafficher une page particulire du CMS (Rediriger vers la page CMS si les cookies sont dsactivs) ou un bandeau (Afficher une notification si JavaScript est dsactiv). Enfin, une option permet, dans les sondages (voir le chapitre 6 section Administrer les sondages ), dInterdire les votes depuis une mme adresse IP, plutt que de faire confiance aux cookies. Ceux-ci peuvent en effet tre supprims, afin dviter quun mme visiteur vote plusieurs fois.

SUIVRE... Paramtrage du design et des devises


Les options des menus Gnral>Paramtrage des devises et Gnral>Design sont traites respectivement dans les chapitres 8 Grer les ventes et 10 Personnaliser lapparence de sa boutique .

Paramtrer la page Contactez-nous


RAPPEL Paramtrage des adresses e-mail du magasin
Les options du menu Gnral>Adresses mail du magasin ont t vues dans la premire section de ce chapitre, consacre la gnration automatique de-mails.

Dans le menu Gnral>Contact, Activer la page Contactez-nous permet de bnficier dune page avec un formulaire classique de mise en contact. Sur le site public, le lien vers cette page se trouve en bas des pages du thme par dfaut. Lorsquun visiteur aura valid le contenu du formulaire, le systme va alors Envoyer les mails ladresse indique dans ce champ, en utilisant un
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

88

Expditeur du mail et un Gabarit du mail tels que spcifis lors de la configuration (voir la section Les gabarits de courriels plus haut dans ce chapitre pour crer un gabarit diffrent).
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

SAVOIR Une seule page de contact ?


Il ny a quune seule page de contact pour lensemble dune installation de Magento, avec des champs prdfinis. Ceci est une limitation, qui pourrait tre dpasse au moyen dextensions.

Figure 530

Le formulaire de contact

Option denvoi un ami


Un site conu avec Magento permet au visiteur denvoyer la description dun produit vers ladresse e-mail dun ami. Vous pouvez activer ou non cette fonctionnalit via le menu Gnral>Envoi un ami. Lusage de cette fonction peut galement tre limit afin dviter les abus ; par exemple, il est conseill de ne pas lAutoriser pour les invits, cest--dire que seuls les utilisateurs inscrits pourront en profiter.

Les options du menu Catalogue


Le menu Catalogue est destin paramtrer tout ce qui concerne le catalogue de vos produits vendus en ligne, que ce soit son organisation, son apparence, la recherche, la navigation, etc. (voir ce sujet le chapitre 7 Mettre en place sa boutique ).

Options gnrales
Le menu Catalogue>Catalogue propose des paramtres de configuration assez disparates, touchant tout aussi bien la prsentation du catalogue et sa structure qu la recherche ou lautorisation ou non des commentaires.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

89

5 Administrer le site

Magento

Autoriser les commentaires Vous tre libre dautoriser ou non les invits crire des commentaires sur vos articles. Dsactiver les commentaires ne supprime pas pour autant la fonction. Vous pouvez tout moment les ractiver via ce mme menu. Affichage en mode liste ou grille Il est possible pour ladministrateur de paramtrer laffichage gnral des diffrentes rubriques du catalogue ou des rsultats de recherche en Mode Liste (ou en Mode Grille, cest--dire en plusieurs colonnes). Pour la vue grille, le visiteur peut choisir dafficher un certain nombre de produits, orient par le Nombre par dfaut darticles par page en vue grille, et de mme pour la vue liste. De mme, pour laffichage de ces grilles et listes, vous pouvez dfinir un Tri des listes de produits par dfaut. Catalogue plat Le Catalogue plat (traduit par erreur en fixe dans Magento 1.4) est une optimisation disponible si ce catalogue plat a lui-mme t gnr, voir la section Gestion du cache. Il est alors possible dutiliser le catalogue plat pour les catgories de produits comme pour les produits, cela sans consquence pour les visiteurs, si ce nest un temps de rponse infrieur. Ladministration (ajout de produit et catgories) est elle-mme trs lgrement ralentie par le catalogue plat. Plan du site
SAVOIR Le thme par dfaut
Comme vous pouvez lobserver, le thme graphique a beaucoup dinfluence sur le site public. Le chapitre 10 explique comment modifier ce thme.

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Deux plans de site sont gnrs automatiquement, sous forme darbre ou plat, bien que pour le moment lun comme lautre restent sommaires. Sur le site public, on y accde via un lien en bas des pages du thme par dfaut. Laffichage de ces plans peut tre mieux contrl, via les options Utiliser le plan de site des catgories sous forme darbre et Nombre mini de lignes par page.

Figure 531 Plan du site minimal

90
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

E-mails dalerte Les alertes sont des courriels envoys automatiquement vos visiteurs lorsque ceux-ci le dsirent, dans certaines conditions, lors dun changement de prix ou lorsquun produit auparavant puis est nouveau disponible. Utilisez pour cela les options Autoriser lalerte quand le prix du produit change ou Autoriser lalerte quand le produit est de nouveau disponible. Pour chacun de ces cas, on vous demande alors dindiquer un Gabarit du mail dalerte et un Expditeur du mail dalerte. Sur le site public, un lien apparatra alors permettant au visiteur de demander tre alert, comme sur la figure ci-aprs. Les alertes seront envoyes priodiquement, et il vous faut en paramtrer la Frquence, avec une Heure de dbut, et un e-mail envoy une adresse de votre choix dans le cas dune erreur (Erreur de mail destinataire).

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 532

Lien pour labonnement au mail dalerte

Figure 533

Utilisation de la petite image par dfaut

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

91

5 Administrer le site

Magento

Images des produits Vous pouvez changer les images attribues par dfaut aux produits. La diffrence entre Image de base (ou Base image), Petite image (Small image) et Miniature (Thumbnail) est explique dans le chapitre 7, la section Associer des images lors de la cration dune fiche produit. Voici le rsultat de lattribution dune image reprsentant un point dinterrogation pour la petite image par dfaut. Vous pourrez ensuite modifier cette image pour chaque produit, comme indiqu dans le chapitre 7. Consultation du catalogue Tout au long de sa visite du site, un client dispose sur la droite dune bote lui affichant les produits rcemment consults, voire compars. vous de dfinir ici le Nombre de produits rcemment consults par dfaut. De plus, lors de la visite, le client peut tre amen consulter des produits se trouvant dans des sous-catgories de profondeurs hirarchiques diffrentes, au risque de se perdre. Le nombre de niveaux de sous-catgories peut donc tre limit au moyen de loption Profondeur maxi (0 signifiant aucune limite). Lors de la construction du catalogue (voir chapitre 7), vous ne devriez ensuite pas crer de produit une profondeur suprieure. Prix des produits
SUIVRE... Produits tlchargeables
Certains produits peuvent tre de nature tlchargeable (documents PDF, vidos, etc.). Les options y affrent, par exemple Autoriser le partage entre lacheteur et dautres visiteurs, sont simples et traites dans le chapitre 7, section Les diffrents types de produits .

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les prix des diffrents produits peuvent varier ou pas entre les diffrents sites, suivant la Porte des prix catalogue. Recherche dans le catalogue Le paramtrage de la recherche dans le catalogue par le visiteur est autrement plus intressant : il peut tre limit en fonction des longueurs minimale et maximale des requtes, en nombre de lettres (Longueur mini de requte et Longueur maxi de requte), voire de mots (Nombre maxi de mots dans la requte). Quant au Type de recherche, il permet de dfinir si la recherche portera sur des morceaux de mots (like), des mots entiers (fulltext) ou les deux. La navigation par filtre, cest--dire le choix des produits par une recherche de plus en plus prcise via des filtres sur certains critres, peut tre lente laffichage, cest pourquoi il est possible de nappliquer la navigation par filtres qu partir dun certain nombre de rsultats de recherche obtenus. Optimisation du rfrencement Le HTML tant quelque peu optimis pour le rfrencement par les moteurs de recherche, certains mcanismes sont votre disposition pour

92
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

que votre boutique soit potentiellement mieux classe dans les rsultats. Vous pouvez en particulier : inscrire dans les pages les Termes de recherche populaires ; avoir un Plan du site gnr automatiquement ; choisir un Suffixe dURL de produit et un Suffixe dURL des catgories standard (laissez .html) ; Utiliser le chemin de catgorie dans les URLs produit, les espaces tant remplacs par un Sparateur de titre de page standard (tiret ou soulign). (Voir aussi la section Optimiser le rfrencement de votre boutique via les URL dans le chapitre 7.) Date et heure Enfin, lorsquune date, associe ventuellement une heure, doit tre indique, il est possible dutiliser le Calendrier JavaScript. Alors le format dentre, et notamment le Format dheure, peut tre indiqu.

RAPPEL Rfrencement
Par rfrencement, on dsigne lindexation par les moteurs de recherche et le classement dans leurs premiers rsultats. Un bon rfrencement est une des cls primordiales du succs de votre boutique. Celui-ci est influenc par un grand nombre de facteurs, incluant les paramtres du catalogue, mais aussi la propret et la clart du thme graphique de la partie publique, la qualit des descriptions des produits, etc. Plusieurs ouvrages vous permettront daller plus loin sur ce sujet et de comprendre le fonctionnement et les problmatiques du rfrencement, et Magento met votre disposition les mcanismes techniques ncessaires. R O. Andrieu, Russir son rfrencement web, Eyrolles, 2e dition, 2009. R I. Canivet, Bien rdiger pour le Web... et russir son rfrencement naturel, Eyrolles, Accs libre, 2009.

Cration dun plan de site Google


Le plan de site Google (ou sitemap) est un fichier XML gnr automatiquement afin que les robots de Google indexe votre site plus rapidement et plus exactement. Sa configuration seffectue via le menu Catalogue>Plan de site Google. Tout dabord, le plan de site doit tre activ. Il sera alors gnr rgulirement automatiquement, une certaine Heure de dbut, et un mail peut tre envoy en cas derreur (Erreur de mail destinataire). Il vous faut, en plus, ajouter le fichier de plan du site lui-mme. Pour le crer, utilisez le menu Catalogue>Plan de site Google>Crer un nouveau plan de site. Le Nom de fichier est habituellement sitemap.xml, avec un Chemin vers la racine. Il faut enfin spcifier la Vue magasin concerne, puis sauvegarder, en demandant une gnration (Sauvegarder & gnrer). Observez alors le fichier cr la racine de votre site.
SUIVRE... Les options du menu
Catalogue>Inventaire
Les paramtres de configuration lis linventaire des produits sont abords dans le chapitre 7, la section Proprits dinventaire pour la gestion des stocks lors de la cration dune fiche produit.

CULTURE Les plans de sites Google


Il est fortement conseill dactiver ce plan de site, tant pour sassurer dun rfrencement correct que pour contrler le trafic d aux robots des moteurs de recherche.

OUPS ! Le fichier na pu tre gnr


Si le fichier na pas pu tre cr cause des droits en criture, demandez une gnration dans le rpertoire /var/, ou autorisez lcriture dans le rpertoire racine (voir la section Les droits daccs dans le chapitre 3). Figure 534

Cration dun plan de site

Ensuite, pour les diffrentes donnes, vous pouvez paramtrer la Frquence, qui indique au robot de Google une frquence de retour sur votre site pour lanalyser, plus ou moins rapide (habituellement, une journe
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

93

5 Administrer le site

Magento

T Flux ou fil RSS

est une priode suffisante), et dfinir une Priorit en fonction de limportance de ces donnes.

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

RSS (pour RDF Site Summary ou Really Simple Syndication) est un format de documents publis par des sites web destination dautres sites web (ou autres applications), afin den signaler lactualit et den permettre la rfrence. Cest un fichier XML gnr automatiquement par le site metteur. Les flux sont reus aprs abonnement, et les lecteurs de flux sont appels agrgateurs. Il est plus que conseill dactiver les flux RSS, cela contribuera fidliser votre clientle et amliorer votre rfrencement. Voir ce sujet le site suivant :
B http://www.rssboard.com

Activation des flux RSS


Le flux RSS est un mcanisme appartenant aux services web. Il sagit dun format particulier trs rpandu de syndication, qui consiste publier rgulirement les nouveauts dun site afin que dautres en soient informs. La gnration de flux RSS est Active via le menu Catalogue>Flux RSS. Ensuite, vous devrez dterminer chaque type dinformations ou dvnements susceptibles dintresser ceux qui seront abonns vos flux, comme par exemple les Nouveaux produits ou les Coupons/rductions. Le flux peut enfin tre cr, et apparat alors disponible en bas de page sur le site public (pour le thme par dfaut), tel que sur la figure 5-35. Aprs avoir cliqu dessus, on obtient une liste de liens (en fonction des informations cls que vous aurez prdfinies), comme sur la figure 5-36, dont chacun produit des informations XML. Le visiteur na plus qu cliquer sur celui qui lintresse pour sabonner.

CULTURE Le logo orange des flux RSS


Nombreux sont les visiteurs qui matrisent lutilisation des flux RSS, et ainsi recherchent le logo orange standard pour sy abonner. Vous le trouverez ainsi, identique, sur la plupart des sites dinformation.

Figure 535

Licne et le lien RSS sur la partie publique

Figure 536

Page dinformation RSS

Figure 537

Un exemple de flux RSS

94
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Ces flux peuvent ensuite tre rutiliss par dautres sites web, appels agrgateurs de flux, qui affichent leur contenu. Les agrgateurs peuvent galement tre des sites web ou des applications destins afficher directement ces informations un utilisateur (par exemple, Netvibes, pour ne citer que lui).

Les options du menu Clients


Les options concernant les clients de votre boutique se trouvent dans le menu Clients>Configuration client. Elles permettent de rgler les paramtres des comptes et, dans une certaine mesure, de la navigation. Enfin, la liste denvies (wishlist) est paramtrable via le menu Clients>Liste denvies.

Paramtres des comptes clients


Les noms et adresses enregistrs par le client doivent suivre certaines contraintes raisonnables ; vous pouvez ainsi par exemple spcifier un Nombre de lignes dans ladresse de rue (2 ou 3), ajouter le choix dune civilit ou Prfixe (M., Mme...), dun Suffixe ( Jr, Sr...), dune Date de naissance, ou encore un Numro de TVA intracommunautaire sil y a lieu. Si vous avez plusieurs sites web, vous pouvez autoriser ou non un client inscrit sur un site rutiliser son compte sur tous vos sites. Cela seffectue au moyen du paramtre Partager les comptes client. Quant aux groupes de clients, ils sont expliqus dans le chapitre 8, dans la section Grer sa clientle . Le menu Configuration client permet de spcifier un gabarit de courriel daccueil (E-mail daccueil par dfaut), et si les clients doivent ou non confirmer leur inscription afin de vrifier que leur adresse e-mail est juste (option Ncessite la confirmation par e-mail). Enfin, pour le renvoi du mot de passe en cas doubli, il existe aussi un courriel type dont on peut spcifier ici le gabarit (Gabarit du mail doubli).
SAVOIR
Les donnes personnelles des clients
En France, toutes les informations enregistres concernant des personnes doivent tre scurises, ventuellement dclares, et les personnes doivent en tre informes. Rendez-vous sur lexcellent site de la Cnil (Commission nationale de linformatique et des liberts) :
B http://www.cnil.fr

Magento ne propose pas de mcanisme particulier associ au droit loubli, habituellement associ a la capture dinformations nominatives dans les diffrentes lgislations, obligeant par exemple la destruction de ces donnes au bout de deux ans.

Paramtres de navigation
Lorsque le client se connecte, vous pouvez dcider de le faire arriver sur sa page Mon tableau de bord, au moyen de loption non encore traduite Redirect customer to account dashboard after logging in (rediriger le client vers le tableau de bord aprs connexion). Loption accessible par le menu Client>Client en ligne permet ladministrateur dobserver la prsence en ligne du client des fins dtude de comportement pour amliorer son offre, par exemple. En effet, lorsquun client navigue sur un site web, il nest concrtement pas possible de savoir sil a ferm son navigateur ou sil est parti sur un autre site. Loption Intervalle en minutes vous permet alors de dfinir le temps durant lequel on suppose quil se trouve encore sur le site aprs y avoir effectu une action. Un intervalle de 15 minutes semble raisonnable.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

SUIVRE... Clients>Newsletter
Les paramtres de configuration de la newsletter sont traits dans le chapitre 9, consacr la relation clientle.

95

5 Administrer le site

Magento

Activation de la liste denvies


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Pour en terminer avec le client, la liste denvies (catalogue personnel ou wishlist, voir la dernire section du chapitre 4) peut tre Active ou non. Vous devez alors comme toujours spcifier un Gabarit du mail et un Expditeur du mail.

Les options du menu Ventes


Pour paramtrer tout ce qui concerne les ventes effectues via votre site, vous trouverez votre bonheur dans le menu Ventes. Ses options concernent tout aussi bien le droulement de la vente, la facturation et limpression de documents, le rglement des achats, la TVA, la livraison ou encore lobtention de statistiques au moyen doutils comme Google Analytics.

Paramtrer le droulement dune vente en ligne


Concernant le droulement dune vente en ligne, il est possible de configurer les lments suivants via le menu Ventes>Ventes : Dans laffichage de la commande, vous pouvez spcifier lordre des lments du total (Sous-total, TVA, etc.). Afin de faciliter lachat, on peut Autoriser le renouvellement de commande, le client pourra ainsi repasser une commande dj effectue prcdemment en quelques clics. Si vous souhaitez Activer un montant de commande minimum, il faut alors indiquer le Montant minimum, et quelques messages comme lerreur Afficher dans le panier, lorsque le client natteint pas ce montant. La figure 5-38 montre un exemple du rsultat dans le panier du client :

Figure 538 Le montant de commande minimum, indiqu dans le panier du client

96
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Enfin, vous pouvez Autoriser les messages cadeau au niveau de la com-

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

mande et Autoriser les messages cadeau pour chaque article. Le message cadeau est un court texte laiss par lacheteur lintention dun destinataire qui il ferait cadeau de sa commande. Charge au prparateur de la commande, de placer le message cadeau dans le colis. Pour chaque opration (commande, livraison...), un courriel peut tre envoy. Il faut alors lActiver dans le menu Ventes>Mails des ventes, puis spcifier les options habituelles comme lExpditeur du courriel.

Impression de documents PDF


Pour la facturation, les documents de livraison ou ceux concernant un remboursement, Magento propose ladministrateur la cration de documents PDF prts tre imprims. PDF (Portable Document Format) est un format standard et idal pour ce genre dopration, car la mise en forme voulue est conserve quel que soit lquipement du client. Pour chacun des documents gnrs, il est possible dafficher lIdentifiant de commande dans len-tte ou non. Cette option est disponible dans le menu Ventes>Impressions PDF. Quant aux factures et bordereaux de livraison, ils peuvent aussi tre lgrement configurs, en leur ajoutant un logo, par exemple : activez loption Logo pour les impressions PDF, dans le menu Ventes>Ventes.
SUIVRE... Paramtrer la TVA
Les paramtres de configuration de la TVA disponibles dans le menu Ventes>TVA & autres taxes sont prsents la section Dfinir les taxes du chapitre 8 Grer les ventes .

Paramtrer la commande et le rglement des achats


Les diffrentes options qui suivent sont paramtrables via le menu Ventes>Rgler mes achats. Affichage de la commande Sur le site public, lensemble du droulement dune commande (adresse, livraison...), ce quon appelle dun point de vue plus technique le flot (ou flux) de commande, ou encore le tunnel de vente, est conu par dfaut pour tenir sur une seule page cran, comme nous lavons vu au dbut de cette ouvrage. Sil est possible de Dsactiver le passage de commande en une seule page, ce mcanisme est toutefois maintenant suffisamment bien conu pour tre utilisable dans tous les cas. Conditions gnrales de vente Rappelons tout dabord que les visiteurs du site peuvent tre soit des clients enregistrs, soit de simples invits (des visiteurs de passage, en quelque sorte...). Par dfaut, aussi bien les invits que les clients enregistrs sont autoriss passer commande. Vous pouvez bien entendu limiter cette autorisation aux seuls clients enregistrs, en dsactivant
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

97

5 Administrer le site

Magento

loption Autoriser le passage de commande en tant quinvit, mais pensez que ce nest peut-tre pas la meilleure ide pour gagner des clients et augmenter vos ventes ! Vous pouvez galement ajouter des Conditions gnrales de vente comme nous le dtaillons dans la section Les conditions gnrales de vente et dutilisation du chapitre 7. Paramtrage du panier Cest galement dans ce mme menu Ventes>Rgler mes achats que vous pouvez configurer le comportement du panier. Le panier du visiteur est sauvegard dune connexion lautre, suivant la Dure de vie du panier que vous aurez choisie. Une fois cette dure coule, le panier est dtruit. Habituellement, on considre quun panier laiss quelques jours est abandonn. Il est galement possible de faire en sorte de systmatiquement Rediriger [le client] vers le panier aprs lajout dun produit. Concernant laffichage, certains lments peuvent tre contrls, tel le fait dafficher ou non le Rsum du panier qui apparat en haut droite de toutes les pages visites. Paiement Les diffrents modes de paiement et leur fonctionnement sont traits dans le chapitre 8 Grer les ventes . Le menu Ventes>Rgler les achats permet dj nanmoins de configurer lenvoi dun courriel en cas dchec du paiement. Il faut alors spcifier le Destinataire du mail derreur de paiement avec les paramtres classiques denvoi de courriel (gabarit, etc.).

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

ASTUCE Utiliser PayPal


Magento propose nativement la mise en place de transactions via le systme de paiement en ligne de la socit PayPal. Concrtement, il sagit dun intermdiaire scuris de paiement par carte bancaire, afin dviter aux utilisateurs de disperser leurs informations bancaires sur lInternet. Le menu Ventes>Comptes PayPal propose diffrents paramtres de configuration en fonction de lutilisation souhaite de ce service.

SUIVRE...
Configurer les modes de paiement
Les paramtres de configuration du menu Ventes>Modes de paiement sont tudis la section Modes de paiement du chapitre 8.

Paramtres de livraison
La livraison est configure dans le menu Ventes>Paramtres de livraison. On y indique notamment lorigine de la livraison (le dpt, o se trouve le stock), ce qui peut permettre dans certains cas de raliser des calculs de frais denvoi, suivant le mode denvoi choisi par le client. Vous devez donc spcifier ici le Pays, ainsi que les Rgion/tat/dpartement... Par ailleurs, vous tes libre dautoriser les Livraisons des adresses multiples.

SUIVRE...
Paramtrer les modes de livraison
Les paramtres de configuration du menu Ventes>Modes de livraison sont dcrits la section Modes de livraison et frais de port du chapitre 8.

Configurer laccs aux services Google


La socit Google propose nombre de services utiles pour les statistiques, loptimisation du rfrencement ou la gestion technique dun commerce lectronique. Ces services sinterfacent parfaitement avec

98
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento, et vous pouvez donc les configurer dans le menu Ventes>API Google. Chaque outil y dispose dune rubrique spcifique : Google Analytics : systme avanc de mesure et danalyse du trafic sur votre site (nombre de visiteurs, origine, etc.) ;
http://www.google.com/analytics/

CULTURE Pourquoi Google ?


En plus dtre prminent sur le Web, Google met en place des outils nombreux, homognes, plutt ouverts (et gratuits) et bien documents. Cest pourquoi les auteurs de Magento lui ont fait une place particulire.

Google Base (appel aussi Merchant Center) : systme de maintien

dune base darticles pour boutiques en ligne, favorisant leur indexation et rfrencement par Google ;
http://base.google.com/base/

Google Checkout : systme de gestion des achats de mme type que

T API

PayPal permettant au visiteur de payer via le site de Google plutt que directement sur le site de votre boutique ;
https://checkout.google.com

Google Website Optimizer : optimiseur de site pour le rfrence-

ment par Google de votre site, proposant de nombreux tests et lajout de balises, notamment.
http://www.google.com/websiteoptimizer

Le terme API (Application Programming Interface) dsigne lensemble des outils permettant de communiquer avec une application donne, ainsi que les particularits de la communication avec cette application (depuis les autres). Il peut aussi dsigner la documentation qui la dcrit.

Les options de ces diffrents services sont ajuster laide des documentations fournies par Google (voir les URL ci-contre).

SAVOIR Les options du menu Services>API Core de Magento


part le paramtre Dure de session client, qui permet de dfinir la dure de vie dune section Soap ou XML-RPC, rien nest utile dans ces paramtres pour le moment, les prochaines volutions de Magento pourraient les dvelopper, lintention probablement des crateurs dextensions.

Configuration avance
Le menu Avanc permet de paramtrer tout ce qui concerne ladministration de Magento, les oprations systme, les modules et quelques options utiles au dveloppeur.

Paramtres pour ladministration


Ces paramtres se configurent dans le menu Avanc>Admin. Pour la connexion la partie dadministration, nous avons vu en dbut de chapitre la possibilit de bnficier dun envoi de courriel de rappel du mot de passe, avec les paramtres habituels denvoi de courriel vu prcdemment, et mis disposition ici. Ce menu permet galement de slectionner la Page de dmarrage des administrateurs. Vous pouvez galement choisir dUtiliser une URL dadmin personnalise, bien que leffet sur la scurit soit ngligeable. Enfin, vous aurez peut-tre pu observer des lments tranges (/key/047ed6de6af14cc7f68d384eb35c67aa/) dans les URL de linterface dadministration. Ces cls de chiffrement sont une scurit, afin dviter que les URL dadministration puissent tre forges (cest--dire que de fausses URL puissent tre cres). Vous pouvez bien entendu dsactiver cette option (Add Secret Key to URLs).
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

99

5 Administrer le site

Magento

Paramtres systme
Tches cron
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Cest au moyen du menu Avanc>Systme que les tches cron sont mises en place pour le site (voir la section Les tches cron dans le chapitre 3 sur linstallation). Vous devrez alors spcifier la frquence de gnration de la tche (Gnrer la programmation tous les...), en minutes, ainsi quune marge davance en raison des retards possibles dus au systme (Programmer en avance de...) sachant que si le retard est trop important (Erreur si non excut en moins de...), on enregistre une erreur. Un historique, appel log ou journal, va tre produit, puis effac au fur et mesure (Historique de russites, Historique dchecs). Envoi de courriels
DFINITION SMTP
SMTP (Simple Mail Transfer Protocol) est un protocole de la famille IP utilis pour le transfert de courrier lectronique, dfini dans la RFC 821.
B http://www.faqs.org/rfcs/rfc821.html

Il sagit ici de configurer le Serveur et le Port pour lenvoi de-mails. Sous Windows, le plus courant consiste utiliser un serveur SMTP, tandis que pour les systmes de type Unix, on utilisera des serveurs comme Sendmail ou Postfix. Devises

LIRE... Postfix
R M. Bck, P. B. Koetter et al., Monter son

serveur de mail sous Linux, Eyrolles, Accs libre, 2006.

Toujours dans ce menu Avanc>Systme, loption Devises installes permet de spcifier les devises utilisables pour le paiement des achats ; il sagit des devises qui apparatront notamment dans la configuration des taux de change. La gestion des devises est aborde plus en dtail dans la section Devises et taux de change du chapitre 8. Gestion des journaux Divers journaux (logs), savoir des historiques des diverses oprations ralises par le systme, vont tre produits petit petit au fur et mesure de lutilisation de Magento, comme ceux que nous avons voqus au sujet des tches cron. Vous pouvez alors Activer le nettoyage de logs et indiquer la frquence et le-mail envoy en cas dchec. Messages officiels

SAVOIR Historiques des modules


Les modules (composants techniques de Magento) mettent potentiellement des historiques (logs), qui peuvent tre dsactivs via le menu Avanc>Avanc. Cela nest utile quen phase de dveloppement.

Enfin, la frquence de mise jour et de rcupration des messages officiels (voir la section Les diffrents types de message plus haut dans ce mme chapitre) peut tre diminue, toujours via ce mme menu Avanc>Systme. Il est galement possible dutiliser le HTTPS pour rcuprer le flux, mais ce nest pas utile.

100
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Paramtres utiles au dveloppeur


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Dans le menu Avanc>Dveloppeur, quelques paramtres utiles aux dveloppeurs (les crateurs dextensions, par exemple voir le chapitre 11) peuvent tre activs. ventuellement, ils ne seront actifs que pour certaines IPs autorises (les machines identifies de vos dveloppeurs, par exemple). Le Profileur affiche les temps dexcution, pour aider lamlioration des performances. La traduction en ligne, Active pour le frontend ou Active pour ladmin, est destine favoriser linternationalisation du site. Les textes traduire sont affichs sur le site, pour ladministrateur (voir Design et internationalisation au chapitre 10). Les petits rectangles rouges permettent dindiquer une traduction, en cliquant dessus. La figure 5-39 prsente linterface obtenue lorsque la traduction est active pour la partie publique (frontend) :

Figure 539 La partie publique, une fois la traduction en ligne active

Le log destin tout spcialement aux dveloppeurs peut tre Activ. Il faut alors choisir deux Noms de fichier, un pour le log gnral et un pour les exceptions (erreurs graves). Le log se trouve cr alors dans le rpertoire /var/ de votre installation. Enfin, le JavaScript produit peut tre regroup en un seul fichier (Merge JavaScript files), ce qui est une petite optimisation. Enable Prototype depreciation log (Activer lhistorique dinformation de dprciation de Prototype) est un dtail, destin aux dveloppeurs de fonctionnalits Ajax entre Prototype 1.5 et les versions suivantes.

Gestion du cache
Nombreuses sont les applications disposant dun systme de cache. Le principe gnral consiste ne pas recalculer ou rechercher une informa Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

101

5 Administrer le site

Magento

CULTURE Le cache du navigateur


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Votre navigateur utilise lui-mme un systme de cache. Si vous accdez deux fois de suite une mme page statique, il devrait, la seconde fois, tre beaucoup plus rapide. Il naura pas t chercher la page de nouveau sur lInternet, mais laura relue dans un espace du disque dur o il lavait place auparavant.

tion, mais rutiliser la place le rsultat dune opration identique qui a dj eu lieu auparavant, et qui a t conserv en mmoire rapide. Magento utilise un ensemble homogne de caches pour toutes les oprations de longue dure (quelques centimes ou diximes de seconde) quil a besoin de raliser. Le systme de cache peut tre manipul dans le menu Systme>Gestion du cache. On voit sur la figure 5-40 quil est activ par dfaut, pour tous les mcanismes (sauf ceux qui ne sont pas encore parfaitement tests, comme ici Layered Navigation). Cette configuration sera gnralement satisfaisante, sauf si vous avez besoin de modifier les systmes concerns (en tant que dveloppeur).

Figure 540

Les paramtres du cache, activations et dsactivations

Figure 541

Boutons de reconstruction du cache

102
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La partie suivante de la configuration vous permet de reconstruire certains systmes de cache pour le catalogue (voir figure 5-41). Dans le cas du catalogue plat, ce cache nest pas ralis automatiquement, donc si vous avez activ cette petite optimisation (voir la section Options gnrales pour le menu Catalogue), il vous faut faire cette manipulation vous-mme en cliquant sur ces boutons.

Gestion de votre quipe dadministrateurs


Plusieurs utilisateurs peuvent tre inscrits pour administrer le site. Par la suite, nous les nommerons administrateurs et ventuellement dlgus. Si vous tes seul administrateur de votre boutique, vous pouvez passer cette partie. Ces diffrents acteurs constituent votre quipe. Certains peuvent bnficier dun contrle complet, dautres ne soccuper que du traitement des commandes, dautres enfin de la visualisation des tats, etc. Des droits peuvent ainsi tre affects chacun, afin de permettre ces limitations individuelles. Ces droits sont regroups en rles, afin de gagner du temps pour laffectation de vos dlgus. Chaque utilisateur se voit dot dun rle.

Mon compte
Le menu Systme>Mon compte permet de modifier les paramtres des comptes de chacun (Nom, Prnom, Nouveau mot de passe...).

Figure 542

Modification du compte

Les rles
Les rles correspondent un ensemble de droits. Ces droits sont spcifiques Magento, organiss par grande fonctionnalit. Par dfaut, seul un
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

SAVOIR Ladministrateur est tout-puissant


Ladministrateur complet a tous les droits, en particulier celui de choisir les droits des autres utilisateurs. Il est possible, mais dconseill, de donner le rle dadministrateur tous les acteurs de votre projet.

103

5 Administrer le site

Magento

rle dadministrateur complet existe, que nous utilisons depuis le dbut. Les rles peuvent tre crs et modifis via le menu Systme>Permissions>Rles.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 543 La liste des rles avec, pour le moment, le seul rle dadministrateur

Prparons-nous crer un rle de spcialiste du riz, qui soccupera de lajout de produits et du traitement des commandes. Cliquons sur Nouveau rle et choisissons un nom. Puis, cliquons gauche sur le second volet pour indiquer les ressources auxquelles il peut accder, avant de sauvegarder ce rle.

Figure 544

Premier onglet de la cration des rles : le nom

104
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 545

Deuxime onglet : laffectation des ressources

Les utilisateurs
Les utilisateurs peuvent tre crs et modifis au moyen du menu Systme>Permissions>Utilisateurs.

Figure 546 Liste des utilisateurs

1 Vous pouvez alors crer un nouvel utilisateur en indiquant ses (Nom,

Prnom, Nom de famille, Email, Nouveau mot de passe) et si le compte est actif ou non.

Figure 547

Formulaire de cration dun utilisateur

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

105

5 Administrer le site

Magento

2 Chaque utilisateur est associ un rle. Choisissons celui que nous

avons cr prcdemment.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 548

Deuxime onglet : association un rle au choix

3 Enregistrons, et dconnectons-nous afin de tester lutilisateur

dlgu que nous venons de crer. Nous voyons clairement quil a des droits limits (seulement deux lments de menu, Ventes et Catalogue).

Figure 549 Interface dadministration, une fois connect avec un compte restreint

Vous pouvez ainsi constituer les diffrents comptes de vos quipiers, chacun naccdant quaux fonctionnalits dont il a besoin. Voil pour ladministration gnrale de votre site. Les chapitres suivants discutent daspects spcifiques de cette administration, telles la publication, la mise en place de la boutique ou la gestion des ventes.

106
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Publier sur le site

6
SOMMAIRE

B Crer des pages

Au-del de la boutique en ligne, un site conu avec Magento est aliment par des contenus indpendants du processus dachat. La page daccueil, les textes dintroduction des rubriques, voil des informations faciles mettre en place et essentielles pour le succs du site. ne pas rater !

B Insrer des blocs statiques B Administrer des sondages


MOTS-CLS

B CMS B page B bloc B HTML B contenu B statique B dynamique B URL B sondage

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

RAPPEL CMS
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Un CMS (Content Management System) est un systme de gestion de contenu, le plus gnralement pour le Web. Ce type dapplication est destin la publication de contenus au moyen dinterfaces graphiques, afin dtre utilisable par tout un chacun. Les CMS les plus populaires sont Spip, Joomla, Drupal, WordPress, Dotclear, eZ Publish, etc. et nombre dentre eux sont des logiciels libres (en loccurrence, tous ceux cits ici). Vous trouverez une liste de centaines de CMS compars sur :
B http://www.cmsmatrix.org

Bien que la mission premire de Magento soit de mettre en place une boutique en ligne, le logiciel manipule aussi des informations qui ne sont pas relies au processus dachat, mais qui prsentent les contenus, votre socit ou tout autre contenu que vous jugerez utile pour sduire votre client ou vous aider mieux le connatre. Concrtement, ces informations se prsentent au niveau du site sous la forme de pages, de blocs ou de sondages. Magento assume ici la mission de CMS, comme toute autre application de publication en ligne (Spip, Joomla!, WordPress...).

Crer des pages de contenu


Pour enrichir votre site en contenu, vous avez la possibilit de crer des pages web statiques, mises en place indpendamment des autres donnes de la boutique. Chaque page possde sa propre adresse et son contenu est en HTML. La page daccueil est sans aucun doute la plus importante dentre elles.
CONSEIL Utiliser Magento comme un CMS ?
Magento dispose dun systme de gestion de contenu plutt lger en comparaison des autres outils libres ou propritaires spcialiss dans cette tche. Si jamais votre boutique devait tre associe un site web complet, compos de centaines de pages rdactionnelles rparties en rubriques et sous-rubriques, utilisez plutt lun de ces outils ddis (voir apart prcdent) ou optez pour la version entreprise de Magento, qui apporte des fonctionnalits plus avances comme une arborescence de contenus ou la gestion de versions.

T Erreur 404

Lerreur 404 est un code derreur dans le code HTTP renvoy lorsque la page ou autre ressource web demande nexiste pas (mauvaise URL, page obsolte...). Par dfaut, le navigateur du client affichera un message tel que 404 File Not Found ou 404 Page Not Found , mais il est tout aussi bien de personnaliser cette page en indiquant une alternative au client ou en le renvoyant vers la page daccueil.

Pour crer une page, rendez-vous dans le menu CMS>Gestion des pages. Vous observez que de nombreuses pages sont dj prvues par dfaut : About Us ( propos de nous, prsentation de la socit), Customer Service (service clients), Home Page (page daccueil), Enable Cookies (autoriser les cookies), 404 Not Found 1 (page derreur 404, page non trouve). Chaque page est indpendante des autres. Bien quil ne sagisse pas de fichiers HTML sur le disque dur mais de fichiers temporaires, lutilisateur y accde de la mme manire, grce lIdentifiant indiqu. Cet identifiant correspond au suffixe de lURL daccs la page. Vous pouvez ainsi atteindre la premire page par une adresse telle que http://localhost/ rizdumonde/about-magento-demo-store.

108
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 61 Liste des pages prvues par dfaut dans le CMS

Ajouter une page


Ajoutons une nouvelle page, avec quelques donnes : un Titre de page, un Identifiant de rcriture dURL, la Vue magasin o elle apparat, un Statut (activ ou non) et un Contenu. Lidentifiant de rcriture ne doit pas contenir de caractres spciaux (ni mme, en principe, despaces ou de majuscules). Quant au contenu, il est crit en HTML et peut tre dit grce lditeur de texte riche (diteur Wysiwyg).
T diteur Wysiwyg

Daprs lacronyme anglais de What You See Is What You Get, lditeur HTML Wysiwyg permet de mettre en forme le texte sans passer par les balises HTML, au moyen de boutons de mise en forme visuelle : gras, italique, couleur, etc. (un peu comme dans un logiciel de traitement de texte).

Figure 62

Cration dune nouvelle page

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

109

6 Publier sur le site

Magento

On observe que la page peut ventuellement ntre place que dans certains sites ou certaines vues : par exemple, une page en franais napparatra pas dans la version anglaise du site.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les aspects du Design personnalis seront vus dans le chapitre 10, la section Personnaliser le design via linterface dadministration . Pour le moment, choisissez simplement un Agencement (par exemple, en trois colonnes : 3 columns).

Renseigner les mtadonnes


Quant aux Donnes meta Mots cls et Description, elles correspondent des mtadonnes (contenues dans le fichier mais non apparentes), servant encore une fois optimiser le rfrencement auprs des moteurs de recherche. Concrtement, ces donnes sont insres sous forme de balises <meta.../> dans le code HTML produit.
EN SAVOIR PLUS Rfrencement et optimisation des balises
Afin dapprendre optimiser efficacement vos contenus pour le rfrencement, via le contenu des balises <title> ou <meta> notamment, vous pouvez consulter les ouvrages dIsabelle Canivet ou Olivier Andrieu dj cits en dbut douvrage, mais aussi des blogs tels que Rfrencement, Design & Cie de Sbastien Billard. Un billet consacr loptimisation des balises est disponible ladresse suivante :
B http://s.billard.free.fr/referencement/?2006/

En ralit, ces balises sont plus ou moins bien prises en compte par les moteurs de recherche, mais il est tout de mme utile dy placer quelques informations. La description est textuelle et doit permettre didentifier rapidement le contenu, dans ce qui apparatra linternaute comme un snippet dans les rsultats des moteurs. Il sagit de la balise HTML <meta name="description">. Quant aux mots-cls, contenus dans la balise <meta name="keywords">, ils doivent tre fournis sous la forme de mots ou expressions spars par des virgules. Cinq six mots-cls peuvent tre suffisants.

11/30/319-optimisation-du-contenutravaillez-votre-text-appeal

Figure 63

Donnes mta de la page

ATTENTION Crer des liens pour permettre la navigation


Avec le thme par dfaut, aucun menu nest prvu pour les pages statiques cres par le CMS, car celles-ci sont rares, de fait, dans les sites de e-commerce. Si vous en avez cres pour votre site, il vous faut donc crer des liens dans le contenu des pages afin de permettre la navigation vos utilisateurs.

Sauvegardons la page et visualisons-la. Le rsultat semble tout fait convenable.

110
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 64 La nouvelle page sur le site public

Insrer des blocs statiques


Sans forcment ncessiter une page complte, il est parfois judicieux dinsrer du contenu supplmentaire au sein dautres pages du site (boutique, panier ou autre page de contenu). Cela offre notamment lavantage de pouvoir rutiliser un morceau de page (un texte, une image, un lien...) plusieurs endroits. On a alors recours aux blocs statiques, dont le contenu est similaire celui des pages, mais qui ne disposent pas dURL puisque insrs dans dautres pages.

Crer un bloc
Pour crer un bloc, rendez-vous dans le menu CMS>Blocs statiques. Un seul bloc existe par dfaut, Footer Links (liens du pied de page). Il possde un titre, un identifiant et un contenu, lui aussi en HTML ditable grce lditeur Wysiwyg.

Figure 65 Liste des blocs

Ajoutons un nouveau bloc contenant un lien qui mnera de notre premier site vers le second. Comme pour une page statique, il faut alors renseigner le Titre, lIdentifiant, la Vue magasin et le Statut, puis inscrire un Contenu. Ici, le code HTML correspond simplement un lien vers le second site.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

111

6 Publier sur le site

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 66

Page de cration dun bloc statique

Affecter un bloc une page


Nous pouvons placer, au moyen dune syntaxe spciale, le bloc que nous venons de crer dans la page prcdente. On utilise alors les doubles accolades :
{{block type="cms/block" block_id="identifiant-du-bloc"}}

Pour insrer le lien en fin de page, modifions le code de la page en consquence :


Ajout dun bloc statique dans une page
<p>Lavez le riz si besoin.</p> <p>Versez lhuile dolive dans une sauteuse, et fates revenir le riz.</p> <p>Ajoutez deux fois le volume de riz en eau quand les grains de riz sont bruns</p> <p>Laisser cuire 15 minutes, salez</p> {{block type="cms/block" block_id="recettes"}}

Figure 67

Visualisation de la page incluant un bloc statique sur le site public

112
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

On peut aussi vouloir insrer un bloc sur la page de prsentation dune catgorie. Cette fois, pas besoin dentrer dans le code, le menu Catalogue>Grer les catgories tout prvu ! Slectionnez par exemple la catgorie Riz Simples cre prcdemment (voir le chapitre 4) et, dans longlet des Paramtres daffichage, choisissez Bloc statique et produits pour le champ Mode daffichage, et slectionnez votre bloc dans la liste droulante intitule Bloc CMS.

CONSEIL Placer des blocs statiques


ailleurs dans la page
Le systme de prsentation graphique dcrit au chapitre 10 permet dafficher des blocs statiques nimporte o dans les pages du site public, par exemple en en-tte. Le nouveau systme des widgets, prsent dans ce mme chapitre, est encore une solution additionnelle.

Figure 68

Utilisation dun bloc CMS statique pour une catgorie

Rendez-vous sur cette catgorie. Le bloc y apparat en haut, sous le titre de la catgorie.

Figure 69

Une catgorie affiche avec un bloc statique (ici, un lien), dans la partie publique du site

Administrer des sondages


Les sondages forment une autre sorte de contenu ne faisant pas partie de la boutique elle-mme. Techniquement, les sondages ne sont certes pas des lments statiques. Il sagit simplement de blocs afficher, avec un comportement dynamique : les visiteurs peuvent voter, et vous observerez et pourrez afficher le rsultat. Lemplacement daffichage des sondages est dtermin par le thme graphique, dont la personnalisation est aborde dans le chapitre 10. Pour mettre en place un sondage, allez dans le menu CMS>Gestion des sondages. Un sondage dordre esthtique (quelle est votre couleur prfre...) y existe dj. Dsactivez-le en cliquant dessus, puis en changeant son Statut en Ferm. Une fois cette modification sauvegarde, rendezvous sur la partie publique : plus aucun sondage nest affich.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

CONSEIL Faites vivre vos sondages


Renouvelez vos sondages rgulirement, et profitez de cette manne dinformations gratuites et volontaires de la part de vos clients. Cela vous permettra dune part de mieux les connatre et de mieux ajuster votre offre la demande, et dautre part, danimer le site en incitant le visiteur participer. Celui-ci se sentant plus impliqu aura alors sans doute envie dy revenir...

113

6 Publier sur le site

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 610 Le sondage par dfaut

Crons notre propre sondage en cliquant sur le bouton Ajouter nouveau sondage. Il faut alors renseigner la Question du sondage, son Statut (ouvert ou ferm), et un ou plusieurs emplacements (vues magasin).

Figure 611

Formulaire de cration dun nouveau sondage

Dans un second onglet, nous indiquerons les rponses possibles au sondage, lune aprs lautre (Titre de la rponse et Nombre de votes). Nous voyons alors que nous avons un contrle complet sur les votes, si nous dsirons en changer le rsultat, des fins marketing par exemple. Sauvegardez le sondage et testez-le sur le site public, en page daccueil, par exemple. Il apparat tel quel sur la figure 6-13, sur toutes les pages pour lesquelles il a t prvu dans le gabarit (par dfaut, ce sera seulement la premire). Si plusieurs sondages ont t mis en place, cest le premier sondage auquel le visiteur na pas rpondu qui sera affich. linverse, sil a t reconnu comme ayant rpondu tous les sondages, ceux-ci napparatront plus sur la page lors de sa consultation du site. 114
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 612 La cration des rponses du sondage

Figure 613

Un bloc de sondage sur la partie publique, attendant une rponse

Figure 614

Le mme sondage, une fois le vote ralis

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

115

6 Publier sur le site

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

user 177 at Thu Nov 11 07:36:42 +0100 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Mettre en place sa boutique

7
SOMMAIRE

B Les catgories de produits

Nous voil maintenant au cur de notre site : la boutique ! Grce Magento, la ralisation complte dun catalogue riche et complexe est entirement prvue. Comment crer les catgories, les produits et les images, et autres donnes qui leur sont associes ?

B Les attributs B Les produits et types


de produits

B Les promotions B Les conditions gnrales


de vente et dutilisation

B Rcriture dURL pour


le rfrencement MOTS-CLS

B catalogue B catgorie B produit B attribut B lot B promotion B CGV, CGU B alerte

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

LINTRIEUR Une base efficace


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Avec Magento, les donnes sont contenues dans une base de donnes MySQL rcente et bien conue. Cela signifie que vous pouvez crer autant dlments prsents ensuite (catgories, attributs, produits...) que vous le souhaitez, sans gnralement aucune consquence sur les performances ( nuancer peut-tre si vous avez des centaines de milliers de produits...).

Nous abordons dans ce chapitre le cur du contenu de votre boutique : les produits et les donnes qui leur sont associes. Les diffrents contenus vous sont donc prsents, dans lordre le plus vident pour les crer. Attention, cette partie de votre travail est essentielle et invitable. Elle peut savrer la tche la plus longue de toutes, pour peu que votre catalogue soit particulirement important.

Structurer les produits en catgories


Les catgories, ou rubriques, sont des rpertoires dans lesquels les produits sont placs. Ces rpertoires peuvent tre inclus les uns dans les autres, la manire de leurs quivalents sur un disque dur. Chaque catgorie peut ainsi contenir des produits et dautres catgories, sans limitation. Laffichage le plus courant consiste montrer le premier niveau de catgories en tant que menu, gauche ou en haut des pages du site. Le nom des catgories, qui doit tre court et comprhensible, et leur nombre (4 10) sont donc particulirement importants. Il existe deux types de catgories, les catgories racines et les souscatgories : une catgorie racine na pas de catgorie parente ; une sous-catgorie a une catgorie parente. Nous lavons vu prcdemment : un magasin est associ une seule catgorie racine. Il est donc tout fait raisonnable que vous nayez quune seule catgorie racine en tout. Les visiteurs ne verront jamais le nom ou lorganisation des diffrentes catgories racines, mais seulement les souscatgories.

CONSEIL De lorganisation !
Les visiteurs profiteront de ces catgories pour fouiller votre catalogue. Une bonne organisation est donc primordiale. Nhsitez pas prparer dans un document part les diffrentes catgories ainsi que leur contenu.

Arborescence des catgories


Pour crer une catgorie, rendez-vous dans le menu Catalogue>Grer les catgories. Vous observez quil ne sagit pas dune liste classique, mais dune arborescence, qui apparat de faon traditionnelle gauche. Vous pouvez bien sr cliquer sur les petits et + gauche des catgories, afin de dployer ou de refermer les diffrentes branches de larbre. Les liens Tout rduire et Tout dvelopper permettent deffectuer ces oprations sur lensemble des branches de larborescence. Enfin, vous pouvez choisir de nafficher que les catgories associes une certaine vue magasin (et donc celles contenues dans la catgorie racine de son magasin).
Figure 71

Arborescence des catgories

Pour modifier une catgorie, cliquez sur son nom dans larborescence. Pour en crer une nouvelle, utilisez les deux boutons Ajouter gauche.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

118

Crer et paramtrer une catgorie


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Informations gnrales
Crons une nouvelle sous-catgorie Riz pics , dont les proprits apparaissent sur la figure 7-2.

Figure 72

Formulaire de cration dune rubrique ou catgorie

Le Nom est essentiel, car il apparat partout sur le site ; il doit donc

avoir du sens pour votre visiteur. La catgorie est active ou non. Inactive, tout son contenu sera cach. La Cl dURL nest utile que pour les sous-catgories. Il sagit de rdiger la fin de lURL, qui apparatra aprs le dernier slash /. Par exemple, notre catgorie dont la cl dURL est riz-simple sera accessible via lURL http://127.0.0.1/magento1.3/riz-simples.html. Si vous ne spcifiez rien, la cl dURL sera cre automatiquement, partir du nom. La Description de la catgorie, en HTML, apparat sur les pages du site comme dfini dans le gabarit des catgories (voir le chapitre 10). Idem pour lImage, que vous devez charger ici. La Description bnficie, comme les autres champs acceptant du HTML, de lditeur Wysiwyg intgr depuis la version 1.4 de Magento ; il suffit pour cela de cliquer sur le bouton se trouvant en dessous. Le Titre de page, les Mots-cls meta, et la Description meta ont le mme rle que pour les pages statiques (voir chapitre 6). Ce sont des infor119
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

7 Mettre en place sa boutique

Magento

mations utiles aux moteurs de recherche. Vous pouvez tout fait reprendre la description prcdente, bien que celle-ci puisse en plus contenir du HTML, ce qui nest pas le cas de la mtadescription.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Paramtres daffichage
Le second volet des proprits concerne la faon dont saffiche la page consacre la catgorie.

Figure 73

Volet consacr aux paramtres daffichage

Le Mode daffichage permet de choisir entre laffichage de la liste des

SUIVRE...
Design personnalis dune catgorie
Le paramtrage du design des catgories, contenu dans longlet Design personnalis, est trait en dtail dans le chapitre 10, section Personnaliser le design via linterface dadministration .

produits et laffichage dun simple bloc statique, ou les deux. Le bloc de texte est utile, mais demandera un effort supplmentaire de rdaction. Il peut mme contenir des liens vers des produits ou des sous-catgories, et ainsi vous dispenser dafficher les produits ici. Dans le cas de laffichage dun bloc statique, il faut le choisir comme Bloc CMS. La proprit Ancre indique si la page principale de la catgorie affiche seulement les produits de cette catgorie (Non), ou aussi ceux de ses catgories enfants (Oui). Enfin, certains Tris sont disponibles pour laffichage des produits de la catgorie (Meilleure affaire, Nom, Prix), ainsi quun Tri par dfaut. Les meilleures affaires sont expliques dans le paragraphe suivant. Ces proprits peuvent tre spcifiques la rubrique, mais peuvent aussi tre indiques par dfaut une fois pour toutes dans la configuration du catalogue.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

120

Produits de la catgorie
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Dans le dernier onglet, Produits de la catgorie , on indique quels produits on associe la catgorie en cours de cration. linverse, il est aussi possible dindiquer partir des pages de cration des produits les catgories auxquelles appartiennent ces produits. Ainsi, nous nous trouvons devant un mcanisme dassociation dite plusieurs plusieurs entre produits et catgories, savoir quun mme produit peut apparatre dans plusieurs catgories, voire dans plusieurs magasins. Afin dajouter des produits dans une catgorie, il faut rechercher les produits qui vous intressent. Si le filtre par dfaut consiste nafficher que les produits qui sont dj dans la catgorie, il suffit dindiquer Tous dans la liste droulante de filtrage gauche pour tous les faire apparatre. Il est ensuite ais de rechercher un produit et de lassocier la catgorie en cliquant dans sa bote cocher.

CONSEIL Produits dupliqus


Grce ce systme, vous devriez pouvoir viter compltement de dupliquer intgralement des produits. La seule utilit de la duplication est de crer un produit partir dun autre, et non de maintenir un mme produit deux endroits distincts !

Figure 74

Recherche des produits

Pour chaque produit est disponible, droite, la Position. Il sagit de lordre des diffrents produits lors de laffichage des catgories, si vous y avez choisi Meilleure affaire comme ordre de tri. Donnez ici un numro entre 0 et linfini. Gnralement, on va de 10 en 10, afin de pouvoir insrer plus tard des produits entre deux autres sans avoir tout renumroter.

Hirarchie des catgories


Lorsque vous sauvegardez la catgorie, elle apparat gauche systmatiquement comme catgorie racine. Il suffit ensuite de la dplacer par un simple glisser-dposer lintrieur de la catgorie racine existante.

Figure 75 Catgorie dans la hirarchie,

Figure 76 Catgorie dplace dans

lors de sa cration

la catgorie racine par dfaut

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

121

7 Mettre en place sa boutique

Magento

CONSEIL Taille de la hirarchie


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
La profondeur de la hirarchie des catgories nest pas limite. Toutefois, plus de deux ou trois niveaux risquent de devenir difficile grer ensuite, au moment de dfinir la structure visuelle de la boutique, sans compter que cela peut savrer un frein pour le visiteur lorsquil explore votre catalogue.

Visualisez ensuite le rsultat de votre ajout. La catgorie apparat dans le menu principal, et limage choisie saffiche. Si vous trouvez que limage est un peu grande, il y a posibilit dy remdier, comme nous le verrons, encore une fois, lors du contrle de la prsentation graphique au chapitre 10.

Figure 77

La nouvelle rubrique en pleine page et dans le menu

Caractriser les produits grce aux attributs


Il est possible dattribuer diffrentes proprits aux produits, grce un systme dattributs. Ces attributs permettent notamment de retrouver facilement un produit en fonction de ses caractristiques, au moyen de la recherche par exemple. Chaque attribut possde une ou plusieurs valeurs, et ainsi pourrait-on avoir un attribut couleur qui pourrait prendre soit la valeur rouge , la valeur vert , la valeur bleu ... Contrairement aux donnes telles que les sondages ou catgories, les attributs des produits ne sont pas dtermins par avance. Il est possible den ajouter ou den enlever au besoin. Par exemple, on peut dterminer un attribut encombrement pour certains produits. Certains attributs comme le prix ou le nombre dexemplaires en stock seront toutefois indispensables et ne pourront tre supprims. Afin de crer nos produits rapidement et de faon homogne, les attributs seront associs dans des groupes dattributs. Chaque attribut peut appartenir un nombre quelconque de groupes dattributs. Ensuite, chaque produit utilisera un groupe dattributs particulier. Pour reprendre lexemple prcdent, on pourra avoir un groupe de produits normaux et un autre groupe de produits encombrants , ces derniers ayant un attribut supplmentaire, lencombrement. Les attributs indispensables seront bien sr prsents dans tous les groupes dattributs.

122
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Crer des attributs


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Utilisez le menu Catalogue>Attributs>Grer les attributs afin dafficher la liste des attributs dj existants. Remarquez quils sont nombreux. Il sagit de tous les attributs indispensables (nom, prix, stock, etc.), additionns de quelques autres prsents des fins de dmonstration.

Figure 78 Attributs existants

Crons maintenant un Nouvel attribut, matriaux , sachant que tous les attributs ajouts de cette faon ne seront jamais indispensables comme les prcdents.

Figure 79

Premier volet de cration des attributs

Dans le volet consacr aux Proprits de lattribut, le Code attribut est un identifiant, cest--dire un mot unique, qui ne doit pas contenir de caractres spciaux (dont les espaces).

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

123

7 Mettre en place sa boutique

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La Porte permet dindiquer si cet attribut peut avoir plusieurs valeurs, pour un mme produit, suivant son emplacement. Par exemple, les vues magasin tant souvent utilises pour la localisation, la porte dun champ textuel est souvent vue magasin . Ainsi, le produit pourra avoir une valeur diffrente dans un magasin ou dans un autre, ce qui permet dinscrire cette valeur dans une autre langue notamment. Si la porte avait t globale, le texte de la valeur aurait t le mme quels que soient la vue, le magasin et le site. Le Type dentre est dterminant. Il sagit du format des donnes spcifier dans lattribut, parmi des types prdfinis : un champ texte avec une seule ligne de texte ou une zone de texte avec plusieurs lignes ; une date, un prix ou une taxe produit de type DEEE, quivalente un prix ; un choix oui/non avec une case cocher ; des slections multiples ou un lment slectionner dans une liste droulante ; une galerie avec une image ou un ensemble dimages. Suivant le type dentre, il est possible dindiquer une Valeur par dfaut. Si lattribut a une Valeur unique, il ne pourra pas y avoir deux produits ayant la mme valeur pour cet attribut. Selon le type dentre, il peut tre judicieux de procder la Validation des donnes saisies. Ainsi, les erreurs seront signales lors de la cration des produits. Les diffrentes possibilits couvrent les besoins courants (un nombre, par exemple, pourra tre exig ; alors, lentre dune lettre provoquera une erreur). Enfin, la proprit Sapplique permet de faire en sorte que seuls certains types de produits (voir la section Les diffrents types de produits de ce chapitre) soient concerns (par exemple, un type de fichier, uniquement pour les produits tlchargeables).

CULTURE DEEE
Le DEEE (dchet dquipements lectriques et lectroniques) est un type de produit tax de faon particulire. La rglementation europenne impose aux producteurs de ces produits (batteries, lectromnager, cartouches dencre, etc.) un marquage spcifique et la taxe est dtermine en fonction de la dangerosit et du poids du produit.
B http://www.actu-environnement.com/ae/

dossiers/DEEE/DEEE_sommaire.php4

Paramtrer le comportement des attributs pour le visiteur


La srie de proprits du volet intitul Proprits du front-office dtaille le comportement des attributs face aux visiteurs, sur le site public (frontoffice par opposition au back-office, qui est linterface de gestion, dans le jargon des informaticiens). Lattribut peut tre en effet Utiliser dans la recherche rapide et/ou dans la Recherche avance, dans la Comparaison et dans la Navigation par filtres, mcanismes que nous avons abords dans le chapitre 4, lors de la dcouverte des fonctionnalits offertes au visiteur.

124
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Use for Price Rule Conditions indique que lattribut sera utilis pour la ralisation de rgles spciales susceptibles de modifier le prix, comme lors des promotions par exemple (voir plus loin la section Grer les promotions ).

Figure 710

Proprits du front-office

Ensuite, il est possible dindiquer la Position dans la navigation par filtre (encore une fois, un numro entre 0 et linfini). Les attributs utiliss seront ainsi affichs dans lordre indiqu, ce qui permet de mettre en avant (nombre faible) les attributs les plus importants pour les clients. Il faut galement indiquer comment les Tags HTML ( savoir les balises HTML que lauteur peut utiliser dans son texte) seront interprts dans la partie publique du site. Sils sont autoriss, alors ils seront placs tels quels, effectivement intgrs au code HTML de la page sur la fiche produit. Enfin, il est trs important de dterminer si lattribut sera Visible dans la fiche produit sur le frontend, mais aussi, en fonction du thme daffichage, sil sera visible dans les listes (Utilis dans la liste de produits, voire Utilis pour le tri dans la liste de produits).

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

125

7 Mettre en place sa boutique

Magento

Intituls et valeurs des attributs


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Le second onglet ( gauche) propose une courte page permettant dindiquer deux informations essentielles : lintitul de lattribut (titre) et ses diffrentes valeurs possibles (options).

Figure 711

Intituls et valeurs des attributs

SAVOIR Afficher ou non les intituls des attributs


Cest lors de la mise en place de la prsentation de la boutique que sera dcid si tel intitul dattribut est affich ou non dans la fiche produit. Par exemple, on choisira un titre entre Nom : Riz complet ou simplement Riz complet en haut de la fiche.

Dans longlet prcdent, nous navions pas pu indiquer un titre, mais seulement un identifiant. Or, il est utile, si nous dcidons dafficher cet attribut dans la partie publique du site, de disposer dun texte correct et traduit. Cest l lutilit de la section Grer les titres. On vous propose alors de choisir un nom pour la partie dadministration (qui sera utile pour ceux qui creront des produits par la suite), dans le champ Admin. Puis, vous pouvez dcider, pour des raisons dinternationalisation par exemple, que lorsque cet attribut est affich dans certaines vues magasin du site public, il ait un autre nom (traduit dans la langue de cette vue). Un champ non rempli possde par dfaut la mme valeur que celle du champ Admin. En dessous, dans la section Grer les options, un mcanisme de traduction similaire est propos pour les diffrentes valeurs possibles des attributs. Cela nest utile que pour les types dentres Slection multiple ou pour une Liste droulante. Ce sont ces diffrentes valeurs, ordonnes (de 10 en 10, par exemple), qui seront disposition de vos crateurs de produits. Dans le cas dune liste droulante, lune des options peut tre indique comme Valeur par dfaut. Dans le cas dune slection multiple, vous pouvez en cocher plusieurs. Sauvegardez. Lattribut doit maintenant apparatre dans la liste des attributs.

126
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Grer les groupes dattributs


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Comme nous lavons annonc en dbut de section, les groupes dattributs servent gagner du temps lors de la cration de produits, car ils permettent dattribuer tout un ensemble dattributs, dfini lavance, dun seul coup. Pour crer un groupe dattributs, rendez-vous dans le menu Catalogue>Attributs>Grer les groupes dattributs. Un groupe existe dj, Default. Il sagit du groupe dattributs affect par dfaut tous les produits. Il contient les attributs obligatoires, auxquels sajoutent quelques autres usuels (la couleur, par exemple).

Figure 712

Page de gestion des groupes dattributs

Cration dun nouveau groupe


Nous pourrions bien sr ajouter dans ce groupe lattribut matriaux que nous venons de crer, mais cela signifie quil serait demand pour tous les produits, ce qui na pas de sens dans notre cas. Nous allons donc crer un groupe supplmentaire. 1 Cliquons sur Ajouter un nouveau groupe. 2 Une premire page propose dindiquer le Nom ( usage interne, cest-dire quil napparatra pas sur le site public) et un groupe dj existant sur lequel nous nous basons (champ Bas sur).

Figure 713

Cration dun groupe dattributs

3 Sauvegardons (lenregistrement prend un certain temps). Une seconde

page saffiche, afin de nous permettre dindiquer quels attributs appartiennent ce groupe. Sur la gauche apparaissent, sous forme darborescence, les attributs qui appartiennent ce groupe, droite ceux qui ny

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

127

7 Mettre en place sa boutique

Magento

sont pas. Les attributs avec un petit symbole de sens interdit sont ceux qui sont indispensables, ils ne peuvent pas tre retirs.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 714

Association des attributs aux groupes

4 Il suffit de dplacer par glisser-dposer les attributs de gauche

droite ou de droite gauche pour les inclure ou non.

Rpartition dans les sous-groupes


gauche, les attributs sont classs par groupes (il sagit en fait de sousgroupes), General, Prices, etc. (quelques groupes ont t crs par dfaut). Ces sous-groupes visent faciliter la tche de ladministrateur (ou dlgu) lors de la cration des produits, par une organisation en onglets qui vite de faire apparatre tous les attributs sur une mme grande page o il serait ais den oublier. Nous pouvons cliquer sur un nom de sous-groupe pour le modifier, et surtout, dplacer et ordonner les attributs lintrieur de ces sous-groupes. Plaons par exemple notre nouvel attribut matriaux dans la rubrique General, la place de color , que nous enlevons. Nous enlevons aussi manufacturer . Ces suppressions devront tre effectues aussi dans le groupe dattributs Default, puisque nul nest besoin de couleurs et de fabricants pour dcrire nos riz. Le rsultat apparat sur la figure 7-15. Nous sauvegardons notre groupe dattributs (attention, ceci est de nouveau trs long).
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

Figure 715

Le groupe dattributs a t cr.

128

Mettre en place les produits


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Une fois nos catgories et nos rubriques cres, nous sommes maintenant en mesure de mettre en place nos produits dans la boutique. Chaque produit sera dtermin par les caractristiques suivantes : sil est activ ou pas ; son groupe dattributs et ses valeurs pour chacun des attributs du groupe choisi ; son type parmi six disponibles, dcrits dans la section suivante ; les catgories o il apparat ; quelques autres informations supplmentaires, comme les stocks.

Cration dune fiche produit


Comme nous lavons dj vu, le menu Catalogue>Grer les produits nous prsente la liste des produits. Nous pouvons choisir de visualiser uniquement les produits dune certaine vue magasin ( savoir ceux appartenant la catgorie racine du magasin de la vue en question), ou de les voir tous en mme temps.

Figure 716 Liste des produits

Le bouton Ajouter un produit vous amne sur une page qui vous demande dindiquer un Groupe dattributs et un Type du produit. Ces deux informations ne seront pas modifiables par la suite. Les types de produits sont expliqus dans la section suivante. Crez pour le moment un produit simple (Simple Product) en utilisant un groupe dattributs parmi ceux disponibles.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

SAVOIR Ny a-t-il vraiment aucun moyen


de changer le type de produit ?
Le type de produit engageant un grand nombre de mcanismes spcifiques, il ne peut tre modifiable. Pour choisir un autre type de produit, il est donc ncessaire de supprimer le produit existant et den crer un nouveau.

129

7 Mettre en place sa boutique

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 717

Cration dun produit : premire tape

CONSEIL Sauvegarder de temps en temps


En raison du nombre important dinformations enregistres pour chaque produit, il est judicieux de sauvegarder rgulirement, au fur et mesure de la cration des produits.

Vous tes invit ensuite entrer toutes les informations concernant le produit, notamment les valeurs de chacun des attributs. Nous allons les dtailler au fil des sections suivantes, avant de nous intresser aux produits de types spciaux.

Figure 718

Proprits des produits

Informations gnrales
Le premier onglet affich, Gnral, est le plus important, car il contient les donnes principales dcrivant le produit. La porte de chaque information renseigne est indique sur la droite du champ : GLOBAL pour une porte sur lensemble des sites, WEBSITE pour le seul site web ou STORE VIEW pour la vue magasin seulement. Pour les donnes nayant pas une porte globale, il est possible de changer leur valeur en fonction de lemplacement du produit (site web ou vue magasin) : utilisez la liste droulante Choisir une vue magasin en haut gauche de la page. Le Nom du produit sera repris de nombreux endroits du site. La Description complte (en HTML) sera affiche sur la page ddie au produit, alors que la Description courte accompagnera le produit dans une liste ou dans une comparaison de produits. 130
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 719

Proprits gnrales des produits

La rfrence (Rf.) est un identifiant unique du produit. Elle corres-

T SKU

pond votre unit de gestion des stocks (UGS, ou SKU en anglais pour Stock-Keeping Unit), en fonction de votre logistique par exemple. Pour le moment, indiquez une valeur quelconque. Quant au Poids, il peut se rvler utile pour le calcul des frais de transport. Il peut tre en kilogrammes, il ny a pas dunit explicite indique, et aucun calcul automatique ne sera ralis plus tard utilisant ce poids (si des extensions, ayant trait par exemple la livraison, viennent lutiliser, alors elles indiqueront ce quil faut choisir ici, ce qui sera alors respecter dans tout le site).

Le SKU (Stock-Keeping Unit) est un terme conventionnel pour dsigner un produit, ou une variante dun produit. Deux produits ayant le mme SKU sont supposs, avant utilisation, parfaitement interchangeables.

Figure 720

Proprits gnrales (suite)

Afin dattirer lattention des visiteurs, un produit peut tre dot dun

statut Nouveau , de manire bnficier dune prsentation spciale sur le site. On peut donc indiquer, si besoin, les dates entre lesquelles le produit aura ce statut particulier (du 21 septembre au 31 octobre 2010, dans notre exemple).
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

131

7 Mettre en place sa boutique

Magento

Pour apparatre dans la boutique, le produit doit tre Activ. Quant

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

sa Visibilit, elle peut tre restreinte : le produit napparatre par exemple que dans la recherche, mais pas dans le catalogue. La Cl dURL, comme pour les catgories, sera automatiquement calcule si vous ne lindiquez pas. Enfin, il vous est possible dautoriser ou non les messages cadeau pour ce produit (oui, non ou Utiliser la config, qui appliquera les paramtres que vous avez tablis lors de la configuration gnrale, voir chapitre 5).

Fixer les prix


Il est temps den venir un paramtre essentiel, le Prix du produit et plus exactement ses prix... En effet, comme dans un commerce physique, un produit na pas forcment un prix unique, mais peut varier en fonction des promotions, des quantits achetes, des diffrentes taxes, etc. La devise utilise est celle du magasin, telle quindique dans la configuration, dans le menu Gnral>Paramtrage des devises (pour en savoir plus, rfrez-vous au chapitre 8, la section Devises et taux de change ).

Figure 721

Dfinition des prix dun produit

LINTRIEUR Utilisation des dates


de validit du prix spcial
Magento ne fait pas usage dun mcanisme dhorloge pour changer le prix des produits en fonction des dates indiques (par exemple, tous les jours minuit). Cest chaque affichage du produit que sera dtermin si on se trouve ou non entre les deux dates indiques. Ces dates ne sont donc pas soumises des contraintes particulires : elles nont pas ncessairement besoin dtre dans le futur, et elles pourront toujours tre modifies par la suite.

Le prix de base est indiqu dans le premier champ Prix. Pour une remise exceptionnelle, dans le cas dune promotion saisonnire par exemple, utilisez le champ Prix spcial, en indiquant la priode durant laquelle il sera valide (Date de dbut et Date de fin). Dans notre exemple, la passoire sera vendue 8,3 au lieu de 8,5 du 12 au 31 aot 2010. Cela aura pour effet, sur le site public, de barrer le prix normal, en le remplaant
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

132

par le prix spcial. La dernire section de ce chapitre est consacre exclusivement aux promotions.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Quant aux Prix par palier, ils vous permettent de faire du commerce de gros. Vous devez alors indiquer le ou les sites concerns, le type de clients qui cette offre sadresse (voir la section Grer sa clientle du chapitre 8), la quantit minimale pour que la remise sapplique, et un prix pour cette quantit. Par exemple, si on achte plus de dix passoires, le prix unitaire sera rduit 8,2 . Il est possible dindiquer plusieurs paliers avec des prix rgressifs. Bien sr, si le Prix spcial indiqu est plus bas que le Prix par palier, cest ce prix promotionnel qui sera appliqu lors dun achat en quantit durant la priode de promotion. Le Cot du produit, son prix de revient, vous permet uniquement de faire des analyses ; il nest pas visible par le public. Quant la Classe de TVA, elle est explique la section Dfinir les taxes du chapitre 8. Pour le moment, vous pouvez y laisser Taxable Goods. Enfin, le produit peut tre rendu ou non Disponible pour Google Checkout, le systme de paiement par lintermdiaire de Google dont nous avons parl lors de la configuration au chapitre 5, selon votre intention ou non de faire appel cet outil.

Ajouter des informations mta


Cette section permet tout simplement dindiquer les informations classiques des balises <meta>, savoir des mots-cls et une mtadescription, disposition notamment des moteurs de recherche, de la mme manire que lors de la cration de contenu dans le chapitre 6.

Figure 722

Informations mta dun produit

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

133

7 Mettre en place sa boutique

Magento

Associer des images


CONSEIL
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Redimensionner ses images
Magento propose un redimensionnement automatique des images. De mme, cela peut tre fait directement par le navigateur du client, par des gabarits au code HTML appropri, bien que cela ait pour effet de dformer le rsultat. Il est cependant conseill de prparer soi-mme ses images en leur donnant les dimensions finales souhaites, car cela vous permet de contrler exactement le rsultat. Utilisez pour cela votre logiciel de traitement dimages favori (Gimp, Photoshop ou un utilitaire de type Image Resizer pour Windows).

Chaque produit peut tre associ un grand nombre dimages. Ces images sont attribues exclusivement un produit, et ne peuvent donc pas tre partages entre les produits. Vous pouvez ajouter diffrents types dimages, en fonction de leur emploi sur le site. Pour chaque image charge, il vous faudra ainsi prciser son statut en cochant la case approprie. Avec le gabarit standard, seules trois images seront utilises : limage de base (Base Image), qui est limage principale figurant sur la fiche produit ; la petite image (Small Image), qui apparat dans la grille des produits dune catgorie par exemple ; la vignette (Thumbnail), correspondant licne affiche dans la liste denvies, la comparaison de produits, etc. Les images seront redimensionnes automatiquement par Magento en fonction de lemploi spcifi.

Figure 723 Cette image de la passoire sera utilise comme petite image et comme vignette.

SUIVRE... Design du produit


Longlet Design permet dindiquer des informations lies la prsentation graphique du produit. Nous en reparlons au chapitre 10.

La manipulation pour envoyer les images est un peu particulire. 1 Cliquez sur Browse Files, et parcourez votre disque pour slectionner limage. Pour ajouter dautres images, faites de mme. 2 Une fois toutes les images slectionnes, cliquez sur Upload Files. Celles-ci saffichent alors juste ct. 3 Les images ne saffichent pas immdiatement, vrifiez celles que vous souhaitez en les survolant avec la souris, au cas o une erreur denvoi ait eu lieu. 4 Enfin, choisissez un intitul pour chacune delles, ventuellement un ordre de tri, et leurs emplacements dapparition (Base Image, Small Image, Thumbnail).

Proprits dinventaire pour la gestion des stocks


Dans longlet Inventaire, Magento propose un outil de gestion des stocks, dont vous ne saurez vous passer pour certains produits. Pour 134
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

lactiver pour le produit en cours de cration, fixez le champ Grer les stocks sur Oui. Voici le fonctionnement gnral de linventaire, pour les produits auxquels vous lappliquez. Chaque produit dispose dune certaine Quantit en stock. Cette valeur sera diminue la validation de chaque achat, si vous lavez dcid ainsi dans la configuration (voir la section Les options du menu Catalogue au chapitre 5). Cette quantit est entire ou non (La quantit utilise des dcimales) : sil sagit de produits quantifiables au poids, vous pouvez par exemple matriser des kilogrammes au gramme prs. La quantit pouvant tre commande par un mme client peut tre limite : spcifiez une Quantit mini autorise dans le panier et une Quantit maxi autorise dans le panier. La Commande en rupture de stock peut tre autorise ou non. Si cest interdit, le client verra effectivement un message de rupture de stock. La limite de la rupture de stock peut tre fixe plus de zro (Qty for Items Status to become Out of Stock), cest--dire que si vous indiquez 10 dans ce champ, le produit apparatra en rupture ds que le stock aura atteint ce chiffre. Enfin, si vous le dsirez, vous pouvez Notifier quand la quantit passe en dessous dune certaine valeur.

Figure 724

Proprits dinventaire dun produit

Affecter le produit aux sites web et catgories


Pour indiquer sur quel(s) site(s) doit tre vendu le produit, rendez-vous dans longlet Sites web. Noubliez pas de cocher ici au minimum une case. De mme, il vous faudra prciser quelle(s) catgorie(s) appartient ce produit, en cochant les cases appropries dans longlet Catgories.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

135

7 Mettre en place sa boutique

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 725 Choix du site web

Figure 726 Catgories du produit

Produits apparents, ventes incitatives et ventes croises


Voyons maintenant une fonctionnalit qui ne manquera pas dveiller votre fibre commerciale. En effet, Magento facilite la mise en uvre des techniques telles que les ventes incitatives ou les ventes croises, en permettant dindiquer des relations entre un nouveau produit et des produits dj existants dans le catalogue. Cest l lobjet des onglets intituls Produits apparents, Ventes incitatives et Ventes croises. Les Produits apparents apparaissent sur la fiche produit, acheter en plus de ce produit. Cest par exemple le cas des produits introduits sur Amazon.fr par Les clients ayant achet cet article ont galement achet... . Les Ventes incitatives concernent des produits qui seront galement affichs sur la fiche produit, mais acheter en monte de gamme (mieux et plus cher !). Les Ventes croises concernent quant elles des produits apparaissant avec le panier, proposs pour complter lachat (par exemple, un livre de recettes proposer avec vos diffrents riz).

CONSEIL utiliser sans modration


Les techniques commerciales dappariement de produits sont efficaces, dautant plus si la prsentation de la boutique est simple, sans risque de perdre les clients. Bien que ce soit un travail long et systmatique, il est judicieux de bien prendre le temps dy rflchir et de les cumuler.

Figure 727

Produits apparents

Abonnements aux alertes sur les produits


Sur un site conu avec Magento, vous pouvez faire en sorte que les clients puissent demander recevoir des alertes e-mail sur un produit : lorsquil sera nouveau disponible, lorsque son prix baisse, etc. Cela stablit lors de la configuration, comme nous lavons vu dans la section 136
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

E-mails dalerte de la configuration du menu Catalogue, dans le chapitre 5. Longlet Alertes du produit permet de visualiser et de grer les abonnements des clients.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 728

Liste des alertes client sur les produits

Ajouter des options personnalisables : choix de la taille, de la couleur, etc.


Les Options personnalisables correspondent aux choix laisss au client lorsquil achte un produit par exemple une taille ou une couleur cocher parmi une liste choix multiples. Il peut tout aussi bien sagir dun simple champ de texte remplir (permettant au client de vous laisser un message ou encore son texte au choix si vous vendez des teeshirts personnaliss, par exemple). Indiquez tout dabord un titre gnrique (par exemple, Couleur), puis le type de saisie quaura effectuer le client parmi les options suivantes : Drop down : liste droulante ; Radio Buttons : un choix parmi une liste, en cochant des boutons radio ; Checkbox : oui ou non, case cocher ; Multiple select : zone de choix multiples. Prcisez ensuite si cette option est obligatoire ou non, ainsi quun ordre dapparition si plusieurs options sont disponibles. Puis, vous navez plus qu dtailler chacune des valeurs pour chaque option : son Titre ou intitul (Gris, Vert fluo, etc., dans le cas dune option de couleur) ; le prix additionnel, si certaines options sont plus chres que dautres. Ce prix est alors une augmentation soit fixe (Fix), soit en pourcentage du prix dorigine (Pourcent) ; la Rf. de chaque option (en remplacement de la rfrence principale) ; lOrdre de tri, pour laffichage.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

137

7 Mettre en place sa boutique

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 729

Dfinir des options personnalisables

Tous ces choix tant faits, vous pouvez sauvegarder votre produit et vrifier sur le site public son bon fonctionnement. Voici la fiche produit, rsultat de notre cration.

Figure 730

Fiche du produit cr

Les diffrents types de produits


Le produit que nous venons de crer, savoir la passoire, tait un produit simple (Simple Product). Or, il est possible avec Magento de mettre en vente cinq autres types de produits. En voici la liste complte : les produits configurables, pour lesquels certains choix sont laisss au client ; les produits groups, via lesquels on propose des ensembles judicieux ; 138
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

ASTUCE Dupliquer un produit


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Lors de ldition dun produit, vous pouvez le Dupliquer (bouton en haut de la page ddition de ce produit). Un second produit strictement identique est alors cr, les seules diffrences concernant le stock et la rfrence. Il sagit dun simple clonage, les donnes dupliques tant ensuite strictement indpendantes ; les deux produits peuvent ensuite tre modifis sans consquences ni pour lun ni pour lautre.

Figure 731 Liste des produits, aprs duplication de la passoire

les produits en lot, permettant de proposer des rductions, des ensem-

bles, etc. ; les produits tlchargeables, livrables directement sur lordinateur du client ; les produits virtuels, pour lesquels nulle livraison nest ncessaire.

Les produits configurables


Un produit configurable est un produit pour lequel plusieurs variantes sont disponibles : partir du produit de base, le client devra slectionner une ou plusieurs options. Par exemple, pour un produit de base Riz rond pour Sushi , il pourra choisir entre du riz lav ou non, sachant que le riz lav aura un surcot de 65 centimes deuro. Contrairement aux options personnalisables, ceci permettra de limiter le choix des clients certaines configurations du produit.

Figure 732

Erreur la cration dun produit configurable

Pour crer un produit configurable, on devra choisir son groupe dattributs pour quil comporte au minimum un attribut valeur variable, cest Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

139

7 Mettre en place sa boutique

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

-dire de type Liste droulante. Celui-ci doit galement avoir une porte globale (afin de ne pas varier suivant les vues ou les magasins), et tre dfini comme pouvant servir crer des produits configurables. Si le groupe dattributs est mal choisi, voil le rsultat (figure 7-32). 1 Ajoutons par exemple, notre groupe dattributs par dfaut (Default), un attribut supplmentaire lav ( valeur possible oui/non), puis crons notre produit configurable, savoir le Riz rond pour Sushi .

Figure 733

Cration dun produit configurable

2 Nous slectionnons ensuite lattribut utile pour la configuration.

Figure 734

Choix de lattribut configurable

3 Le produit est similaire au produit simple, avec ses attributs propres.

Vous observez que linventaire est rduit, il ny a pas de quantit indique.

Figure 735

Inventaire pour un produit configurable

4 Rendons-nous maintenant dans le volet Produits associs. Nous allons

pouvoir y crer des produits supplmentaires, qui serviront en fait de configurations diffrentes pour le produit de base. Le visiteur, quant 140
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

lui, ne verra que le produit principal, avec ses diffrentes options dfinir. Chaque produit associ est un produit simple, qui aura son propre prix, sa propre rfrence, son propre stock, etc.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 736

Cration de produits associs au produit configurable

5 Pour ajouter des produits associs, il est possible de rutiliser des pro-

CONSEIL Masquer les sous-produits


Les produits simples qui ne servent que pour les choix des produits configurables ne devraient pas tre eux-mmes affichs. Utilisez pour cela lattribut visibilit de chaque produit.

duits existants et den crer de nouveaux au moyen du bouton Crer vide. Mais le plus pratique est de sauvegarder notre produit de base, puis de revenir lditer dans ce mme onglet (section Cration rapide de produit simple). Ainsi pouvons-nous alors crer rapidement des produits, un par un, partir dun mme produit de base.

Figure 737

Cration rapide dun produit partir dun produit configurable

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

141

7 Mettre en place sa boutique

Magento

Le rsultat de nos crations est visible sur la fiche produit du site public : ici, notre produit Riz rond pour Sushi est bien disponible en option Lav ou non.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 738

Produits associs un produit configurable

Figure 739

Configuration dun produit par le client, sur le site public

Les produits groups


Un produit group est un produit constitu dautres produits, afin de proposer une offre idale. Il peut sagir dune certaine quantit dun mme produit : par exemple, 8 kg de riz rond pour sushi, sachant que le produit de base est vendu par unit de 1 kg, ce qui revient vendre 8 units de ce produit ensemble, loffre tant propose comme la quantit de riz servant confectionner 20 kg de sushis. La liste de ces produits associs peut tre constitue partir de nimporte quel produit du magasin (si tant est que nous vendions aussi du poisson cru, nous pourrions donc aussi le grouper cette offre). la diffrence des produits vendus par lot (voir section suivante), le client pourra modifier la propo142
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

sition pour laccorder ses souhaits, par exemple ne prendre que 7 kg de riz ou changer le saumon contre du thon. 1 Un Produit group se cre comme un produit simple. Vous devez bien sr lui donner un nom (ici, pourquoi pas 20 kg de sushi puisque cest le but de la manuvre) et dcrire en quoi le groupe consiste dans les champs de description ( 8 kg de riz rond de haute qualit , par exemple). 2 Ensuite, les onglets Prix et Inventaire sont trs restreints, se limitant la disponibilit pour Google Checkout et au stock restant.

Figure 740

Onglets Prix et Inventaire dun produit group

3 Comme pour le produit configurable, il va nous falloir slectionner

des Produits associs pour constituer notre groupe. Nous choisissons donc le Riz rond pour Sushi-Oui dans la liste des produits en cochant la case gauche et en choisissant une quantit par dfaut.

Figure 741

Liste des produits constituant un produit group

4 Sauvegardons ces donnes et voyons le rsultat dans la partie

publique : le produit 20 kg de sushi apparat avec sa disponibilit, sa description et, surtout, le nom des produits qui le composent. Le client peut alors modifier la quantit selon ses souhaits (ventuellement 0) ou retirer un produit du groupe, et le prix total saffichera alors en fonction.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

143

7 Mettre en place sa boutique

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 742

Fiche dun produit group

Les produits packags


Le Produit packag, ou produit en lot, est trs similaire au produit group, quel que soit le produit, si ce nest que le client naura pas le choix de modifier la composition du ou des lots inclus. Il ne saura dailleurs pas ncessairement que cest un lot quil achte. Prenons lexemple dun lot destin vendre la quantit de riz ncessaire la confection dune paella pour vingt personnes, soit 6 kg de riz long. Contrairement au produit group, la fiche produit du lot ne montrera pas forcment que lon vend en fait six units du produit que nous avons dnomm Riz long et, surtout, le client naura pas le loisir de modifier cette quantit. Le prix est donn pour le lot et le prix unitaire du produit nest cette fois pas prcis. 1 Lors de la cration du produit, longlet Gnral nous propose de gnrer automatiquement la rfrence et le poids, en faisant la somme de tout le contenu, partir des informations fournies ltape n 3 suivante. Il suffit pour cela de slectionner Dynamique dans la liste droulante Rf..

Figure 743

Onglet Gnral dun produit en lot

144
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

2 De mme, le prix peut tre dynamique (la somme de tout le contenu)

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

ou fixe. Nous choisissons un Prix Fixe. Comme pour les produits simples, vous pouvez aussi spcifier des prix spciaux pour les promotions exceptionnelles.

Figure 744

Choix dun prix pour le produit en lot

3 Quant au contenu de notre lot, nous allons le prciser dans longlet

Articles packags spcifique ce type de produits. Nous devons tout dabord indiquer si tous les produits sont livrs en mme temps, avant de choisir la composition des lots. Chaque lot est considr comme une option activer ou non par le client (le lot peut tre obligatoire, le client ne peut alors pas le dsactiver). Il faut ensuite cocher pour chaque lot les produits concerns, en prcisant leur quantit.

Figure 745

Choix des produits composant le lot

Notre lot est prt. Observez comment il se prsente sur les interfaces dadministration (figure 7-46) et publique (figure 7-47). Nous avions choisi une option obligatoire, donc le client devra acheter le riz. Observez le prix total, gal au prix de larticle additionn au prix de loption.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

145

7 Mettre en place sa boutique

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 746

Le lot tel quil apparat pour ladministrateur

Figure 747

Le lot tel quil apparat sur la fiche produit, pour le visiteur

Les produits tlchargeables


Un produit tlchargeable (downloadable, en anglais) consiste en un ou plusieurs fichiers que lacheteur pourra rcuprer directement sur son ordinateur par tlchargement. Par exemple, notre magasin pourra proposer lachat un livre pour apprendre cuisiner le riz pour les enfants, tlcharger sous forme dun fichier PDF. Les donnes renseigner sont les mmes que pour un produit simple, si ce nest que vous devrez les complter par des Informations tlchargement. 1 La premire section de cet onglet, Exemples, permet dindiquer des fichiers de dmonstration du produit final (quelques pages dun livre, une version rduite ou limite dans le temps dun logiciel...) qui 146
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

seront tlchargeables gratuitement par le visiteur. Leur nombre nest pas limit. Donnez-leur un Titre, une position pour le Tri et spcifiez soit un fichier slectionn (File) en parcourant larborescence de votre serveur, soit lURL complte de ce fichier.

Figure 748

Slection des extraits tlcharger gratuitement

2 Ensuite, il vous faut crer le vritable contenu vendre dans la sec-

tion Liens. Il est possible dindiquer plusieurs fichiers, chacun avec un prix supplmentaire et son propre exemple. Enfin, vous pouvez spcifier un nombre limit de tlchargements, ou alors cocher la case Unlimited (illimit) pour que lacheteur puisse tlcharger ce mme fichier autant de fois quil le souhaite.

Figure 749

Slection des fichiers vendus au tlchargement

Les produits tlchargeables seront disponibles aux acheteurs, sur le site, comme tous les autres produits, sous forme de fiche produit. Une fois achet, le client pourra tlcharger son ouvrage partir de sa page de gestion de compte, dans longlet Mes produits tlchargeables. Il lui suffit alors de cliquer sur le lien disponible.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

147

7 Mettre en place sa boutique

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 750

Achat dun produit tlchargeable

Figure 751

Rsultat de lachat sur la page de gestion de compte du client

SAVOIR Configuration des produits tlchargeables


Les options de partage des produits tlchargeables sont spcifies par dfaut dans la configuration gnrale, dans le menu Catalogue (voir chapitre 5). Le client devrait tre oblig dattendre que le produit soit factur pour tlcharger (Statut de larticle command pour activer les tlchargements). Le Nombre maximum de tlchargements par dfaut est 0, afin de permettre un nombre illimit de tlchargements. Le partage du fichier entre clients peut tre autoris ou non, via loption Autoriser le partage. Sil ne lest pas, pour tlcharger, il faut se connecter sur le site avec les identifiants de lacheteur, mais attention, cela ne vous protge pas de la copie illgale. Pour les exemple, il est possible dindiquer un Titre par dfaut. Pour ce qui est du lien de tlchargement, les possibilits habituelles du HTML sont disponibles : Ouvrir les liens dans une nouvelle fentre et Proposer le contenu En ligne ou Comme pice jointe.

148
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Les produits virtuels


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

On appelle produit virtuel tout produit ntant pas un objet matriel (ni mme un fichier informatique). Il peut sagir par exemple dun abonnement, dune licence ou de toute sorte de service. Il ne ncessite donc pas de livraison, de stock, et bien videmment, nul besoin de lui spcifier un poids !

Grer les promotions


Outre le prix spcial et le prix par palier dcrits dans la section prcdente, prsentant une offre exceptionnelle sur la fiche produit durant un certain laps de temps, deux autres types de promotions peuvent tre mises en place, afin de rduire les prix de faon conditionnelle : les promotions catalogue, qui sappliquent un seul produit, selon des critres que vous aurez choisis ; les promotions panier, qui sappliquent tout le panier, en fonction de la somme totale de ce panier par exemple.

Les promotions catalogue


Les conditions de ces promotions sont dfinies au sein de rgles, quil va falloir tablir pour chacune des promotions proposes : par exemple, une remise de 30 % pour tous les riz dont le prix est suprieur 4 .

Dfinir une rgle


Pour mettre en place ces rgles, utilisez le menu Promotions>Rgles de prix catalogue. Il ny en existe pas par dfaut. Pour crer une nouvelle promotion, cliquez sur Ajouter une nouvelle rgle.

Figure 752 Liste des promotions catalogue

Le Nom de la rgle et sa Description vous serviront de rfrence : Riz moins cher Une promotion sur tous les riz trop chers , par exemple.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

149

7 Mettre en place sa boutique

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Son Statut sera Actif ou Inactif, et elle ne pourra sappliquer ventuellement qu certains Sites web ou certains Groupes clients (les groupes clients sont abords dans le chapitre 8). Vous pouvez galement lui donner deux dates de validit et une Priorit, dans le cas ou plusieurs rgles puissent interfrer.

Figure 753

Cration dune rgle de promotion catalogue

Conditions dapplication de la rgle


Le deuxime onglet Conditions nous permet dindiquer que la rgle ne va sappliquer que dans certaines conditions. Dans notre cas, elle sappliquera tous les produits dont le nom contient le mot riz et dont le prix est suprieur 4 . Le + sert ajouter des conditions. Vous ajoutez alors une condition sur un attribut ou bien une combinaison de plusieurs conditions (qui alors disposent de nouveau dune phrase du type Si toutes... ). Chaque attribut, suivant son type, sera pris en compte selon un oprateur (infrieur, suprieur, gal , contient...) et une valeur (numrique, texte...).

150
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Dans lnonc des conditions, le mot Toutes peut tre remplac par Une ou plusieurs de. Cela correspond aux oprateurs boolens ET et OU utiliss habituellement en informatique. Quant au mot Vraies, il peut tre remplac par Fausses. Il sagit de lhabituel NON.

Figure 754

Ajouter les conditions dapplication dune rgle

Rsultat
Le troisime et dernier onglet, Mettre jour les prix de la faon suivante, permet dindiquer laction qui sera effectue si toutes les conditions sont runies. Comme il sagit dune rgle de promotion, il sagit ncessairement dune modification du prix : une remise fixe (1 ) ou en pourcentage (30 %) ; un nouveau prix fixe (3 ) ou en pourcentage du prcdent (70 %). Une fois slectionn le type de rduction appliquer, indiquez sa valeur (entier ou pourcentage). Si vous dcidez dArrter de traiter les rgles suivantes, cela signifiera que si cette rgle sapplique, toutes les rgles de priorit infrieure seront ensuite ignores. Comme pour le prix spcial, la promotion sera visible par le client sur la fiche des produits concerns, le Prix normal tant barr et remplac par le Prix promotionnel.

Figure 755

Figure 756 Promotion sur un article affiche

Exemple de remise de 30 % du prix dorigine

sur la fiche produit

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

151

7 Mettre en place sa boutique

Magento

Les promotions panier


SAVOIR Priorit des promotions
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Les promotions catalogue sont appliques avant les promotions panier. Ces dernires ne sont en effet visibles que lors de la finalisation de lachat. Cela nempche pas, bien sr, de les annoncer dautres endroits du site, dans des encarts promotionnels, tels que 10 offerts pour plus de 100 dachat ! , mais leur calcul ninterviendra quaprs toute autre rduction.

Les promotions panier seront appliques en fonction des achats du visiteur, sur la totalit du panier en cours. On pourrait imaginer, par exemple, que pour plus de 100 dachat, le client bnficie dune ristourne de 20 %. De mme, le client peut dj possder un bon de rduction et vouloir le dduire du montant total de sa commande. Le principe de fonctionnement est trs proche de celui des promotions catalogue.

Dfinir une rgle


Pour atteindre les rgles de promotions panier, utilisez le menu Promotions>Rgles de prix panier. Il ny en existe pas par dfaut. Pour en crer une nouvelle, cliquez sur Ajouter une nouvelle rgle. Les informations de base de la rgle (nom, description, domaine dapplication...) sont identiques aux prcdentes, hormis la possibilit de dduire des bons de rduction.

Figure 757 Listes de rgles de prix panier

Bons de rduction
CONSEIL Bien diffuser ses rductions
Un march anarchique, favoris ou non par les boutiques, se met en place autour des bons de rduction sur lInternet. Certains sites proposent ainsi une collaboration communautaire pour la collection et lutilisation de ces bons. Si vous dsirez vous en prmunir, la meilleure solution est de ne proposer que des codes valables sur une courte priode (un mois, par exemple).

Si un Code du bon de rduction est indiqu, seuls les possesseurs de ce code bnficieront de cette promotion. Cest vous qui fixez ce code, et vous naurez plus qu le communiquer votre client de quelque faon que ce soit (e-mail, courrier, tlphone, publicit, etc.) en fonction de vos pratiques commerciales. Vous pouvez aussi limiter le Nombre dutilisations par bon de rduction (pour limiter le nombre total dutilisations de ce bon : pas plus de 1 000 fois, pour viter une trop grande diffusion du code de rduction, par exemple) et le Nombre dutilisations par client (1 semble une valeur raisonnable).

Figure 758

Ajout dun bon de rduction une promotion

152
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Pour utiliser son code de rduction, le client naura qu le saisir dans le champ appropri sur la page de son panier, puis valider. Le total (ou sous-total) de sa commande se verra alors rduit du montant du bon de rduction, comme on le voit sur la figure ci-aprs.

Figure 759

Une remise, une fois le bon de rduction appliqu

Conditions dapplication de la rgle


Dans le dexime onglet, Conditions dapplication de la rgle, les conditions indiques dpendent dinformations sur le panier lui-mme : la prsence de certains produits en certaines quantits (par exemple, le client achte plus de 10 kg de riz) ; la prsence de certains attributs de produits (si le panier contient des produits dorigine franaise si tant est que lon ait ajout lorigine du produit comme attribut) ; un sous-total dun certain montant, une quantit minimale darticles, un poids total minimal (un minimum dachat de 100 , un nombre de produits suprieur 10, un poids suprieur 10 kg) ; le mode de paiement, le mode de livraison, le lieu de livraison (si le client paye via PayPal plutt que par carte bancaire, sil accepte dtre livr un point de retrait ou sil habite la ville o sont stockes vos marchandises). Dans le dernier onglet, Mettre jour les prix de la faon suivante, de nombreuses possibilits sont disponibles. Il est possible dappliquer une modification dune certaine Valeur fixe ou en pourcentage (comme pour les promotions catalogue), mais aussi de limiter la Quantit maximum darticles bnficiant de la remise ou dindiquer une Quantit minimum darticles pour bnficier de la remise. Notez que la remise peut aussi tre de type Livraison gratuite. L encore, si on lui a accord une priorit, elle peut empcher le Traitement de rgles avec une priorit plus faible. Enfin, on peut crer une condition supplmentaire qui permet simplement de choisir quels articles la promotion sapplique, lorsquelle sapplique.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

153

7 Mettre en place sa boutique

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 760

Mise jour des prix selon la promotion

Les conditions gnrales de vente et dutilisation


NE PAS CONFONDRE CGV ou CGU ?
Les conditions gnrales dutilisation (CGU) ne sont quune gnralisation du principe de conditions gnrales de vente (CGV), applicable tout commerce, tout domaine dutilisation. Les CGV ne sont donc quune partie des CGU.

Tout professionnel vendeur de biens ou prestataire de services doit, avant la conclusion du contrat, mettre le consommateur en mesure de connatre les caractristiques essentielles du bien ou du service. En cas de litige, il appartient au vendeur de prouver quil a excut cette obligation. Comme le montre cet article du Code de la consommation (article L111-1), les conditions gnrales de vente (CGV) et dutilisation (CGU) de votre commerce doivent pouvoir tre consultes (et imprimes) en permanence sur votre site. Il sagit de toutes les garanties, limitations de responsabilit, indications sur la livraison, etc., que le client est en droit de connatre avant de conclure un achat. Il doit les valider avant achat pour que la vente soit conclue en toute lgalit, et cela lui est traditionnellement demand via une case cocher de type Jaccepte les conditions gnrales... avant deffectuer la dernire validation avant paiement. Vous devez avoir dtermin soigneusement celles qui sappliquent votre activit en particulier. Magento permet de crer plusieurs textes de conditions gnrales de vente et dutilisation, en permettant que certaines ne sappliquent qu certains sites web ou certaines vues magasin. Rendez-vous sur la liste Catalogue>Grer les conditions gnrales de vente. Aucune condition nest prsente par dfaut. Cliquez sur Ajouter une condition.

154
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

CULTURE Lgislation en matire de commerce lectronique


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Le Code de la consommation, valable pour tout type de commerce, est disponible en ligne sur le site Legifrance.gouv.fr : Bhttp://www.legifrance.gouv.fr/ affichCode.do?cidTexte=LEGITEXT000006069565 En France, une dizaine de lois diffrentes indiquent des cas particuliers pour la vente par Internet et la vente distance, notamment la Loi Chatel pour le dveloppement de la concurrence au service des consommateurs, en vigeur depuis juin 2008. Bhttp://www.legifrance.gouv.fr/ affichTexte.do?cidTexte=JORFTEXT000017785995 Pour vous aider rdiger ces conditions, la Chambre de commerce et de lindustrie de Paris propose un contrat type de commerce lectronique, tlchargeable ladresse suivante : Bhttp://www.etudes.ccip.fr/dossier/13-commerce-electronique

Figure 761 Liste des CGV

Le Nom de la condition est quelconque. La condition doit avoir son Statut activ pour apparatre. Son contenu peut tre du HTML ou du texte brut, vous avez donc le choix pour laffichage. Le contenu de la condition est compos du Texte et du Texte de la case cocher qui apparatra ct de celle-ci (par exemple : Je valide ). Comme ce texte peut tre trs long, vous pouvez indiquer une Hauteur du contenu en nombre de pixels (40 px, par exemple). Cela limitera la taille du bloc o safficheront ces conditions. Enfin, si votre site est bilingue, il vous est bien sr conseill de traduire vos conditions en choisissant une Vue magasin approprie. Enregistrez la condition, vrifiez que les CGV sont actives dans le menu Systme>Configuration>Ventes>Rgler mes achats>Options de rglement> Activer les CGV et observez le rsultat lors dun achat. Le texte apparat sous le total des achats dans le panier, accompagn dune case cocher. Cette case doit tre imprativement coche pour que la commande soit envoye.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

155

7 Mettre en place sa boutique

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 762

Proprits dune nouvelle condition

Figure 763

Demande de validation des CGV lors de lachat

Optimiser le rfrencement de votre boutique via les URL


Comme nous en avons dj parl plusieurs reprises, la qualit du rfrencement dun site est sa propension apparatre bien class parmi les rsultats dune recherche utile dans un moteur de recherche (Google, 156
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Bing, etc.). lvidence, avoir un rfrencement de bonne qualit est essentiel pour le dveloppement dun commerce en ligne, car cest par l quil gagnera en visibilit.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

CULTURE Et Bing !
Bing, le moteur de recherche mis au point par Microsoft, bien que longtemps nglig pour sa mdiocre qualit, a t rcemment complt et amlior par le systme Wolfram Alpha. Son utilisation tant faible mais croissante, il est utile de se soucier de lapparition de votre boutique dans ses rsultats. Mais pas dinquitude, les techniques de rfrencement sont peu ou prou identiques celles valables pour Google.

CULTURE Techniques de rfrencement


Une trs grande majorit des recherches sur le Web sont ralises en France avec Google. Un bon rfrencement auprs de Google est difficile, car la formule exacte de son indexation et de son classement est complexe et secrte. Voici cependant quelques techniques prouves qui peuvent contribuer amliorer votre rfrencement : avoir un site accessible et valide du point de vue des standards HTML du W3C ; disposer dun grand nombre de liens depuis dautres sites vers votre site, en particulier des sites qui sont galement bien rfrencs ; il existe plusieurs mthodes pour obtenir ce genre de liens (cross-linking ou change de liens, linkbaiting ou pche aux liens en veillant lintrt des autres sites... et mme le spam par les liens, qui est une technique rprouve par Google et qui risque au final de vous nuire plus que de vous rapporter !) ; prsenter des pages claires, avec des titres bien dfinis (balises h1, h2, etc.), des contenu textuels bien rdigs et intressants ; renseigner pour chaque page la balise title et les balises mta keywords et description de faon correcte et varie dune page lautre ; proposer pour chaque page une URL claire (et non remplie de chiffres et autres signes incomprhensibles par lhomme), contenant les motscls ; mettre disposition un plan du site ; viter les pages multiples ayant le mme contenu, considres comme de la fraude au rfrencement et pnalises comme telle ; avoir eu la visite et lapprobation dun visiteur employ de Google (quelques centaines sont affects cette tche) ; ne pas avoir dantcdents de fraude connus. Pour rappel, nous vous conseillons les deux ouvrages suivants : R O. Andrieu, Russir son rfrencement web , 2e dition, Eyrolles, 2009. R I. Canivet, Bien rdiger pour le Web... et amliorer son rfrencement naturel, Eyrolles, 2009.

Les URL automatiques


Parmi les lments utiles un bon rfrencement, nous venons de citer la formulation des URL. En effet, il sagit de ne pas avoir ce type dadresses : http://www.rizdumonde.fr/catalog/product/view/id/9, mais plutt celui-ci : http:// www.rizdumonde.fr/le-riz-pour-les-enfants-87-recettes.html, qui a le mrite dtre la fois dchiffrable et mmorisable par un tre humain, et de contenir des mots-cls relatifs au produit prsent sur la fiche. Heureusement, la cra-

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

157

7 Mettre en place sa boutique

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

tion dURL de qualit fait partie des fonctionnalits mises en place automatiquement par Magento, pourvu que : Apache soit configur pour la rcriture dURL (URL Rewriting) ; le fichier .htaccess la racine de Magento soit en place (cest le cas lors dune installation standard telle que celle propose au chapitre 3).

Rcrire manuellement les URL


La liste des URL cres automatiquement est accessible via le menu Catalogue>Gestion de la rcriture dURL. On y observe tous les remplacements dj raliss, dans les champs Chemin de requte (URL rcrite) et Chemin cible (URL originale).

Figure 764 Liste des rcritures dURL

Mais il est bien sr possible de rcrire manuellement une URL, afin quelle corresponde de plus prs vos attentes. Cliquez sur Ajouter une rcriture dURL. Trois types de rcriture sont disponibles, selon que la cible de lURL soit une catgorie (Pour la catgorie), un produit (Pour un produit) ou une autre page du site (Personnaliser). Choisissons par exemple une adresse Pour la catgorie, puis la catgorie dsire dans larborescence. Nous sommes alors redirigs vers la page complte de la rcriture. Le Type vient dtre choisi et le Magasin est tout simplement la vue magasin vers laquelle on se dirige. Lidentifiant du chemin (ID chemin) et le Chemin cible correspondent aux rpertoires de la catgorie choisie, tandis que le Chemin de requte est celui que saisira le visiteur dans son navigateur. La Description nest pas utile. Enfin, pour ce qui est du type de redirection (Rediriger), vous pouvez choisir parmi les alternatives suivantes : 158
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 765

Nouvelle rcriture dURL

Non : lutilisateur reste ladresse choisie, et voit la catgorie

demande. Cest gnralement la bonne solution. Temporaire (302) : rponse HTTP spciale indiquant au navigateur de changer de page pour celle indique. Lorsque le navigateur du visiteur reoit cette rponse, lURL change automatiquement dans la barre dadresse, et il voit la catgorie demande. Permanente (301) : mme rsultat, mais lors des prochaines visites le navigateur se dirigera directement vers la cible. Sauvegardez et testez lURL cre, savoir le Chemin de requte.

CONSEIL Pourquoi utiliser les redirections ?


Lutilit principale des redirections est de maintenir une adresse dont la page a disparu, afin que les moteurs de recherche, et ceux qui avaient enregistr un marque-page, ne soient pas perdus.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

159

7 Mettre en place sa boutique

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

user 177 at Thu Nov 11 07:36:42 +0100 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Grer les ventes

8
SOMMAIRE

B Devises et taux de change

Une fois la boutique mise en place, il reste configurer le processus de vente en ligne : devises, paiements, taxes, facturation, livraison... Toutes les tapes suivies par vos clients lorsquils valident leur panier, sont paramtrables souhait. Cartes bancaires, livraison postale et monnaies sont choisir. De lajout au panier par le client jusqu la validation de la commande et lexpdition par le gestionnaire du site, dcouvrez toutes les possibilits offertes par Magento !

B Les clients et leurs groupes B Calcul des taxes B Modes de livraison


et de paiement

B Administration des commandes


MOTS-CLS

B commande B facture B expdition B frais de port B remboursement B TVA B tableau de bord

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Nul ne sera surpris dapprendre que la gestion de ltape dachat est essentielle dans la russite dun projet e-commerce. Toutes les actions effectues par le client lors de ce processus devront tre configures par ladministrateur, qui devra ensuite traiter les commandes pour les honorer.

Le processus complet dachat


Pour commencer, voici lensemble des actions qui composent le processus dachat, de lajout dun produit au panier jusqu la rception de la commande par le client : 1 Le client ajoute des produits son panier, en choisissant parmi les diffrentes options, le cas chant. 2 Le systme enregistre le panier. 3 Le client demande rgler ses achats (validation du panier). 4 Le client se connecte, cre un compte ou indique quil commande comme simple visiteur (si vous avez autoris cette possibilit). 5 Le client indique ladresse de facturation, puis ladresse de livraison, si elle est diffrente. 6 Le systme calcule les types de livraisons autoriss, et leurs prix. 7 Le client choisit un type de livraison. 8 Le systme calcule les types de paiement autoriss. 9 Le client choisit un type de paiement. 10 Le client vrifie lensemble des informations, valide les CGV et passe la commande. 11 Le client effectue les actions immdiates de paiement en consquence (noter ladresse pour un chque, payer directement en ligne pour une carte bancaire). 12 Le client est renvoy au site principal. Il peut alors faire de nouvelles commandes, consulter ses informations, etc. 13 Le gestionnaire valide la commande et la facture. 14 Le gestionnaire expdie la commande.

Devises et taux de change


En fonction de la cible de votre activit commerciale, il est ventuellement possible de proposer sur votre boutique le paiement en diffrentes devises (ou monnaies). Lune dentre elles sera alors la devise principale, 162
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

et les autres sy rfreront systmatiquement, via un taux de conversion (par exemple : 1 euro pour 1,4150 dollars amricains). Lors de lachat, selon la devise et les taux choisis, le client sacquittera dune certaine somme, dans la devise quil aura slectionne.

Configurer les devises


Les devises doivent tout dabord avoir t choisies lors de ltape de configuration du systme Magento : Systme>Configuration>Gnral>Paramtrage des devises. Sur la page de configuration, vous devez choisir en premier lieu votre Devise de base. Cest partir de cette devise que les autres seront calcules, et cest cette devise qui sera utilise par dfaut pour afficher les prix dans le catalogue et pour le paiement en ligne. Habituellement, cela correspond la devise du pays du marchand.

Figure 81

Options de configuration des devises

On vous propose ensuite une seconde devise, Devise affiche par dfaut. Cela permet notamment de modifier la devise daffichage dans le catalogue pour une vue particulire, qui correspondrait un pays spcifique. Enfin, les Devises autorises sont les autres devises disposition du client. Choisissez par exemple, en plus de leuro (EUR), le dollar amricain (USD). Un paramtre supplmentaire permet, pour des raisons de diffrences dusage dans certaines parties de lEurope, de Supprimer lespace du symbole de devise (lors de laffichage). Ajoutez une devise, sauvegardez et testez cette premire fonctionnalit sur le site public : le client peut, au moyen dun menu droulant, choisir
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

163

8 Grer les ventes

Magento

soit leuro, soit le dollar des tats-Unis. Il voit alors tous les prix dans la devise slectionne.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 82

Choix de la devise pour le client

Fixer les taux de change


EN SAVOIR PLUS
Webservicex et les taux de change
Pour savoir comment ces taux sont obtenus et avec quelle rgularit, voir le site officiel de Webservicex :
B http://www.webservicex.net

Pour fixer les taux de change, Magento fait appel un service web gratuit (WS-*), Webservicex, qui propose la mise jour automatique priodique des taux de change. Ses options de configuration se trouvent la suite des prcdentes concernant les devises.

Figure 83

Paramtres de Webservicex

Une fois le service Activ, vous pouvez indiquer notamment sa Frquence de mise jour, et paramtrer le-mail envoyer en cas derreur. Ce systme met jour un tableau de correspondances disponible dans le menu Systme>Grer les taux des devises.

Figure 84

Gestion des taux des devises

Les devises choisies y apparaissent, et vous avez la possibilit dindiquer librement les taux de change entre les unes et les autres. gauche apparat la monnaie de base (ici, leuro EUR), ensuite les taux en corres164
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

pondance avec leur valeur tablie en fonction de la monnaie de base (ici, le dirham marocain MAD - et le dollar amricain USD). Le bouton Importer permet de bnficier immdiatement du service web, sans attendre sa mise jour priodique. Les valeurs rcupres sont alors affiches automatiquement dans les cases en remplacement des prcdentes.

SAVOIR Choisir ses taux


Vous tes libre dappliquer le taux que vous voulez, ou de refuser des monnaies qui ne vous conviennent pas. Veillez simplement ce que vos clients ne soient pas tromps lors de la confirmation de lachat.

Figure 85

Valeurs compltes par Webservicex

Grer sa clientle
En tant que bon commerant, vos clients doivent tre au cur de vos proccupations. Magento propose plusieurs fonctions intressantes de gestion de la clientle : visualisation des clients en ligne, traitement des informations renseignes par le client lors de son inscription, constitution de groupes de clients privilgis pour leur faire bnficier de certains avantages ou encore traitement des commandes par tlphone.

Voir les clients en ligne


Comme nous lavons vu dans le chapitre 5 au sujet de la configuration des options sappliquant aux clients, le client est considr comme tant encore en ligne un certain temps aprs avoir effectu une action (dure fixe dans le champ Intervalle en minutes du menu Clients>Configuration clients). Par dfaut, cette dure est fixe quinze minutes. Sur ce principe, vous pouvez visualiser la liste grce la fonction Clients>Clients en ligne. Cela peut donc vous donner une indication de la frquentation de votre site, mais aucune autre action nest possible depuis ce menu.

Figure 86

Liste des clients en ligne au moment de la consultation Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

165

8 Grer les ventes

Magento

Constituer des groupes de clients


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Afin de faciliter la gestion de la clientle, Magento permet la constitution de groupes de clients. Chaque client appartient ainsi un groupe au moins, et vous pouvez bien entendu modifier ces groupes. Vous pouvez par exemple utiliser ces groupes pour faire des rductions auprs de privilgis (clients VIP), comme cela est expliqu au chapitre 7, section Grer les promotions , ou appliquer diffrentes conditions de vente sil sagit de vente en gros (wholesale) ou au dtail (retail).
RAPPEL Autoriser les achats en tant que simple visiteur
Pour autoriser vos visiteurs acheter sans s'identifier, modifiez loption telle quindiqu la section Les options du menu ventes du chapitre 6.

Le menu Clients>Groupes de clients vous propose la liste des groupes de clients existants. Un de ces groupes (1 General) accueille tous les clients qui viennent de sinscrire. Le groupe 0 Not logged in est le groupe des clients non authentifis (les acheteurs visiteurs, si vous les avez autoriss). Enfin, chaque groupe peut tre associ une Classe de TVA (voir section suivante).

Figure 87

Les groupes de clients

Informations sur les clients


ASTUCE Exporter la liste des clients
Le bouton Exporter vous permet dobtenir un fichier CSV (Comma Separated Values), format de donnes tabulaires, ou un fichier XML pour utiliser la liste des clients dans une autre application.

Le menu Clients>Grer les clients propose la liste de tous les clients. Pour chaque client, un certain nombre dinformations sont disponibles, telles ses coordonnes, ses dates de connexion, sa langue, ses dernires commandes, etc. Vous avez accs toutes les fonctionnalits dont dispose le client lui-mme via le site public (changer le mot de passe, visualiser les dernires commandes, etc.).

Figure 88

La liste des clients

166
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 89 Informations propos dun client

Crer un client pour une commande par tlphone


Afin de raliser une commande indirecte (par exemple, auprs dun client par tlphone), vous pouvez crer un nouveau client, en faisant usage du bouton Ajouter un nouveau client sur la page Grer les clients, ou crer une nouvelle commande pour un client existant (bouton Crer une commande sur la fiche du client). Une fois la commande indirecte cre, elle nest pas diffrente dune commande quun client aurait pass luimme depuis le site public. 1 Une fois votre nouveau client et la nouvelle commande crs, vous vous retrouvez sur une page vous proposant de choisir un magasin et une vue magasin. Toutes les informations de la commande sont accessibles. gauche, les donnes issues de lutilisateur rel sont affiches (si lui-mme a commenc un panier, par exemple).
SAVOIR Magento en tant que simple logiciel de traitement de commandes
Il est tout fait possible dutiliser Magento uniquement pour des commandes indirectes, par exemple en tant que logiciel isol sur un ordinateur derrire un comptoir de magasin rel. Dans ce cas, bien sr, toute la partie concernant lapparence du chapitre 10, notamment, vous est inutile.

Figure 810

Choix dune vue magasin pour une nouvelle commande

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

167

8 Grer les ventes

Magento

2 Commencez par choisir une devise, puis ajoutez des produits et leurs

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

quantits. Pour trouver des produits, vous pouvez utiliser les filtres classiques. Pour slectionner un produit, cochez la case droite et indiquez une quantit (suprieure ou gale 1), puis terminez par Ajouter les produits slectionns la commande.

Figure 811

Choix de la devise pour la nouvelle commande

Figure 812

Slection des produits ajouter

3 Un rcapitulatif de la commande saffiche alors. Si besoin, vous

pouvez choisir un autre groupe de clients que celui indiqu par dfaut, ainsi quune adresse e-mail et des adresses physiques diffrentes, ou encore indiquer un code de rduction.

Figure 813

Bilan de la commande, avant le processus dachat

168
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

4 Choisissez ensuite (en dessous) un Mode de paiement, et demandez

Rcuprer les modes de livraison et les taux, afin de proposer ceux-ci, parmi ceux disponibles en fonction des produits et adresses indiqus.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 814

Terminer la commande

Vous pouvez alors Envoyer la commande, qui se comporte ensuite comme toute autre commande, que ce soit au niveau de la facturation, de la livraison ou des rapports danalyse.

Dfinir les taxes


Le systme de taxes de Magento est assez complexe. Lobjectif est de permettre de dterminer la TVA en fonction du client (selon son territoire dorigine) et du produit (pour certains produits, le taux peut tre rduit). chaque produit est associe une classe de taxe produit. Chaque client fait partie dun groupe de clients et chaque groupe de clients est associ une classe de taxe client. Une TVA produit et une TVA client sont associes une adresse de facturation pour obtenir un taux.
T TVA

La taxe sur la valeur ajoute ou TVA est un impt indirect sur la consommation, conue pour ne toucher que le consommateur final (et non les revendeurs intermdiaires). Franaise lorigine, elle a t ensuite t adopte dans de nombreux pays, notamment dans lUnion europenne. Son montant est fix par ltat et il est proportionnel au prix de vente (pourcentage). En matire de prix, on parle de prix hors taxe (HT) et de prix toutes taxes comprises (TTC). Dans lUnion europenne, ces taux slvent de 15 % (Chypre) 25 % (Danemark). En France, il est de 19,6 %, avec certaines rductions exceptionnelles pour certains produits (5,5 % sur le livre et les exceptions cul-

turelles, par exemple, ou 2,1 % pour la presse et certaines billetteries de thtre). Il existe galement des taux rduits pour les rsidents corses et des DOM-TOM. En Belgique, la TVA est de 21 %, avec des taux rduits 12 % et 6 %. En Suisse, le taux normal est de 7,6 % tandis que le taux rduit est 2,4 %. Pour retrouver toutes les informations sur la TVA, jour :
B http://www.eic.ccip.fr/informations/tva/tva5.htm B http://www.eurotax.fr

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

169

8 Grer les ventes

Magento

Les classes de taxe produit


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les classes de taxe produit peuvent tre obtenues par le menu Ventes>TVA>Classes de taxe produit. On obtient alors une liste en anglais, que nous pouvons franciser. Cliquez par exemple sur Taxable goods pour le transformer en TVA normale et sur Shipping pour le traduire en Livraison. Chaque classe de taxe produit nest compose ici que dun nom. Ajoutons enfin une classe TVA rduite, au moyen du bouton Add.

Figure 815

Cration dune nouvelle classe de taxe

Figure 816

Rsultat de nos crations

Lors de sa cration, chaque produit devrait tre soigneusement affect une classe de taxe produit (voir le chapitre 7).

Les classes de taxe client


Lutilit davoir plusieurs classes de taxe client est marginale. Cela peut cependant servir dans le cas o le client bnficie dune exonration ou dune rduction de TVA. Les classes de taxe client peuvent tre obtenues par le menu Ventes>TVA>Classes de taxe client. On y observe une seule classe de taxe client, qui a dj t applique tous nos groupes de clients (voir section prcdente). Nous nous contenterons ici de renommer cette classe de la mme manire que les classes de taxe produit, en Client gnral .

170
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 817

Liste des classes de taxe client

Les taux de TVA en fonction des zones de taxe


Une zone de taxe associe un emplacement gographique, plus ou moins prcis, un taux (cest--dire un chiffre en pourcentage). Les zones de taxe sont accessibles par le menu Ventes>TVA>Grer les zones de taxes et les taux. On y voit en exemple les taux appliqus pour les tats de New York (NY ) et de Californie (CA) aux tats-Unis. Ajoutons les taux concernant la France, pour commencer. Cliquez sur Ajouter un taux de TVA.

Figure 818

Les zones de taxe

Figure 819

Formulaire de cration dun taux de TVA

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

171

8 Grer les ventes

Magento

LIdentifiant de taxe est un intitul quelconque. Il lui sera adjoint les

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

CULTURE Taxe en fonction du code postal ?


Dans certains pays, en particulier aux tats-Unis, la TVA est fixe par les rgions, comts ou municipalits. Pour certaines zones, il existe mme des exemptions compltes. Par exemple, en Corse, le taux rduit nest pas de 5,5 % mais de 2,1 %.

Titres de taxe, cest--dire le nom de la taxe intelligible pour le client, en vue de laffichage sur les diffrentes vues magasin (TVA en franais, VAT en anglais, par exemple). La zone gographique laquelle sapplique cette taxe peut tre dtaille suivant le Pays, voire ltat, la Rgion ou le Dpartement (suivant le pays), voire le Code postal. Une toile signifie tout . Enfin, indiquez le Taux proprement dit (il sagit dun pourcentage ; pour un dcimal, utilisez le point, comme le veut lusage anglo-saxon, et non la virgule). Crez de mme le taux rduit de 5,5 % (pour la France, toujours). Voici le rsultat final.

Figure 820 Liste des taux de TVA courants pour une boutique franaise

Les rgles de taxes


Pour clore cette partie, les rgles de taxes associent les donnes prcdentes pour calculer les taxes qui devront tre payes lors de lachat. Pour afficher les rgles, rendez-vous dans le menu Ventes>TVA>Grer les rgles de taxes. Notez que laffichage est incomplet, les classes napparaissant pas.

Figure 821

Liste des rgles de taxes originelles

Nous allons maintenant ajouter deux rgles de taxes pour la France, partir des deux taux indiqus prcdemment.

172
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

1 Cliquez sur le bouton Ajouter une rgle de TVA. 2 Entrez un Nom de rgle, puis associez votre seule Classe de TVA clients
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

avec les deux premires Classes de TVA produits.

Figure 822

Cration dune nouvelle rgle de TVA

SAVOIR Et si plusieurs taxes


sappliquent ?
Si plusieurs taxes sappliquaient un mme achat, la priorit donne serait alors prise en compte dans le calcul. Toutes les taxes seraient appliques, additionnes en cas de mme priorit, appliques les unes aprs les autres, le cas chant.

3 Associez tout cela le Taux de TVA normal. tant donn que vous

naurez gnralement pas de recoupement, la Priorit et lOrdre de tri ne vous sont pas utiles.

Figure 823 Choix pour une rgle de TVA du taux, de la priorit et de lordre

4 Enfin, crez de manire similaire une rgle pour le taux rduit.

Bravo ! Vous avez termin la mise en place des taxes.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

173

8 Grer les ventes

Magento

ASTUCE Importer et exporter les rgles


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Les rgles tant longues mettre en place, si vous destinez vos ventes un grand nombre de pays, le menu Ventes>TVA>Importer/exporter les taux de TVA vous mne deux actions symtriques : exporter les rgles dj cres pour pouvoir les copier en les modifiant, puis les rimporter. Limportation comme lexportation ne se font que sur lensemble des rgles.

Figure 824 Formulaire dimportation et dexportation des rgles de taxes

Le format est encore une fois le CSV. Voici un exemple correspondant nos manipulations prcdentes (les dernires colonnes correspondent aux noms des langues) :
"Code", "Pays", "tat/Rgion/Dpartement", "Code postal", "Taux", "default", "recettesfr", "en" "19.6 - tva normale","FR","*","*","19.6000","TVA","","VAT" "5.5 - TVA rduite","FR","*","*","5.5000","TVA rduite","","VAT limited" "US-CA-*-Rate 1","US","CA","*","8.2500","","","" "US-NY-*-Rate 1","US","NY","*","8.3750","","",""

Laffichage des taxes et leurs options


Lors de la visite ou du paiement, laffichage des prix peut tre ralis avec ou sans les taxes. Ceci est dtermin dans les options de la configuration : Systme>Configuration>TVA et autres taxes. En particulier, il est possible dy indiquer quel est le pays suppos (et donc ses rgles de TVA) du visiteur non authentifi (Estimation de calcul de la taxe par dfaut>Pays par dfaut), ou de configurer laffichage des prix dans les factures (Paramtres daffichage des commandes, factures, avoirs>Afficher les prix : HT, TTC, HT et TTC). Lune de ces options doit tre choisie en correspondance avec le pays du sige de lentreprise : il sagit de lapplication des taxes sur le total, ou sur chacun des produits (Paramtres de calcul>Mthode de calcul de la taxe base sur). Un arrondi sera en effet ralis aprs lapplication de la taxe, donc sur chaque produit, si vous choisissez Prix unitaire ou linverse, la fin, si vous choisissez Total. En France, cest bien cette seconde solution quimpose la loi (mme si la diffrence nest souvent que dun centime).

174
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Modes de livraison et frais de port


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Le client va pouvoir choisir, pendant lachat, le mode de livraison parmi ceux disponibles, cest--dire ceux qui seront activs et acceptables pour ladresse de livraison indique. Il devra en slectionner un, en fonction du prix et du mode lui-mme (associ un temps de livraison, une assurance...). Ladministrateur doit donc prparer, en fonction des pays quil a autoriss, des rgles de livraison. Les modes de livraison se configurent via le menu Systme>Configuration>Ventes>Modes de livraison. La liste de tous les modes de livraison disponibles saffiche alors. Les derniers modes de livraison de cette liste (UPS, USPS, FedEx et DHL) sont spcifiques des transporteurs, et ne seront pas vus dans le dtail ici. Par contre, les trois premiers, Tarif unique, Tarification et Livraison gratuite sont particulirement intressants. Cliquez sur un mode pour le paramtrer.

SAVOIR Modes de livraison disponibles


Un certain nombre de modes de livraison parmi les plus courants sont disponibles, dautres (tels les colis, en France) seront prsents comme exemple dextension dans lannexe A.

Figure 825

Modes de livraison disponibles

Points communs entre tous les modes


Les modes de livraison ont certains paramtres communs : Le mode peut tre Activ ou non. Sil est activ, encore faut-il quil le soit en fonction des Pays slectionns, voire quil soit Propos pour tous les pays. Le Titre est lintitul du mode qui est affich au client. Le Nom de mthode est un dtail technique. Le Message derreur affich le sera sil y a effectivement une erreur (cas inhabituel). LOrdre de tri correspond lordre daffichage pour le client.
CONSEIL Ordonner les modes de livraison
en fonction de leur prix
Si plusieurs modes de livraison sont disponibles, lhabitude, pour que les clients sy retrouvent, est de les ordonner en fonction de leur prix moyen. Par exemple, la livraison en Colissimo avant la livraison en Chronopost ou en DHL.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

175

8 Grer les ventes

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 826

Paramtres communs des modes de livraison

Le mode Tarif unique


Le calcul du tarif unique est bas sur deux lments. Tout dabord, le Prix, fix par article ou en tout. Ensuite, on donne un second tarif, la Valeur des frais de traitement, fixe ou en pourcentage de la commande totale. Chaque marchand peut ainsi reporter sur le client ce quil estime tre le cot en interne de la livraison (temps, emballage...). Dans lexemple ci-aprs, les frais de transport pour deux articles de 100 seraient de 2 5 + 5/100 200 = 12,5 .

Figure 827

Paramtres pour le tarif unique de livraison

Le mode Tarification
Trois modes de fonctionnement sont disponibles pour les frais par tarification. En plus de frais de traitement fixes ou en pourcentage, vous pouvez indiquer un cot en fonction dune condition de calcul parmi celles-ci, au choix : poids et destination ; prix et destination ; nombre darticles et destination.

176
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ces donnes ne peuvent pas tre entres globalement, mais pour un site. Activez ce mode, choisissez par exemple Poids et destination, et allez (liste droulante en haut gauche) sur le site en question.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 828

Paramtres du mode par tarification, une fois un site choisi

Vous pouvez alors prparer un fichier au format CSV et limporter.


Exemple de fichier CSV spcifiant les frais de port en fonction du poids
"Pays","Rgion/tat","Code postal","Poids (et au-del)","Prix de transport" "France","*","*",0,4 De 0 0.05 kg, les frais de port sont de 4 . "France","*","*",.05,4.55 De 0,05 0,25 kg, les frais de port sont de 4,55 . "France","*","*",.25,6.18 De 0,25 0,45 kg, les frais de port sont de 6,18 . "France","*","*",.45,7.14 De 0,45 1 kg, les frais de port sont de 7,14 . "France","*","*",1,11.20 Au-del de 1 kg, les frais de port sont de 11,20 .

tout moment, vous pouvez diter ces donnes : exportez-les, modifiez le fichier CSV, et importez-les de nouveau.

Le mode Livraison gratuite


Cette mthode propose tout simplement une livraison gratuite partir dune certaine valeur de commande.

Modes de paiement
la fin de lachat, le client va choisir une mthode de paiement parmi celles autorises pour sa localisation et la valeur totale de sa commande. Ladministrateur doit donc prparer, en fonction des pays quil a autoriss, des systmes de paiement utiles. Un certain nombre de modes sont disponibles par dfaut dans Magento, dautres seront prsents comme exemples dextension lannexe A, notamment les systmes franais de paiement par carte bancaire. Vous pouvez tout fait ne proposer quun
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

177

8 Grer les ventes

Magento

seul mode de paiement, mais varier les modes de paiement vous permettra de ne pas vous aliner une partie de la clientle.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les modes de paiement se configurent via le menu Systme>Configuration>Ventes>Modes de livraison. Dans la liste propose, vous trouverez tous les modes disponibles par dfaut.

Figure 829

Configurer le mode de paiement

Chaque pays a ses habitudes, et certains systmes sont tout fait dpendants de la rgion o se situe votre commerce. Les derniers lments de cette liste (PayPal, Amazon Simple Pay et Checkout, Authorize.net) sont associs des systmes dintermdiaires de ventes qui vous fourniront directement les mthodes de configuration. Les quatre premiers modes sont dtaills ci-aprs.
CONSEIL PayPal et autres
intermdiaires de paiement
Les systmes de paiement qui dpendent de mcanismes tiers, tel PayPal, sont plus ou moins intressants en fonction de votre clientle cible. En effet, les cots sont reports sur le vendeur par des commissions qui peuvent tre trs leves.
B http://www.paypal.fr B http://www.authorize.net B https://payments.amazon.com

Sauf si le mode de paiement le permet ( voir au cas par cas pour les modules de paiement par carte bancaire), ce qui nest presque jamais le cas, on ne peut pas indiquer quun mode de paiement particulier apporte un cot supplmentaire (sauf en passant par le systme de promotions , voir la section ddie au chapitre 7).

Points communs entre les diffrents modes de paiement


Comme pour les modes de livraison, tous les modes de paiement ont certains paramtres communs : Le mode peut tre activ ou non. Sil est Activ, encore faut-il quil le soit en fonction des Pays slectionns, voire quil soit Propos pour tous les pays. Le Titre est lintitul qui sera affich au client, tandis que lOrdre de tri est lordre daffichage pour le client.

178
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Le Statut dune nouvelle commande permet dindiquer, suivant la

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

faon de payer, la commande comme tant En attente (pour un paiement par chque ou virement) ou directement En cours de traitement (pour un paiement par carte bancaire par exemple).

Figure 830

Configuration commune tous les modes de paiement

Paiement par carte enregistre


Le paiement par Carte de paiement enregistre consiste enregistrer sur le serveur de Magento le numro de carte bancaire du client, afin que ladministrateur ralise ensuite la transaction et active la commande. Ce systme est dangereux, une intrusion dans votre systme pouvant avoir des consquences catastrophiques. Il est trs rare en France.

Figure 831

Choix des cartes de paiement

ASTUCE Rglement dun sous-total nul


Le mode de paiement intitul Rglement dun sous-total nul peut vous paratre bien trange... En effet, si le sous-total de la commande est nul, il ny a pas de paiement. Ce genre de situations peut se produire si vous mettez en place un produit spcial, par exemple une offre de type Recevez notre catalogue gratuit ! .

Il est possible de nautoriser que certains Types de cartes de paiement. De plus, le systme peut procder une Vrification de carte de paiement, permettant de vrifier que le numro entr nest pas dj celui dun client
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

179

8 Grer les ventes

Magento

adhrent. Il sagit dun mcanisme de scurit basique, mais cest un premier pas. Ensuite, le gestionnaire lui-mme devra procder au paiement sur un systme bancaire hors de Magento, partir de ce numro.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Paiement par chque, mandat ou virement


Le mode Chque/mandat correspond aux moyens de paiement traditionnels par chque, mandat postal ou virement bancaire. Il faut indiquer ici les informations ncessaires au client, le Chque libell lordre de (ou coordonnes bancaires comme on les trouve sur un RIB, pour un virement) et ladresse denvoi du chque. Il est possible aussi de limiter cette mthode entre un Montant mini de commande et un Montant maxi de commande.

Figure 832

Paramtres pour les chques et mandats

Paiement par bon de commande


Quant au mode intitul Bon de commande, il fonctionne de manire similaire au prcdent. Il permet au client dindiquer un numro de commande, librement, le commerant validant alors la commande si cest bien lui qui a mis ce numro (par exemple, par un avoir prcdent).
LINTRIEUR Relations entre documents
Chaque facture est associe une et une seule commande, de mme que chaque expdition et chaque remboursement. Un paiement en plusieurs fois ne sera ventuellement disponible que par lorganisme bancaire auquel vous tes associ, Magento ne fournissant rien ce sujet. ce jour, il nexiste pas dextension cet effet, pour la France.

Administrer les commandes


Une fois la commande valide par le client, ladministrateur (ou ses dlgus) la reoit et devra la traiter. Cette phase de traitement inclut quatre tapes intressantes connatre, chacune dentre elles tant matrialise par un document : les commandes, les factures, les expditions et les remboursements.

180
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Traiter les commandes


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Atteignez la liste des commandes passes par le menu Ventes>Commandes. Comme nous lavons expliqu en dbut de chapitre, il est possible de crer de nouvelles commandes. Observez une commande existante en cliquant dessus.

Figure 833 Liste des commandes

Figure 834 Commande dj passe

Le premier onglet Information prsente la commande. Il est possible de la modifier (diter), de la Bloquer (une commande bloque ne peut plus tre poursuivie comme nous lexpliquons ci-aprs), lui crer sa facture (Invoice), lancer son expdition (Expdier), ou la Renouveler. En bas de la page, suivant les documents dj produits et ltat actuel, il est possible de changer ltat de la commande (cre, en attente, complte, termine, annule, bloque). Vous pouvez alors aussi laisser un
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

181

8 Grer les ventes

Magento

commentaire (pour vous-mme, plus tard), et envoyer un courriel au client. Lhistorique de ces volutions, automatiques ou manuelles, apparat en bas, et dans longlet Historiques de commentaires.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 835

tat dune commande et commentaire associ

Les onglets Factures, Remboursements et Expditions permettent daccder aux diffrents documents qui ont pu tre produits pour cette commande. Sur notre exemple, on voit quaucune facture nexiste pour cette commande.

Figure 836

Factures dune nouvelle commande

Produire des factures


Une facture peut tre produite partir dune commande. Cliquez pour cela sur le bouton Invoice (facture, en anglais). La facture produite est trs dtaille, indiquant les produits, leurs valeurs, les coordonnes du vendeur et du client et les informations de taxe, de livraison et de paiement. En bas, un bouton permet de la valider. Indiquez ventuellement un commentaire, et cliquez sur Submit Invoice. La facture peut maintenant tre retrouve dans la commande, ou dans la liste des factures, accessible par le menu Ventes>Factures. Le statut de la commande est pass de En cours de traitement Pay . La facture peut tre imprime par le client ou ladministrateur sous forme de fichier PDF. 182
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 837 Informations sur la facture

Figure 838 Formulaire de validation de la facture

Figure 839 Liste des factures

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

183

8 Grer les ventes

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 840 PDF issu dune facture

Prparer les expditions


Une expdition, ou plus exactement un bordereau dexpdition est produit lui aussi partir dune commande. Cliquez sur le bouton Expdier. Sur le bordereau dexpdition prpar, une zone permet dajouter le numro de suivi qui vous sera fourni par votre transporteur.

Figure 841

Saisie du numro de suivi

Si vous ne faites quune livraison partielle, vous trouvez en bas du formulaire un rsum qui vous permet de le signaler. En dessous, vous pouvez commenter cette expdition et la valider. Envoyer en mme temps un courriel au client peut tre une bonne ide. Validez lexpdition. Elle peut maintenant tre retrouve dans la commande, ou dans la liste des expditions, accessible par le menu Ventes>Expditions. Bien sr, prenez en charge lexpdition relle, sans quoi ce document naurait aucun sens ! La commande a maintenant pour statut Termine . Il est possible, pour le client comme pour ladministrateur, dimprimer le bordereau, Magento permettant de le gnrer en PDF. 184
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 842 Formulaire de validation dune expdition

Figure 843 Liste des expditions

Figure 844 PDF dun bordereau dexpdition

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

185

8 Grer les ventes

Magento

SAVOIR Pas de remboursement


par la banque

Grer les remboursements


Selon les conditions gnrales de vente et dutilisation que vous aurez fixes, en cas de rclamation du client ou pour toute autre raison, une commande en cours de traitement ou termine peut tre rembourse. Rendez-vous dans la liste des commandes, slectionnez la commande, et observez que presque tous les boutons ont disparu, sauf Remboursement et Renouveler la commande.

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Si vous utilisez un systme bancaire, Magento ne contactera pas la banque pour demander le remboursement rel associ, cest vous de raliser cette opration sur linterface de gestion fournie par la banque.

Figure 845

En-tte dune commande termine

Cliquez sur Remboursement. Un document est prpar, identique une facture. La confirmation se fait au moyen du bouton Rembourser.

Figure 846 Formulaire de validation dun remboursement

Un rsum du remboursement est alors affich. Vous pouvez laisser un commentaire, ventuellement diminuer le remboursement, et cliquer sur le bouton Rembourser. La figure 8-47 prsente ltat de la commande, aprs toutes nos manipulations (elle a conserv son statut Termine ).

Figure 847

Totaux dune commande rembourse

186
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Retrouvez tous les remboursements via le menu Ventes>Remboursements. Les remboursements nont quun seul statut, Rembours . Et comme pour les factures et bordereaux, un document PDF est produit.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 848 Liste des remboursements

Figure 849 Document PDF pour un remboursement

Analyser le tableau de bord des commandes


Retrouvez sur votre tableau de bord (la page daccueil administrateur) les informations propos de ces commandes. En haut, choisissez une vue magasin, ou Toutes les vues magasin pour le total.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

187

8 Grer les ventes

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 850 Tableau de bord des commandes

Quelques bilans sont disponibles gauche (total des ventes, moyenne des commandes, dernires commandes, termes recherchs, etc.) et en bas droite de lcran (meilleures ventes, produits les plus consults, nouveaux clients, etc.). En haut droite, vous trouverez des graphiques reprsentant le nombre de commandes et leur montant total sur une dure donne. La dure totale affiche est contrlable (Slectionnez une tranche).

188
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Promotion de la boutique : communiquer avec ses visiteurs

9
SOMMAIRE

B Les avis sur les produits

Communiquer avec ses clients internautes va bien au-del de lachat et de la livraison. Adapt aux modes participatifs actuels de consultation du Web, Magento vous donne les moyens de connatre et de satisfaire votre visiteur tout point de vue, et ainsi de promouvoir du mieux possible votre boutique.

B Grer les mots-cls B Amliorer la recherche interne B Publier une newsletter B Mieux connatre sa clientle :
les rapports ou tats

B Services web
MOTS-CLS

B visiteur B commentaire B notation B tag B recherche B newsletter B rapport B tat

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Ce dernier chapitre consacr aux manipulations dadministration couvre la relation entre les clients ou simples visiteurs du site et vous-mme, administrateur du site marchand. Elle vient complter les lments dj abords dans le chapitre 6, au sujet de la publication de contenus sur votre site, avec la mise au point de sondages, notamment. Un cas part porte sur lutilisation des donnes du site par une application tierce via un service web, traite dans la dernire section de ce chapitre. Enfin, sortant un peu du cadre de la promotion en tant que telle, lune des sections est consacre aux diffrents rapports pouvant vous aider dans les dcisions stratgiques. En effet, le meilleur moyen de satisfaire votre clientle nest-il pas de commencer par mieux la connatre ?

Autoriser les avis sur les produits


Magento offre une fonction prcieuse qui permet aux utilisateurs de donner leur avis propos des produits mis en ligne dans la boutique. Ceci peut prendre la forme dune note sur un critre donn (qualit, prix, etc.) ou dun commentaire en texte libre. Il appartient ensuite ladministrateur de valider ces avis (ou non).

Configurer les notations


CONSEIL Laissez votre client sexprimer !
Si aucune notation nest active, les commentaires ne seront pas disponibles. Nhsitez donc pas activer un seul type de notation, mme vague (appelez-le Apprciation , par exemple), afin que la zone de texte libre qui lui est associe soit la disposition de vos visiteurs. Laisser la possibilit votre utilisateur de sexprimer est en effet une valeur ajoute indniable aux services que vous proposez.

Pour que vos visiteurs puissent sexprimer, vous devez tout dabord configurer les types de notations et de commentaires quils peuvent laisser propos des produits. La configuration seffectue via le menu Catalogue>Commentaires et notations>Grer les notations. Trois types de notations sont disponibles par dfaut, concernant la qualit (Quality), le prix (Price) et la valeur (Value) du produit. Comme elles ne sont pas actives par dfaut, il faut les paramtrer et les activer pour que la fonction de commentaire soit prsente sur le site.

Figure 91

Grer les notations

190
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Pour activer un type de notation, commencez par cliquer sur lune dentre elles (ici, Quality). Chaque notation a un nom (Libell de notation). Comme nous lavons vu de nombreuse fois, il y a plusieurs champs remplir ici, le premier tant la valeur par dfaut, et les suivants spcifiques aux vues magasin. Ici, faites en sorte que chacun dispose de sa bonne traduction. Au-dessous, la section Visibilit de classement permet de choisir les diffrentes vues magasin dans lesquelles la fonction de notation sera disponible. Slectionnez les vues dans la liste, selon leur nom et leur emplacement.

Figure 92

Modifier la notation

Sauvegardez la notation et rendez-vous maintenant sur une fiche produit sur le site public : un lien est prsent, de type Soyez le premier commenter ce produit .

Figure 93

Le lien des notations dans une page produit

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

191

9 Promotion de la boutique : communiquer avec ses visiteurs

Magento

En cliquant sur ce lien, le visiteur peut dsormais entrer un commentaire et noter le produit. Un message lui indique ensuite que son commentaire est en attente de modration avant dtre publi.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 94

Notation et rdaction dun commentaire


Figure 95

Notre commentaire, bientt accept

Modrer les commentaires


En tant quadministrateur, vous pouvez alors valider le commentaire en vous rendant dans le menu Catalogue>Commentaires et notations>Commentaires des clients>Commentaires en attente. La liste des commentaires en attente de validation est alors affiche.

Figure 96

Liste des commentaires en attente

SAVOIR Le contrleur nest pas contrl


Si vous refusez de valider un commentaire ou si vous faites des modifications sur un commentaire, son auteur ne sera pas averti de cette modration. vous de dterminer ce qui respecte lthique et les convenances de votre site.

Il est possible de visualiser lun des commentaires posts, et mme de le modifier (via le lien diter, droite). Pour le valider directement, utilisez laction Mettre jour le statut.

192
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 97

dition dun commentaire

Ldition du commentaire est alors complte. Faites simplement un changement du Statut afin de lindiquer comme Approuv, puis enregistrez. Vrifiez enfin la note dans la partie publique du site. La note apparat sous forme de petites toiles jaunes, dont le nombre correspond la qualit estime par le visiteur, et un lien renvoie au commentaire textuel.

SUIVRE... Un blog complet


Vous trouverez dans lannexe A une extension permettant dajouter votre site toutes les fonctionnalits dun blog.

Figure 98

La notation visible, sur le site public

CULTURE Les tags sur lInternet


Les tags, ces tiquettes qui permettent de catgoriser divers contenus, sont apparus avec un ensemble de technologies dites Web 2.0 , qui permettent la participation des visiteurs sur les sites web. Vous les retrouvez notamment sur les blogs, les sites de partages de photos, musique ou vido, les boutiques en ligne, et mme sur dautres sites plus classiques. En gnral, il suffit de cliquer sur lun de ces mots-cls pour accder aux contenus ainsi caractriss. Souvent, les tags sont reprsents visuellement sur le site en fonction de leur popularit au sein dun nuage de tags (tag cloud) : les tags sur lesquels les visiteurs cliquent le plus souvent sont alors reprsents plus gros que les autres.

Grer les mots-cls ou tags


Une autre fonction trs courante lheure du Web participatif est la possibilit pour les visiteurs, de faon plus ou moins libre, dajouter des tags (ou mots-cls, les deux termes coexistent, et vous trouverez soit lun, soit lautre, selon la version de Magento utilise) aux lments de contenus dun site (photos sur Flickr, morceaux de musique sur Deezer, vidos sur YouTube., etc.) Sur un site Magento, les tags sont ajouts librement aux produits par les visiteurs. Tout comme les commentaires, ils doivent tre valids par ladministrateur.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

193

9 Promotion de la boutique : communiquer avec ses visiteurs

Magento

Sur la page publique de chaque produit, les internautes peuvent proposer des tags en les inscrivant dans le champ Ajoutez des tags (ou Ajoutez des mots-cls, voir figure 9-9).
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 99

Ajout dun ou plusieurs tags

Dans linterface dadministration, vous les retrouvez ensuite dans Catalogue>Mots-cls>Mots-cls en attente. Chaque tag peut directement tre valid (ou supprim) sur cette page, en cochant les cases de gauche et en positionnant laction Modifier le statut sur Approuv.

Figure 910

Liste des tags proposs

Figure 911

Le menu de confirmation ou suppression des tags

Le nuage de tags (Tags populaires ou Mots-cls populaires) de chaque page est maintenant jour, chaque mot tant affich avec une taille correspondant labondance de son utilisation, savoir le nombre de fois o des visiteurs auront cliqu dessus.

Figure 912

Les tags populaires, sur le site public

194
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Amliorer la recherche interne


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Comme tout site qui se respecte, un site marchand conu avec Magento propose une fonctionnalit de recherche interne. Si vous proposez sur votre boutique un grand nombre de produits, les recherches de vos visiteurs seront abondantes. Il faut donc accorder la plus grande attention cette fonctionnalit. En effet, labandon dun client aprs lchec dune recherche est une vente perdue malheureusement. Il est donc conseill de raliser une observation efficace des recherches de vos clients, et de corriger votre site en consquence.

SAVOIR Les recherches depuis lextrieur


Dans certains cas, il arrive que les internautes arrivent sur votre site via des recherches de produits effectues depuis lextrieur du site, en particulier depuis un moteur de recherche. Dans ce cas, la configuration prsente dans cette section est inutile, mais cela ne vous empche pas de travailler votre rfrencement (voir notamment lapart sur les techniques de rfrencement au chapitre 7).

Analyser les recherches des visiteurs


Dans le menu Catalogue>Recherche, vous avez disposition une liste complte des termes recherchs par les internautes. Observez toutes les recherches qui ont t ralises et, pour chacune, les termes recherchs, depuis quel magasin, le nombre de rsultats retourns et le nombre dutilisations , cest--dire le nombre de fois quune recherche sur ces termes a t effectue. Enfin, la dernire colonne indique si le terme a t retenu ou non dans la liste des termes suggrs.
SAVOIR Suggestion de termes
Lorsque le visiteur commence saisir un terme dans le champ du moteur de recherche, il peut lui tre suggr, en aide la recherche, une liste de termes parmi laquelle il na qu cliquer sur le terme dsir. Cest une fonctionnalit classique des moteurs de recherche, que vous retrouvez par exemple sur Google.

Figure 913 Liste des termes recherchs par les internautes dans votre moteur de recherche

Vous aurez remarqu que certaines des recherches effectues ont chou, aucun rsultat nayant t retourn. Regardons ces termes de plus prs : il peut sagir dun mot crit avec une faute dorthographe ou dun terme non existant dans votre catalogue. Pour viter que de telles recherches ne
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

195

9 Promotion de la boutique : communiquer avec ses visiteurs

Magento

soient perdues et que votre visiteur quitte le site, du, il est heureusement possible de faire des amliorations sur les termes recherchs.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

diter les recherches


Pour amliorer une recherche sur un terme dj recherch, cochez la case qui le prcde et cliquez sur le lien diter la recherche. Prenons un mot mal orthographi et faisons en sorte quil renvoie les rsultats correspondant au terme correct et que la recherche nchoue pas. Il faut pour cela lui crer un alias : paela pour paella , par exemple. Ainsi, les recherches vers le premier renverront sur les rsultats du second.

Figure 914

diter la recherche sur un terme mal orthographi

Dans la fentre ddition, renseignez les champs suivants propos des termes de recherche. Les Termes de recherche sont les mots saisis dans le champ de recherche (il peut sagir dun mot simple ou dun terme compos). Le Magasin permet de spcifier pour quel magasin cette nouvelle rgle de recherche sappliquera (par exemple, pas besoin de lappliquer un magasin en anglais si le terme a peu de chance dtre saisi par un visiteur anglophone). Synonyme de : notre objectif est dindiquer que ces termes sont synonymes dun mot rellement utile. Alternativement, lURL de redirection peut renvoyer directement sur une page dont vous aurez dcid. Enfin, on vous demande si vous souhaitez ou non les Afficher dans les termes suggrs : nous ne devrions pas proposer ici cette faute dorthographe, donc choisissez Non.

196
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Sauvegardons et testons notre nouveau terme dans la recherche en tant que visiteur. En saisissant paela , vous obtenez bien les rsultats correspondant paella .
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 915

Les rsultats dune recherche sur le terme erron paela correspondent bien au terme correct paella .

Autres amliorations possibles


Dautres modifications peuvent tre intressantes pour la recherche, notamment par le systme dattributs dtaill dans le chapitre 7. Indiquez judicieusement quels attributs sont utiliser dans la recherche (en principe, tous les attributs textuels). De mme, proccupez-vous daffiner la recherche, en prcisant les attributs pour lesquels cet affinage sera possible (lorsque la recherche renvoie un trs grand nombre de rsultats). Par exemple, un visiteur qui cherche riz sur notre site sera intress ensuite de pouvoir affiner sa recherche selon la quantit (1 kg...) ou selon la varit de riz (riz complet, riz blanc...) ; donc, si les attributs poids et type de riz existent, il est bon de les indiquer comme permettant daffiner la recherche (voir la section consacre aux attributs dans le chapitre 7).
POUR ALLER PLUS LOIN Externaliser la recherche
Il est galement possible, en modifiant le thme, de ne plus du tout utiliser le moteur de recherche interne de Magento, mais de le remplacer par un logiciel spcialis, comme les moteurs de recherche Sphinx ou mnoGoSearch. Autre solution encore, faire un simple lien vers un moteur extrieur...
B http://www.sphinxsearch.com B http://www.mnogosearch.org

Envoyer une lettre dinformation (newsletter)


Une newsletter, ou lettre dinformation, est un courriel dinformation envoy rgulirement un grand nombre de receveurs, qui ont souhait sy inscrire. Cest un moyen prcieux de se faire connatre, moins agressif que la publicit directe puisque ceux qui la reoivent ont dlibrment choisi de la recevoir. La publication dune lettre dinformation est une fonctionnalit offerte par Magento, bien que pour le moment encore un peu sommaire. Les visiteurs peuvent sinscrire la newsletter, cette inscription tant sans rapport avec lauthentification comme client ou
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

ALTERNATIVE Utiliser un systme externe de


publication de newsletter
Le systme de newsletter de Magento tant pour le moment plutt sommaire, vous pourriez prfrer utiliser un systme extrieur en remplacement, tel que MessageBusiness ou NetAtlantic, si vous avez des besoins plus volus.
B http://www.message-business.com B https://www.netatlantic.com

197

9 Promotion de la boutique : communiquer avec ses visiteurs

Magento

administrateur. Linscription est propose en permanence sur le site. Quant ldition de la lettre en soi, elle consiste essentiellement en la cration de gabarits pour mettre en forme vos informations.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Grer les inscriptions


Afin de comprendre comment fonctionnent les inscriptions la lettre dinformation, entrez une adresse e-mail quelconque sur le site public, dans la bote dinscription la newsletter ( gauche des pages produits, par exemple, voir figure 9-16). Retournez ensuite dans ladministration, o vous pouvez visualiser les inscrits dans Newsletter>Inscrits la newsletter (voir figure 9-17).

Figure 916

Bote dinscription la newsletter

Figure 917

Liste des inscrits la newsletter

En vue de rutiliser cette liste dans dautres applications, un bouton en haut permet de demander lexportation de la liste en fichier CSV ou XML.
Exemple de rsultat dexportation en fichier CSV (la premire ligne indique les enttes de colonne) :
"ID","E-mail","Type","Prnom du client","Nom de famille du X client","Statut","Site web","Magasin","Vue magasin" X "1","mblanchard@yopmail.fr","Client","Mickal X ","Blanchard","Inscrit","Main Website","Magasin X principal","Franais"

198
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Prparer un gabarit
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Afin de faciliter ldition de vos newsletters, il est conseill de crer un gabarit, qui sera utilis pour les multiples envois. Rendez-vous dans le menu Newsletter>Gabarits newsletter. Il ny en a aucun par dfaut.

Figure 918

Liste des gabarits de la newsletter

Crez un nouveau gabarit, au moyen du bouton Ajouter un nouveau gabarit, en haut. Sur la page de cration, entrez un Nom pour ce gabarit, puis choisissez le Sujet du gabarit, le Nom de lexpditeur, lE-mail de lexpditeur, le Contenu du gabarit comme si vous criviez un courriel. Dans le champ Contenu, inscrivez les lments permanents et communs toutes vos lettres (adressage, signature, coordonnes...), sans oublier de fournir un lien pour la dsinscription. Sauvegardez votre gabarit. Un bouton daide est disponible pour le lien de dsinscription, dont voici le code, insrer dans le lien HTML :
{{var subscriber.getUnsubscriptionLink()}}

CONSEIL
Laisser linternaute aux commandes
Votre internaute napprciera pas de se sentir prisonnier dune fonctionnalit, en ft-il demandeur au dpart. Il est donc essentiel de lui fournir en permanence la possibilit de se dsinscrire. Ainsi se sentira-t-il respect et sera-t-il susceptible de recommander votre site dautres personnes.

La lettre est, par dfaut, en HTML, mais un bouton en haut, Convertir en texte simple, transformera ce gabarit (en supprimant les balises) pour envoyer une newsletter en texte brut.

Figure 919

Cration dun nouveau gabarit de newsletter Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

199

9 Promotion de la boutique : communiquer avec ses visiteurs

Magento

diter et envoyer la lettre


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Vous pouvez maintenant utiliser le gabarit pour raliser un envoi. Sur la liste des gabarits de newsletter, utilisez laction Queue newsletter (mettre la newsletter en file). Vous arrivez sur un formulaire de cration de message.

Figure 920

Formulaire de cration dun envoi de newsletter partir dun gabarit

Vous devez fixer une Date de dmarrage de la file, ventuellement immdiate. Cest la date du dbut de lenvoi. Indiquez aussi toutes les vues magasin dont les Abonns recevront la newsletter, et modifiez selon vos besoins les lments du gabarit (Sujet, Nom de lexpditeur, Expditeur de le-mail). Cest ce moment que vous insrez son contenu, dans le champ Message.
CONSEIL Bien rdiger sa newsletter
Pour tre efficace, la rdaction dune lettre dinformation doit souscrire aux principes suivants : concision (de 3 5 articles courts, avec un lien en fin darticle renvoyant sur votre site ; cela permettra entre autres de gnrer du trafic vers le site) ; clart ; incitation (le titre et le premier paragraphe doivent tre accrocheurs, informatifs et contenir les mots-cls) ; information (les contenus doivent tre intressants pour viter que le visiteur ne se dsinscrive). R I. Canivet, Bien rdiger pour le Web, Eyrolles, 2009.

200
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Sauvegardez. Votre newsletter va apparatre dans la liste des newsletters, disponible via le menu Newsletter>File de newsletter. Ds la date de dpart passe, un appel la tche cron correspondante (voir au chapitre 3) dclenchera lenvoi tous les abonns.

LINTRIEUR Envoi massif


Les auteurs de Magento ont ralis un mcanisme denvoi par lot plutt efficace. Toutefois, envoyer plusieurs milliers ou millions de courriels, entranera des difficults tout fait spcifiques, qui ne sont pas abordes dans cet ouvrage.

Mieux connatre votre clientle : utiliser les rapports


Afin de vous permettre danalyser en profondeur votre activit, Magento met votre disposition une grande quantit de rapports (ou tats). Ils sont mis jour chaque instant, en fonction des donnes enregistres par votre site. Ils viennent complter le tableau de bord (voir en fin de chapitre 8), et sont des aides la dcision stratgique (Business Intelligence), vous permettant davoir une vue densemble de votre activit.
CULTURE Rapports et tats
Rapport est une mauvaise traduction de report , en anglais, qui dsigne habituellement en franais un tat, cest--dire un document prsentant des informations organises et optimises pour la visualisation et, par extension, pour limpression. Strictement parlant, cest partir dun tat quon peut tablir un rapport, cest--dire un document o intervient lanalyse humaine. Ce terme se retrouve dans les noms doutils spcialiss dans la gnration dtats tels que Crystal Report ou Rave Report.

Les diffrents tats disponibles


Voici les rapports disponibles dans Magento, classs par thme. Ltoile (*) indique les tats qui offrent un certain nombre de donnes tries et ordonnes par priode temporelle (jour par jour, mois par mois ou anne par anne). Les autres affichent les donnes sans datation.
Tableau 91 Rapports disponibles dans Magento Thme Nom du rapport Tri par date (*) Description

Ventes

Panier

Produits

Ventes TVA Livraison Total Factur Total Rembours Bon de rduction Produits dans les paniers Paniers abandonns Meilleures ventes Produits commands Les plus consults Stocks bas Tlchargements

* * * * * *

Bilan des commandes termines Bilan des taxes perues Livraisons, par type Bilan des sommes factures, rgles ou non Bilan des sommes rembourses Utilisation des bons de rduction (promotions panier) Produit par produit, quantits en cours de commande Paniers non suivis dune commande

* * *

Produits classs selon leurs ventes Copie du rapport prcdent, sans les prix Produits classs selon les visites des clients Produits dont la quantit est la plus basse au moment du rapport Tlchargement effectif des produits tlchargeables achets

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

201

9 Promotion de la boutique : communiquer avec ses visiteurs

Magento

Tableau 91 Rapports disponibles dans Magento (suite) Thme Nom du rapport Tri par date (*) Description

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Clients

Commentaires Mots cls (tags)

Nouveaux comptes * Clients par montant de * commande Clients par nombre de * commandes Clients ayant comment Produits comments Clients Produits taggs Populaires Termes de recherche

Derniers comptes ouverts Clients classs par la valeur de leurs achats Les mmes clients classs par leur nombre de commandes, indpendamment du montant Clients classs par leur nombre de commentaires laisss sur les produits Produits classs par le nombre de commentaires laisss par les clients Clients ayant proposs des mots-cls pour les produits Produits classs selon leur nombre de mots-cls (bilan global des produits et de leurs mots-cls) Mots-cls les plus utiliss sur les produits Recherches saisies par les visiteurs, mot par mot

Recherche

Manipuler les tats


Concentrons-nous sur un rapport typique, qui montre lassociation entre les tags et leurs produits (ltat Produits taggs dans le tableau ci-avant). Utilisez le menu pour rejoindre Rapports>Tags>Produits. Vous obtenez une liste classique, complte, que vous pouvez exporter au format CSV ou Excel/XML au moyen du bouton Exporter.

Figure 921 Rapport des tags des produits

Les mmes informations que sur la figure ci-dessus en CSV


"ID","Nom produit","Nombre de tags uniques","Nombre de tags total","Action" "1","Riz long","2","2","<a href=""http://www.rizdumonde.fr/ index.php/admin/report_tag/productDetail/id/1/key/ 7e47a7c104aef13fbb562b8c13ca0fe9/"">Afficher les tags</a>" "8","Palla gante","3","3","<a href=""http:// www.rizdumonde.fr/index.php/admin/report_tag/productDetail/id/ 8/key/7e47a7c104aef13fbb562b8c13ca0fe9/"">Afficher les tags </a>"

202
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les rapports qui prsentent un classement par priode ncessitent (une fois pour chacun uniquement) que vous indiquiez entre quelles dates vous dsirez voir apparatre les donnes, et avec quelle priodicit. Le rsultat est alors affich (et export) priode par priode (ici, jour par jour).
Figure 922

SAVOIR Enregistrement
Si vous dsirez faire des comparaisons rgulires, vous pouvez enregistrer des rapports au fur et mesure, ou bien faire usage des dates modifiables, ou encore les gnrer dans leur totalit au moment o vous en avez besoin. Aucune information nest oublie (mme pour les trs vieilles commandes).

Formulaire pour les rapports par priode

Figure 923 Rapport des ventes, un rapport par priode

Utiliser les services web


Si vous souhaitez largir les possibilits offertes en interne par Magento, il est possible de faire appel des systmes extrieurs, applications autres qui viennent en tant que clients communiquer avec Magento. Nous avons vu par exemple dans le chapitre 8 une premire utilisation des services web depuis Magento, sous forme de services du W3C (WS-*) : la rcupration automatique de taux de change depuis un service distant. linverse, les services web peuvent aussi tre utiliss pour quune application tierce ait accs aux informations de votre site, dans une certaine mesure. On parle alors dapplication cliente . Les besoins dune telle interaction peuvent tre multiples : afficher vos produits sur un autre site, permettre la collection et lagrgation des donnes sur un serveur central, permettre un systme de Single Sign-On (un mot de passe pour plusieurs applications), etc. Il ne sagit donc plus de communication avec le client au sens strict du terme, mais de permettre laccs vos donnes un tiers. Dans certains cas, cela peut aussi servir la promotion de votre site (en republiant votre contenu sur un autre site, par exemple).

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

203

9 Promotion de la boutique : communiquer avec ses visiteurs

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Pour permettre lintgration de services web, Magento va mettre disposition un grand nombre de mthodes, qui : modifieront les donnes, (ajouts de produits, de commandes, par exemple) ; retourneront les donnes, (en fournissant par exemple au client du service web la liste des produits). Si mettre en place et vrifier le bon fonctionnement de ces services web de Magento est assez facile, en profiter depuis un autre systme ncessite de bonnes connaissances en dveloppement pour le systme concern (par exemple, tre capable de raliser des extensions en PHP, si cest pour faire des appels depuis un autre site Magento). De plus, les combinaisons de services utiliss sont tellement varies que tout cela pourrait faire lobjet dun ouvrage entier.

Vrification rapide du bon fonctionnement


RAPPEL Page web versus service web
Pour rappel, alors quune page web instaure une interaction entre un humain client et une machine serveur, un service web fait communiquer une machine client et une machine serveur.

Magento propose deux normes daccs, deux protocoles de services web : XML-RPC et WS-*. Le premier est beaucoup plus simple, le second est plus standard. Assurez-vous que vous avez bien accs chacun dentre eux. La manipulation propose na dintrt que pour le test, puisque nous allons, en tant quhumain, accder un service web, chose qui est en principe rserve aux communications entre machines.

Services XML-RPC
Accdons aux services XML-RPC en allant, avec votre navigateur, une adresse de ce type http://www.rizdumonde.fr/index.php/api/xmlrpc. Nous recevons alors un document XML, dans lequel nous observons le message derreur Failed to parse request . Cela vient du fait quun appel XMLRPC devrait transporter une information supplmentaire, linformation modifie ou demande, sous la forme dun document XML. Or, en passant par un navigateur pour faire cet appel, nous navons pas loccasion de prciser laquelle. Donc Magento indique quil na pas russi analyser notre demande. Nous avons toutefois bien la confirmation que le service est en place, et se conforme aux rgles de XML-RPC.
Fichier XML confirmant que le service XML-RPC est conforme
<?xml version="1.0" encoding="UTF-8"?> <methodResponse> <fault> <value> <struct> <member><name>faultCode</name> <value><int>631</int></value></member>

204
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

<member><name>faultString</name> <value><string>Failed to parse request</string></value></ member> </struct> </value> </fault> </methodResponse>

Services WS-*
Les services WS-* sont multiples, mais le plus courant est la manipulation suivante, tout fait valide : accder au fichier WSDL de notre Magento. Ce document WSDL dcrit les services disponibles, la faon dy accder, etc. Il nest ni en anglais ni en franais, mais dans un format quun client gnrique WS-* accepte et peut utiliser facilement. On accde ce fichier avec une adresse de type http://www.rizdumonde.fr/index.php/ api/?wsdl. Vous y trouvez des informations propos des mthodes appeler, de leurs arguments, etc.
Contenu du fichier WSDL
<?xml version="1.0" encoding="UTF-8"?> <definitions xmlns:typens="urn:Magento" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns="http://schemas.xmlsoap.org/wsdl/" name="Magento" targetNamespace="urn:Magento"> <types> </service> </definitions>
T WSDL

WSDL (Web Services Description Language) est le langage de description dun service web spcifique aux services WS-*. Il permet dindiquer quelles oprations sont disponibles, avec quels paramtres et quelle adresse.

CONSEIL Travailler avec un site tiers


Si un tiers, disposant de son propre site, vous demande un accs par service web, vous devez simplement lui fournir ces informations : le lien cicontre vers le fichier WSDL, ainsi que la version de Magento que vous utilisez, avec ventuellement les extensions installes.

Mthode dutilisation
Comment profiter de ces services web ? Bien que nous nallons pas ici dvelopper un exemple complet dutilisation depuis un autre outil, que nous ferions sur mesure, voici les phases probables quil faudra mettre en uvre (on suppose bien sr quon dispose des codes sources de lapplication cliente, et quon est capable de les modifier) : 1 Prparer lapplication cliente. Il peut sagir dune toute nouvelle application ddie, mais il sagira plus probablement dune application dj existante, que lon dsire adapter afin de se connecter notre systme Magento. Cette application peut tre crite dans
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

205

9 Promotion de la boutique : communiquer avec ses visiteurs

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

nimporte quel langage, bien que seuls les langages modernes disposent gnralement de bibliothques pour accder aux services web ( Java, Python, C#, PHP...). 2 Choisir lun ou lautre protocole dappel. Utilisez WS-* si vous disposez des bibliothques (pour Soap et le WSDL) dans le langage concern. 3 Prparer Magento en crant des utilisateurs (voir la section suivante). 4 Raliser les accs client-serveur sur lapplication appelante.

Scurit : crer des utilisateurs


Fort heureusement, toutes les donnes de notre serveur Magento ne sont pas disposition de ceux qui voudront bien venir les lire. La scurit de nos services web est identique celle des pages web de linterface de gestion du site (back-office). Il y a donc aussi des rles et des utilisateurs, quil faut maintenir, afin de permettre laccs au service. Une seule mthode peut tre appele sans droit particulier, dans chacun des deux protocoles : la mthode qui permet lauthentification. Les rles et utilisateurs des services web sont compltement indpendants de ceux pour les pages web. 1 Pour administrer ces droits, rendez-vous, dans la partie dadministration, sur cette gestion de compte, par le menu Systme>Web Services>Rles.

Figure 924

Liste des rles pour les droits de services web

2 Aucun rle nexiste pour le moment. Supposons que vous prvoyez

laccs aux informations de vente une application utilisatrice distante. Cliquez sur Nouveau Rle. Donnez un nom au rle en cours de cration.

Figure 925

Formulaire de cration dun rle

206
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

3 Dans le second onglet, nous pouvons choisir de donner laccs com-

plet aux informations des ventes. Il suffit de cliquer dans la case ct de Ventes pour donner un accs complet.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 926

Choix des ressources accessibles par un rle

4 Sauvegardez le rle. 5 Maintenant, crez un utilisateur associ ce rle. Ceci est ralis via

Systme>Web Services>Utilisateurs.

Figure 927

Liste des utilisateurs de services web

6 Cliquez sur Nouvel utilisateur. Si le Nom de lutilisateur permettra

lauthentification, le Prnom, le Nom de famille, lEmail ne sont pas utiles. La Cl dAPI correspond au mot de passe, au choix (il faut lentrer deux fois). Indiquez lutilisateur comme Actif.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

207

9 Promotion de la boutique : communiquer avec ses visiteurs

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 928

Formulaire de cration dun utilisateur

7 Dans le second onglet, il faut indiquer que cet utilisateur est associ

au rle que vous venez de crer. Cochez la case ct. Chaque utilisateur ne peut avoir quun seul rle.

Figure 929

Cration dun utilisateur : choix de son rle

8 Sauvegardez cet utilisateur. Il est maintenant disponible pour toute

application extrieure qui voudrait consulter nos ventes en tant que cliente de services web.

208
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Personnaliser lapparence de sa boutique

10
SOMMAIRE

B Configuration simple

Les pages de votre boutique sont votre vitrine. Avant mme de raliser indpendamment une recherche graphique, tudiez les possibilits offertes par Magento en matire de design, ainsi que les difficults prendre en compte, afin de mettre en place la prsentation idale de votre boutique en ligne.

B Crer un thme graphique B Images, CSS et JavaScript B Internationalisation B Ajouter des widgets B Gabarits et agencements B Designs personnaliss
MOTS-CLS

B apparence B widget B feuille de style B template B layout B thme B paquet B langue

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Afin doffrir la boutique en ligne la mieux adapte limage de votre entreprise, vous souhaiterez sans doute personnaliser lapparence de votre site : modifier les couleurs, les polices de caractres, les pictogrammes et images... ; modifier les textes ; dplacer des lments. Sur une simple page HTML, ce genre doprations ne prsente aucune difficult, grce notamment lemploi des CSS (voir annexe B). Mais sur un site conu avec Magento, ou tout autre outil du mme type, ces lments statiques de prsentation graphique sont mlangs avec des contenus dynamiques, qui voluent en fonction du temps, des manipulations prcdentes des utilisateurs, de celles des administrateurs ou de systmes extrieurs (via les services web). Il est donc ncessaire denvisager dautres solutions.
CULTURE La charte graphique au service de lidentit visuelle de votre socit
Mme si un site est vou voluer dans le temps, il est important dassurer sa prennit et sa cohrence graphique, afin de donner votre socit une identit visuelle reconnaissable et durable. Cette identit peut tre formalise au sein dun document que lon appelle charte graphique, qui dcrit tous les lments graphiques tels que : les polices de caractres (fonte et corps) ; linterlignage ; la palette de couleurs ; le format et la taille des images ; les conventions de mise en forme pour les liens (selon quils sont cliquables ou cliqus) ; lutilisation du logo ; les types de listes puces, numros utiliss, etc. Ainsi, le site pourra avoir une prsentation homogne et offrir lutilisateur un environnement familier, quel que soit la page o il se trouve. Il sen dgagera ainsi une image de confiance, de crdibilit et de professionnalisme dont ne pourra que bnficier votre entreprise.

Gnralement, plusieurs solutions sont disponibles pour un mme besoin. Comme critres de choix, nous nous efforcerons de prendre en compte leur caractre rversible (possibilit de revenir en arrire), la possibillit de mettre jour Magento sans tout dtruire et la maintenance facile (une solution claire, prvisible, sans redondance). Plusieurs mthodes sont prsentes dans les sections qui suivent, ordonnes selon leur difficult, du plus simple au plus compliqu, de la configuration simple via linterface graphique dadministration la modification du 210
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

code. la fois la difficult dexplication, de mise en uvre, et le temps ncessaire sont pris en compte. Il sera donc prfrable, autant que possible, de se contraindre aux premires solutions proposes.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Configuration de base du design


Vous trouvez dans la configuration du design, Systme>Configuration>Design, des paramtres simples modifiant laffichage du site public. Cela vous permettra au moins une personnalisation a minima de votre graphisme, partir des balises HTML. Bien sr, ces paramtres peuvent tre modifis en fonction des diffrentes portes (globale, site web, vue magasin).

Len-tte HTML
Len-tte HTML dsigne les lments contenus dans le code HTML lintrieur de la balise <head> identique sur toutes les pages utilisant ce design. Ce sont des informations sur le site destination du navigateur, pour la plupart non visibles directement sur la page. Il ne sagit donc pas de design proprement parler ; mais soigner ses en-ttes visibles contribue la mise en uvre dune charte graphique efficace.

Figure 101

Paramtres de len-tte HTML

Le titre de la page (title)


Pour nimporte quelle page de votre site, le contenu de la balise <title> correspond au titre de la page, celui qui saffiche entre autres dans la barre suprieure du navigateur. Indiquez un Titre par dfaut, qui saffi Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

211

10 Personnaliser lapparence de sa boutique

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

chera pour les pages o rien dautre na t spcifi, sachant que chaque page particulire (par exemple, une fiche produit) a dj son propre titre (le nom du produit). Or mme dans ces derniers cas, le titre peut recevoir un Prfixe et/ou un Suffixe. On peut par exemple envisager que chaque page commence par un prfixe Riz du Monde , ce qui donnerait par exemple, pour la fiche produit du riz rond, un titre de page tel que Riz du Monde :: Riz rond .

Les balises mta et autres indications pour les moteurs de recherche


De mme, comme nous lavons vu, certaines pages (les pages de contenu informatif, par exemple) sont dj dotes de balises mta contenant une description et des mots-cls, destines favoriser leur rfrencement sur les moteurs. Mais il est possible, pour les autres, dindiquer une Description par dfaut et des Mots-cls par dfaut. Quant au champ Robots par dfaut, il permet dindiquer aux robots des moteurs de recherche sils doivent ou non indexer la page et suivre les liens quelle contient (voir lapart ci-aprs).
RFRENCEMENT Les balises mta robots
Il existe galement un autre type de balise mta, adress directement aux robots des moteurs de recherche : la balise <meta name="robots" content="...">, qui peut contenir les attributs suivants, dans le champ content : index ou noindex, qui indique si la page doit tre ou non indexe par les robots ; follow ou nofollow, qui indique si les liens de la page doivent tre utiliss pour lindexation. Le plus souvent, vous prfrerez indiquer les attributs INDEX et FOLLOW afin doptimiser vos chances de rfrencement. Seule contre-indication, si des utilisateurs malicieux profitent des zones de commentaires mises leur disposition sur les pages pour insrer des liens et gnrer du spam.

Les petits plus


Vous pouvez indiquer des balises supplmentaires en tant que Scripts divers, en JavaScript, par exemple pour configurer un script utilis dans les pages. Enfin, le temps de la mise en place du site, pour indiquer que votre magasin est une boutique de dmonstration, une note peut tre affiche en activant la fonction Display demo store notice.

212
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 102 Affichage de la note de dmonstration

Len-tte visible de la page


Les paramtres suivants concernent len-tte visible des pages ellesmmes, savoir ce qui saffiche en haut des pages. Si votre charte graphique est cohrente, cet en-tte sera le mme pour tout le site. Il contient, de manire classique, le logo de votre socit, dont vous indiquez le fichier source (en format GIF ou PNG, de prfrence) dans le champ Source du logo et un slogan (appel aussi baseline ou signature), correspondant ici au champ Texte de bienvenue. Comme toute image, le logo doit tre doubl dun Texte alternatif (correspondant au contenu des balises alt) pour des raisons daccessibilit, notamment. Lemplacement du logo dans len-tte peut tre modifi lors de ldition du thme (voir la deuxime section de ce chapitre).

Figure 103

Paramtres den-tte

Le texte qui saffiche en haut droite peut aussi tre dit.

LINTRIEUR En-tte et pied de page


dans le HTML
Si vous connaissez le HTML, observez o, dans le code HTML gnr, apparaissent les trois informations en-tte HTML, en-tte et pied de page. Cela vous permettra de prvoir sil sagit bien des emplacements utiles, ou si vous devez modifier le thme.

Figure 104

En-tte des pages

Le pied de page
Vous disposez aussi de paramtres pour dfinir le contenu du pied de page, pour toutes vos pages. Vous pouvez notamment y insrer un Copyright (pas ncessaire en Europe), alors que le Code HTML divers permet dajouter, en HTML, toute autre information que vous jugerez utile. Il
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

213

10 Personnaliser lapparence de sa boutique

Magento

est souvent utilis pour afficher les statistiques des visites (via Google Analytics, Xiti...), que lon insre via un code dappel appropri, fourni par lapplication en charge des statistiques.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 105

Formulaire des paramtres du pied de page

Ajouter un filigrane sur les images de produits


CONSEIL Soyez clair sur vos objectifs
Il faut tre bien clair concernant la raison pour laquelle vous mettriez en place un filigrane. Est-ce pour viter absolument que lon copie vos images (copyright), ou bien est-ce pour autoriser cette copie condition que vous soyez cit ? En fonction de vos intrts, choisissez un filigrane plus ou moins intrusif. Et sachez quun tel filigrane na rien dobligatoire... Vous pouvez notamment largement vous en passer sur les vignettes !

Une dernire srie de paramtres est disponible : des filigranes sur les images, cest--dire une sorte dempreinte que vous pouvez ajouter sur les images que vous publiez afin de les signer ou de les protger contre les infractions au droit la proprit intellectuelle.

Figure 106

Formulaire des paramtres des filigranes dimages de produits

214
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les filigranes sont disponibles pour chaque type dimage affiche correspondant un produit (grande image, petite image et miniature). En pratique, cela consiste ajouter une image partiellement transparente (en format GIF ou PNG), qui viendra se superposer toutes les images du site. Pour chaque image en filigrane, vous devez indiquer une Taille par dfaut et un Positionnement, dans le cas o elle ne fasse pas la mme taille que limage recouvrir (tirer, faire une mosaque ou placer dans un coin). Voici le rsultat, pour un texte Riz Du Monde en filigrane, gris sur blanc ; ce nest pas trs visible, mais cest suffisant.

Figure 107

Image avec un filigrane

Crer un thme graphique


Entrons maintenant dans le cur de ldition de lapparence du site : la manipulation et la cration de thmes graphiques. Un thme est un ensemble cohrent dimages, de feuilles de style et autres qui vient habiller votre site pour personnaliser son apparence.

Organisation des fichiers


Organisation gnrale
La grande majorit des manipulations que vous allez raliser pour cette partie se font directement dans le systme de fichiers. Il sagira de modifier des fichiers textuels, de dplacer des images, etc. Les deux rpertoires concerns par lapparence graphique au sein de votre installation de Magento sont /app/design/ et /skin/. Le rpertoire /app/design/ contiendra les textes (lments dinterface susceptibles dtre traduits), templates et layouts, et le rpertoire /skin/ les lments statiques (images, CSS, JavaScript...).
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

SAVOIR Pourquoi deux rpertoires ?


Cette sparation en deux rpertoires est tablie pour des raisons de scurit. Les lments de /skin/ sont lus directement depuis les navigateurs des clients, ce rpertoire doit donc tre accessible en lecture par le HTTP. Les lments de /app/ne sont pas accessibles directement, mais utiliss par le code PHP pour crer le HTML final. Le HTTP ny a pas accs.

215

10 Personnaliser lapparence de sa boutique

Magento

VOCABULAIRE Les thmes graphiques dans Magento


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Le vocabulaire des lments graphiques dans Magento est courant, bien que certains termes soient utiliss dune manire lgrement diffrente qu laccoutume. Les thmes (skin, en anglais) sont les lments principaux de la structure de prsentation de Magento. Un thme est un ensemble cohrent dimages, de feuilles de style, etc. Cest en quelque sorte lhabillage de votre site. Les thmes sont regroups dans des paquets. Chaque paquet contient un ou plusieurs thmes. Les paquets servent notamment importer et dployer des thmes facilement. Interface est un synonyme de paquet. Une page correspond une page web telle que vous la connaissez, associe une URL. Un lment est dit statique sil est affich tel quel lorsque sa cration est termine. Une image est statique, de mme quune page de simple contenu cre via le CMS. Par opposition, un lment est dynamique sil est issu dun calcul ou dune recherche automatique dans la base, son contenu tant donc amen changer selon lopration effectue par lutilisateur lors de sa consultation. Les chiffres de ventes ou les prix des produits sont dynamiques. Un layout (mise en page, en anglais) est lagencement gnral de votre page ou de votre site, qui dtermine ce qui va tre affich et quel emplacement, dans tel ou tel cas. Un template est un gabarit , qui correspond la manire dont le rsultat dun layout sera affich (choix graphiques : couleur, polices, etc.). Ce sont les templates qui sont cods en HTML et PHP, tandis que le layout est une description en XML. chaque appel dun utilisateur, agencement et gabarits sont assembls pour constituer laffichage final.

Figure 108

Rpertoires concerns par le design du site

Dans chacun de ces deux rpertoires, on rencontre ces trois emplacements : adminhtml : affichage de linterface dadministration, partie prive. frontend : affichage de la partie publique du site. install : affichage du systme dinstallation. Nous allons ici nous consacrer essentiellement la prsentation du site public, nous nagirons donc que dans chacun des rpertoires frontend, mais il est vident que vous pourriez faire de mme, si vous en avez le besoin, dans les deux autres parties.

Organisation des thmes au sein des rpertoires


Entrons dans le rpertoire /skin/frontend/. Il contient un seul rpertoire default et, lintrieur, les rpertoires blue, default, french, german, iphone et modern. Le premier rpertoire default est une interface, un paquet.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

Figure 109

Rpertoire /skin/frontend/ initial

216

Chacun des six rpertoires lintrieur correspond un thme.

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Si nous installions des paquets supplmentaires, ils seraient donc placs au mme niveau que le premier default. Nous pourrions aussi installer des thmes supplmentaires, sajoutant aux quatre thmes dj existants. Vous pouvez observer que dans /app/design/frontend/, il ny a quune seule interface, default, et quun seul thme, lui aussi appel default.
EN PRATIQUE Les thmes standards
Six thmes sont proposs avec Magento 1.4. default et modern sont deux thmes simples et propres. Blue est une variation trs proche de default, de mme que frenchet german, qui indiquent simplement des traductions (voir la section ddie plus loin). Enfin, iphone est une adaptation particulire de linterface au smartphone dApple (petit cran et connexion limite).

Figure 1010

Rpertoire /app/design/frontend/ initial

Le principe de surcharge
Il serait possible de directement remplacer, dans /skin/frontend/ default/default/, une image par une autre, et ainsi de transformer effectivement laffichage du site, du moins en partie. Toutefois, Magento propose, la place de ces remplacements en bloc, un systme de surcharge (ou redfinition ), lobjectif tant de ne jamais modifier le travail de vos prdcesseurs, mais dajouter vos crations aux leurs. Ainsi, vous crez un thme en plus du thme default, qui subsiste, ce qui prsente les avantages suivants : vous tes capable de distinguer ce que vous avez fait du reste ; vous avez la possibilit de revenir en arrire ; vous pouvez appliquer de nouveau vos modifications aprs une mise jour. En procdant de cette manire, voil ce qui se passe chaque fois quun fichier est appel lors de la consultation du site : 1 Il est dabord recherch dans le rpertoire du thme indiqu dans la configuration (voir plus loin Crer et appliquer un nouveau thme ). 2 Sil nest pas trouv, alors il est recherch dans le thme default. 3 Sil nest toujours pas trouv, cest un chec. Il ny a que deux tapes, et default est toujours la seconde.

ATTENTION Gare la casse !


Sous Windows, les majuscules dans les noms de fichiers nont pas dimportance. Par contre, elle en auront dans tout systme de type Unix, notamment pour la surcharge. Veillez donc garder exactement les mmes noms de fichiers, en tenant compte de la casse.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

217

10 Personnaliser lapparence de sa boutique

Magento

Crer un paquet
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La cration dun nouveau paquet (ou interface) nest pas obligatoire avant de crer le thme en soi, mais nous allons la raliser ici, afin dobserver deux situations bien distinctes (avant et aprs la cration). Le principe de surcharge ne vaut pas pour les paquets. Un paquet est en cours dutilisation, ou un autre, mais aucun lien ne sera fait entre les deux. Cela est dtermin lors de la configuration, donc, bien sr, les mcanismes habituels fonctionnent : une vue magasin peut utiliser un paquet, et une autre vue magasin, un autre paquet. Crons un nouveau paquet, et utilisons-le : 1 Copiez les deux rpertoires default de /app/design/frontend/ et de /skin/frontend/ dans deux autres rpertoires (nomms de la mme faon dans /app/design et dans /skin/, par exemple interface_blanche), ct de chacun dentre eux. 2 Rendez-vous dans la configuration de votre boutique, via le menu Systme>Configuration>Gnral>Design, et changez la porte pour lune de vos vues magasin, par exemple, pour que le paquet sapplique la vue en franais du magasin.

Figure 1011

Cration de deux rpertoires interface_blanche

Figure 1012

Changement de la porte des paramtres, pour lune des vues magasin

3 Changez Nom du paquet actuel pour le nom de rpertoire que vous

venez de crer, interface_blanche.

Figure 1013

Choix de linterface pour la vue magasin

4 Vrifiez que la partie publique correspondant cette vue magasin

fonctionne encore, et restez dans cette vue magasin, pour la suite.

Crer et appliquer un nouveau thme


On se propose de crer un nouveau thme dans ce nouveau paquet. Concentrez-vous uniquement sur /skin/pour le moment. Nous avons 218
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

vu que seul un thme, voire deux (avec le thme default), taient utiliss pour laffichage final. Dans notre nouveau paquet, nous pouvons donc supprimer blue, german, french, modern et iphone et ajouter la place un rpertoire vide ct de default. Appelons-le grisclair, par exemple. Activez alors ce thme, en vous rendant, dans linterface dadministration, dans Systme>Configuration>Gnral>Design, toujours pour la porte de votre vue magasin. Dans le champ Dfaut du volet Thmes, indiquez le nom de votre thme, grisclair. Utilisez ainsi votre thme pour toutes les pages en lindiquant comme thme par dfaut.

Figure 1014

Nouveau rpertoire pour un thme

Figure 1015

Choix dun autre thme en tant que thme par dfaut

Dsormais, chaque fois quun document est ncessaire pour laffichage, il est recherch dans votre propre thme (rpertoire grisclair), puis dans default. Vrifions cela en pratique en modifiant le logo : 1 Dans votre nouveau thme, crez un rpertoire images. 2 Dans celui-ci, crez un fichier logo.gif (environ 157 x 47 pixels). 3 Observez nimporte quelle page de cette vue magasin : le logo apparat bien modifi !

Figure 1016

Rsultat de la modification du logo dans notre nouveau thme

Application partielle dun thme


Si le plus vident semble tre dappliquer un thme par dfaut au design du site dans son intgralit, la configuration, de Magento permet aussi
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

219

10 Personnaliser lapparence de sa boutique

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

de ne lappliquer que partiellement, certaines parties ou ressources du site uniquement. Par exemple, on peut ne modifier que le style des Traductions, voire utiliser des thmes diffrents pour chaque type de ressource qui est lue dans les thmes (Gabarits, Habillage (Images/CSS), Agencement). Essayez en modifiant de nouveau la configuration. Utilisez votre thme uniquement pour lhabillage, et non lensemble des lments (pensez cocher de nouveau la case Utilisez le site web droite si besoin, comme expliqu dans la section Configuration gnrale du chapitre 5). Sauvegardez, et vrifiez que laffichage ne change pas.

Figure 1017

Utilisation du nouveau thme seulement pour lhabillage

Exceptions
EN PRATIQUE Exemples de User-Agent
Voici des valeurs classiques de User-Agent, pour Firefox 1.5 sous Mac, Firefox 1.5 pour Windows et Internet Explorer 7 pour Windows : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.5a) Gecko/ 20030728 Mozilla Firebird/0.6.1
Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8) Gecko/20051111 Firefox/1.5 Mozilla/4.0 (compatible; Windows NT 6.0) MSIE 7.0;

Chacun des champs indiqus dans la section prcdente peut possder des exceptions, afin de proposer des prsentations alternatives en fonction du navigateur utilis par le client (navigateur de tlphone portable par exemple). Il sagit alors de remplacer le paquet par un autre paquet, ou le thme par un autre thme, dans certains cas. Le navigateur du client, ou agent utilisateur, est dtect par le serveur au moyen de ce quon appelle le User-Agent. Il sagit dune chane de caractres incluse dans len-tte dune requte HTTP envoye par le navigateur, donnant de faon vague et non normalise des informations sur le logiciel utilis (nom, version, langue...). Cest grce au contenu de ce User-Agent que Magento va pouvoir dtecter les cas o appliquer une exception. Pour indiquer une exception, cliquez tout dabord sur le bouton Ajouter une exception. Lexception est donne sous la forme dune expression rationnelle, savoir une chane de caractres rdige selon une norme spciale, permettant de dtecter un certain format via un User-Agent.

220
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

T Expressions rationnelles

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les expressions rationnelles, ou rgulires, correspondent une faon standardise dindiquer, de rechercher un motif dans une chane de caractres. Les expressions rationnelles sont utilises dans de nombreux domaines de linformatique, o la comparaison de chanes est utile. Par exemple, le point . correspond nimporte quel caractre, ltoile * un nombre quelconque, tandis que lexpression a* reconnat aaaa , a.c.reconnat abcd et .* reconnat les deux. Des rfrences, et mme des testeurs dexpressions rationnelles, sont disponibles en grand nombre sur le Web :
B http://fr.wikipedia.org/wiki/Expression_rationnelle B http://www.quanetic.com/Regex

Imaginons par exemple que vous vouliez proposer le thme par dfaut plutt que votre thme grisclair aux utilisateurs de Microsoft Internet Explorer (quelle que soit sa version). Pour cela, le serveur devra dtecter la prsence de la chane de caractre MSIE dans le User-Agent. Vous devrez donc inscrire le texte .*MSIE.* (qui signifie User-Agent contient "MSIE" ) dans le champ Expression correspondante, et le thme default dans Valeur. Testez en accdant votre page avec Microsoft Internet Explorer. Vous devriez voir lancien logo la place du nouveau.

CONSEIL Prendre en considration


le navigateur
Il est plutt inhabituel de choisir un thme en fonction du navigateur, en particulier parce que les CSS elles-mmes proposent des mcanismes pour le faire. Toutefois, les exceptions sont loccasion de disposer dun thme spcial pour les tlphones mobiles, par exemple.

Figure 1018

Formulaire dajout dune exception pour un navigateur particulier

ALTERNATIVE Tlcharger un thme


Plutt que de modifier ou de crer vous-mme un thme, il est possible de tlcharger des thmes graphiques pour votre boutique (voir la premire section du chapitre 11 suivant pour savoir o trouver ces thmes et comment les installer). Il ny a pas de difficult particulire. Les thmes sont disponibles sous forme de paquets. Souvent, dans un mme paquet tlcharg, vous trouverez le thme principal et des variantes de couleur, de langue ou dimage. La faon de linstaller et de lappliquer est la mme que pour un thme que vous aurez cr. Le rsultat de cette installation est lajout, dans vos rpertoires /skin/ et /app/design/, de paquets supplmentaires. Il vous faut alors les utiliser comme les paquets et thmes que vous auriez vous-mme raliss. Il est mme possible, suivant la licence de lextension graphique tlcharge, que vous soyez libre de modifier ce thme votre convenance.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

221

10 Personnaliser lapparence de sa boutique

Magento

lments statiques du thme : images, CSS et JavaScript


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La manipulation des thmes effectue dans la section prcdente est tout fait reprsentative de la faon de procder avec Magento pour personnaliser le graphisme du site. Images, fichiers JavaScript et CSS sont considrs de manire quivalente par Magento, il ne sagit que de ressources renvoyer au navigateur. Elles sont donc contenus dans le rpertoire /skin/. Les auteurs des thmes de base de Magento ont propos cette rpartition, au sein du rpertoire dun thme : Le rpertoire css contient les documents CSS. Le rpertoire images contient les images ! Le rpertoire js contient les fichiers JavaScript. Le fichier favicon.ico est licne reprsentative du site, appele dans la balise <head> du code HTML et affiche par le navigateur sil le dsire (gnralement dans ses marques-pages, ou sur les onglets). Vous tes en droit de bouleverser cette organisation, en choisissant par exemple tout autre nom de rpertoires ou encore en plaant certains des fichiers la racine de /skin/, en particulier si, plutt que de modifier une une les images et les CSS, vous dcidez de partir de zro, dun rpertoire /skin/ vide, et den ajouter progressivement.

Figure 1019

Rpertoire habituel des ressources dun thme

Modifier des images ou fichiers JavaScript


Dsormais, pour modifier une image, rien de plus simple : il suffit den crer une nouvelle, dans le rpertoire images du nouveau thme, portant le mme nom que la prcdente (qui se trouve dans le thme default), par exemple logo.gif. Elle sera alors utilise automatiquement naturellement dans toutes les vues magasin qui auront fait appel votre thme. Chaque image que vous naurez pas recre sera naturellement lue dans lancien thme default, que vous ne modifiez jamais. Si finalement, vous dsirez revenir en arrire, supprimez (ou renommez) limage de votre propre thme. Vous pouvez remplacer les fichiers JavaScript, dans le rpertoire faon identique.
js,

de

Modifier les styles grce aux CSS


La premire faon de procder, afin de modifier les couleurs, les polices, la composition typographique des textes, etc. des pages de votre site, est 222
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

de rutiliser la feuille de style CSS prsente dans le thme par dfaut pour ladapter vos nouveaux besoins : copiez la CSS (le plus souvent boxes.css) depuis le thme par dfaut dans le rpertoire css de votre propre thme, et modifiez-la. Les nouveaux styles sappliqueront dsormais vos pages. Le tableau suivant prsente les diffrents fichiers CSS disponibles :
Tableau 101 Les diffrentes CSS Nom de la CSS
boxes.css clears.css ie7minus.css iestyles.css menu.css print.css reset.css

ATTENTION Utiliser une CSS dans un


nouveau thme
Il ne suffit pas dajouter une CSS dans le rpertoire css pour quelle soit utilise. Il faut en effet la dclarer dans le thme, cest--dire modifier les agencements, comme nous le verrons dans la dernire section du chapitre.

Description

Mise en forme des botes et des zones spcialises de la page (gnralement en colonnes gauche et droite). Linterface tant constitue presque uniquement de botes, ceci est la CSS principale. Toutes les classes et lments identifis qui, sous forme de blocs, ralisent la modification clear:both (cest--dire le retour la ligne, en dessous des blocs flottants gauche ou droite). Adaptations particulires aux bogues de Microsoft Internet Explorer 7. Adaptations particulires aux bogues de Microsoft Internet Explorer, toutes versions. Mise en forme spcifique du bandeau de menu. Mise en forme en cas dimpression, associe au media='print'. Fichier CSS classique pour la remise zro des styles, afin de rapprocher le comportement des diffrents navigateurs, par exemple pour que les cartements des diffrentes balises de textes ne varient pas entre eux.

Nous en avons fini avec le rpertoire /skin/.

Design et internationalisation
Si votre cible commerciale stend plus dun seul pays, vous aurez trs certainement besoin de crer un site bilingue, voire multilingue, et de ladapter en fonction des besoins des diffrents pays (fuseau horaire, monnaie, etc.). Cest ce quon appelle linternationalisation dun site. La base de linternationalisation est la locale, cest--dire la langue associe ventuellement un pays (franais de Belgique, anglais dAustralie, etc.). Si, en apparence, cela ne semble pas concerner le graphisme mais le contenu textuel, design et internationalisation sont nanmoins lis, dans la mesure o certains lments du thme graphique sont des textes (slogan, titres de rubriques, de champs, menu, etc.). Cest pourquoi nous avons choisi den traiter ici.

Rpertoires de traduction
De nombreux textes sont prsents dans la boutique, dans la partie prive comme dans la partie publique. Ces textes sont enregistrs dans des fichiers spars, afin de pouvoir tre traduits facilement (un rpertoire
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

223

10 Personnaliser lapparence de sa boutique

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

par locale). Magento propose deux emplacements possibles pour ces textes. Dans chacun de ces rpertoires de traduction se trouvent autant de rpertoires que de locales prises en charge. Leur nom est systmatique :[langue]_[PAYS]. Par exemple fr_FR ou en_US. Cela suit deux anciennes normes ISO de dsignation des langues et pays sur deux lettres (ISO 639-1 et ISO 3166-1).
EN SAVOIR PLUS Les codes langue et pays selon
lISO 639-1 et lISO 3166-1
Vous pouvez trouver une liste de ces codes deux lettres sur Wikipdia, par exemple :
B http://fr.wikipedia.org/wiki/

Vous pouvez trouver une liste de ces codes deux lettres sur Wikipdia, par exemple : Les textes des pages de contenu (CMS), ou ceux des produits, napparaissent pas ici, car il ne sont pas systmatiquement traduits.

Liste_des_codes_ISO_639-1
B http://fr.wikipedia.org/wiki/ISO_3166-1

Les textes intgrs au thme


Le rpertoire /app/design/ possde de nombreuses ressources rparties par thme. Cest ici que lon trouve les textes associs chaque thme, dans le rpertoire locale de chacun de ces thmes. Il sagit des textes de la partie publique du site qui font partie intgrante de la prsentation, comme Dernires minutes ! ou Actualits. ; seul le texte de bienvenue nest pas concern. Ainsi, ces intituls devront tre redfinis pour chaque thme spcifiquement. Par exemple, dans la zone dinterface utilisateur (frontend), on trouve le paquet interface_blanche et le thme default, contenant deux rpertoires pour les deux langues concernes (franais et anglais) dans le rpertoire locale. Dans chacun de ces rpertoires, on trouve un fichier translate.csv, dont les chanes de caractres pourront ensuite tre librement utilises dans le gabarit.

Les textes indpendants du thme


Le rpertoire /app/locale/ contient, classs par langue, les textes ne dpendant pas dun thme, cest--dire la majorit dentre eux. La plupart des textes essentiels se trouvent dans ce rpertoire, et pourront ainsi tre rutiliss quel que soit le thme adopt. Chaque fichier texte (au format CSV) correspond un module de votre installation, par exemple Mage_Cms.csv pour les textes du CMS, Mage_Rss.csv pour les textes des flux RSS.

Mcanisme de traduction
Dans tous les cas, il sagit de fichier CSV qui se prsentent sur deux colonnes. La premire colonne est le texte original (habituellement en anglais), la seconde est la traduction dans la langue choisie.
Figure 1020

Les rpertoires destins aux traductions

Ainsi, lorsquun texte (un titre, une phrase...) est prvu dans un gabarit (dans la langue originale), celui-ci va devoir adapter la langue de cette
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

224

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

phrase en fonction de la langue de linterface choisie. Le systme va alors chercher le fichier translate.csv dans le bon rpertoire (zone/paquet/ thme/langue), et prendre la traduction correspondant la chane. Sil ne la trouve pas, il cherche alors dans le fichier de /app/locale/. Sil ne la trouve toujours pas, il garde alors la chane originelle. Voici donc les priorits respectes : 1 recherche dans translate.csv dans app/design/.../locale/ ; 2 recherche dans Paquet_Module.csv dans app/locale/... ; 3 utilisation de la chane dorigine.

Modifier les fichiers pour corriger ou ajouter une traduction


Vous pouvez librement modifier ces fichiers, afin dadapter une traduction ou den ajouter une. Par exemple, ouvrez avec un diteur textuel quelconque le fichier translate.csv de votre thme. Vous y trouvez de nombreux textes, mais pour le moment, comme nous nutilisons pas la boutique de dmonstration, seule la premire ligne est utilise, les autres tant inutiles. Modifiez cette ligne pour y inscrire un texte qui vous est propre.
"Keep your eyes open for our special Back to School items and save A LOT!","Rduction sur les riz de votre enfance" "Activation Information","Informations dactivation" "Color","Couleur"

SAVOIR Pas de traduction automatique


Il ny a pas de systme de traduction automatique dans Magento, seulement un mcanisme permettant dutiliser un fichier correspondant la langue de lutilisateur. Il reste que ce fichier doit tre cr manuellement par vous ou votre traducteur.

Vous pouvez visualiser le rsultat sur le site public. Il sagit du texte qui saffiche en alternative (attribut alt) limage de tableau noir droite. Il faudra que vous interrompiez le cache de traduction (Systme>Gestion du Cache>Traduction), comme il est expliqu la section Gestion du cache du chapitre 5). Voici le code source HTML gnr :
<div class="box"> <img src="http://www.rizdumonde.fr/skin/frontend/ interface_blanche/ default/images/media/col_right_callout.jpg" alt="Rduction sur les riz de votre enfance" style="display: block;" width="195"> </div>

Ajouter des widgets


Nouveaut de Magento 1.4, les widgets permettent de placer des blocs prvus et construits par avance lintrieur des pages. Ceci ce fait entirement depuis linterface dadministration, mais il ne peut sagir que de
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

T Widget

Un widget est un lment dinterface non statique, dont lapparence et le comportement sont paramtrables. Le plus souvent, il sagit dlments graphiques.

225

10 Personnaliser lapparence de sa boutique

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

blocs, certes configurables, proposs par linstallation de Magento ou des extensions supplmentaires. Le rsultat est systmatiquement un affichage supplmentaire, sur une (ou plusieurs) pages de la partie publique. Toutefois, un widget peut tout fait inclure une interface utilisateur complexe destination dun visiteur, tels des liens ou formulaires. La procdure de cration est la suivante : choisir un type de widget parmi ceux proposs, indiquer son emplacement et enfin, le configurer afin de choisir exactement ce qui va sy afficher. 1 Rendons-nous dans la liste des widgets au moyen du menu CMS>Widgets. Aucun nexiste par dfaut.

Figure 1021 La liste (vide, pour le moment) des widgets

2 Le bouton Ajouter une nouvelle instance de widget permet de crer un

nouvel exemplaire dun certain type de widget, parmi ceux disponibles.

Figure 1022

Choix du type pour un nouveau widget

3 Nous devons alors choisir le Type, parmi ceux disponibles :

Bloc statique CMS (affichage dun bloc statique) ; Lien page CMS (affichage dun simple lien vers une page CMS) ; Lien produit catalogue et Lien catgorie catalogue sont similaires, mais vers des produits ou catgories ; Liste des nouveaux produits du catalogue, Produits rcemment compars et Produits rcemment consults (widgets prsentant des ensembles de liens, vers des produits particuliers). Nous choisissons pour lexemple dafficher un lien vers lune de nos pages CMS, qui saffichera en en-tte de toutes les pages.

226
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

4 On indique aussi, dans le mme formulaire, un paquet/thme

dhabillage, qui correspond au design (voir la section prcdente Crer un thme graphique ). Ce sera laffichage utilis pour ce widget.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 1023 Cration du widget : choix dun nom et dun emplacement

5 Il nous faut ensuite choisir un Titre (afin de diffrencier cette instance

des autres) et un numro dordre (numro au choix, si plusieurs widgets sont au mme endroit, les premiers auront le plus petit numro). Nous prcisons aussi lemplacement (ou les emplacements) sur la partie publique du site. Nous avons choisi ici de lafficher sur toutes les pages (plutt quune page particulire), dans le Bloc de Rfrence En-tte de page (sont disponibles aussi, pour cet agencement, les colonnes de droite et de gauche, le centre et le pied de page). 6 Deux versions nous sont alors proposes, Gabarit du bloc lien en ligne CMS et Gabarit du bloc lien page CMS, ; il sagit dune indication sur la faon quaura le widget de safficher. Cela dpend de lemplacement et du type de widget, dans notre cas, a na pas de consquence. Gnralement on aura le choix entre en ligne (plus court) et une version plus dcore ou dtaille. 7 Les paramtres spcifiques du type de widget choisi sont dtaills sur une page spare. Pour celui que nous avons choisi, Prsenter un texte personnalis indique le texte du lien, et Prsenter un titre personnalis, le contenu de lattribut HTML title (linfobulle). Le plus important, Page CMS, indique la page cible du lien.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

227

10 Personnaliser lapparence de sa boutique

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 1024

Options spcifiques au type de widget

8 Pour terminer, enregistrons (bouton Sauvegarder en haut).

Figure 1025

Le rsultat, un widget de lien

Notre lien a bien t ajout en tte de page.

Modifier les gabarits (templates)


AVERTISSEMENT PHP
Cette section pourra savrer ardue pour qui ne connat pas le PHP. Pour ceux qui auraient simplement besoin dune piqre de rappel, les bases sont rappeles dans lannexe C.

Nous allons maintenant aborder le dernier point modifiable, mais aussi le plus complexe : le HTML gnr par les templates ou gabarits, qui sont des fichiers PHP. Heureusement, la sparation des tches propose par le modle MVC va nous faciliter la manuvre.

Les avantages de larchitecture MVC


CULTURE MVC
L'architecture MVC est trs souvent utilise dans les applications web, quelles soient en PHP, Ruby, Java ou Python. De par la sparation des tches quil propose, il apporte des avantages utiles aux dveloppeurs, notamment pour la maintenance de lapplication et lorganisation du projet.

La stratgie gnrale de Magento est dappliquer les principes de larchitecture MVC (Modle-Vue-Contrleur). Cette architecture propose de dcouper lapplication en trois couches distinctes : le modle : les calculs, la persistance (cest--dire la base de donnes et le code PHP y accdant) ; la vue : linterface graphique ; le contrleur : le receveur des vnements issus des utilisateurs, lorganisateur en quelque sorte. Cette sparation sapplique comme telle pour la partie publique du site conu avec Magento : les calculs et recherches dans la base de donnes ne doivent pas tre faits dans les mmes fichiers que ceux qui sont destins la mise en forme. Nous avons dj russi externaliser une partie des lments de prsentation : les images, les CSS, le JavaScript, les

228
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

textes statiques ou dynamiques sont dans des fichiers clairement spars qui ne se mlangent pas au code.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

PERSPECTIVE
Applications Internet riches (RIA)
Larchitecture MVC de Magento devrait en thorie permettre de faire abstraction de la couche de prsentation HTML (vue) afin dappliquer dautres technologies comme Flash et raliser des applications Internet riches (RIA, pour Rich Internet Applications) via son framework Flex, notamment. La ralit est un peu plus complexe et encore limite, et moins davoir lme dun aventurier et daimer les risques, nous vous conseillons de vous en tenir une prsentation en XHTML/CSS.

Par contre, le HTML reste potentiellement mlang au PHP. Il nest pas possible de les sparer compltement, strictement, car cest dans le code PHP que se trouvent les instructions du type : prendre les produits de la liste un par un, et les afficher ou bien encore afficher ici le prix (sous forme de fonctions PHP). Pour une requte effectue sur le site, par exemple, la solution propose est alors la suivante : 1 Le code PHP ralise de manire isole (contrleur et modle) les calculs, les modifications dans la base issues des utilisateurs, etc. Nous ne touchons pas ces fichiers PHP ici. 2 Ceci effectu, il ne reste plus que la tche daffichage. En fonction de la page demande par lutilisateur, la configuration dfinie dans les agencements appelle des fichiers PHP (les gabarits) qui vont gnrer le code HTML. Les agencements (layouts) ne sont ni en PHP ni en HTML, mais en XML (voir section suivante). 3 Tout tant bien prpar, chacun de ces fichiers PHP met en place le HTML. Il sagit en fait de beaucoup de HTML avec seulement un peu de PHP pour les lments dynamiques. Ainsi : Dans lessentiel du PHP il ny a pas de HTML. Dans le HTML il y a trs peu de PHP. On a donc vit le plus possible de mlanger lun et lautre.

CULTURE Les systmes de templates


Toutes les applications web modernes utilisent un systme de templates. Une particularit de Magento est de ne pas disposer dun langage spcifique pour cela ou, autrement dit, de considrer que le PHP est le langage de template.

Modifier un gabarit
Chaque fonction de Magento est prise en charge par un module. Ainsi en est-il des thmes graphiques comme des autres fonctions du logiciel. Pour chaque thme graphique, tous les gabarits se trouvent dans le rpertoire template, rpartis par module. Les fichiers du rpertoire template contiennent la fois du PHP et du HTML. Leur extension est .phtml. Ils sont appels ou non en fonction des agencements (voir section suivante) et des actions des utilisateurs. Le mcanisme de surcharge que nous avons vu lors de lajout dun thme est toujours valide. Dans votre paquet interface_blanche, crez un rpertoire de thme grisclair (le mme nom que prcdemment dans skin). Vous y ajouterez un rpertoire template lintrieur, qui lui-mme contiendra les gabarits dpendant du module ddi la gestion des produits dans le catalogue : crez les sous-rpertoires catalog/product.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

229

10 Personnaliser lapparence de sa boutique

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 1027

Nouveaux rpertoires pour les templates du thme

Copiez dans ce rpertoire le fichier view.phtml que vous trouvez dans le rpertoire quivalent dans le thme default du mme paquet. Il correspond laffichage principal dun produit. Il faudra que vous interrompiez le cache des blocs HTML (Systme>Gestion du Cache>Sortie de blocs HTML), et que dans la configuration, le thme que vous utilisez soit bien indiqu pour les gabarits (Systme>Configuration>Gnral>Design>Thmes>Gabarits ou Default). Modifiez le nouveau fichier view.phtml, de manire afficher le titre un peu plus haut, en dplaant la balise HTML <h3> qui le contient, comme dans lexemple ci-aprs.
Dplacement de la balise <h3> pour remonter le titre
<div class="product-info-box"> <div class="product-essential"> <form action="<?php echo $this-> getAddToCartUrl($_product)?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()):?> enctype="multipart/form-data"<?php endif;?>> <h3 class="product-name"> <?php echo $_helper->productAttribute($_product, $this->htmlEscape($_product->getName()), 'name') ?> </h3> <div class="product-img-box"> <?php echo $this->getChildHtml('media') ?> </div> <!-- ancien emplacement de la balise <h3> --> <div class="product-shop">

Figure 1026

Rpertoires des templates

Observez le rsultat sur le site public : le titre a bien t dplac. Toutes les modifications de gabarit se feront de la mme manire. Nhsitez pas ds maintenant faire des tentatives de toutes sortes, en observant chaque fois leurs effets dans le HTML gnr et sur laffichage dans le navigateur. 230
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 1028

Fiche produit : le titre est dplac.

Les gabarits spciaux


Quelques gabarits prsents par dfaut dans Magento ont un rle trs particulier, ou sont abondamment utiliss. Nous les dtaillons dans le tableau qui suit. Au total, il y a environ six cents autres gabarits dans frontend, certains peu ou pas utiliss.
Tableau 102 Fonctions des gabarits spciaux Gabarit
frontend/.../catalog/product/view.phtml frontend/.../catalog/category/view.phtml frontend/.../checkout/cart.phtml frontend/.../checkout/onepage.phtml frontend/.../contact/form.phtml frontend/.../page/3columns.phtml

CONSEIL Ne pas tout refaire !


Seuls les gabarits essentiels cits ici, ajouts quelques autres, ne devraient tre modifis. Il est tout fait possible de crer une prsentation nouvelle et diffrente en ne changeant quune dizaine de gabarits.

Fonction du gabarit

Fiche produit. Page de catgorie. Panier. Page de passage de commande. Formulaire de contact. Gabarit principal pour toutes les pages trois colonnes. Vous trouverez tous les autres gabarits principaux du mme ordre ct de celui-ci. Ainsi, au final, une page de la partie publique est toujours compose de lun de ces gabarits, avec lintrieur au moins lun des autres gabarits correspondant la fonction demande (par exemple contact/form.phtml pour inclure un formulaire de contact). Formulaire de connexion linterface dadministration. Gabarit principal de toutes les pages de linterface dadministration.

adminhtml/.../login.phtml adminhtml/.../page.phtml

Syntaxe des gabarits


Les gabarits sont en PHP. Ils contiennent essentiellement du HTML. Malheureusement donc, si vous ne connaissez pas lun de ces deux lan Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

231

10 Personnaliser lapparence de sa boutique

Magento

gages, il vous sera presque impossible daller plus loin dans la modification de laffichage de Magento.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

LINTRIEUR Licence et utilit du gabarit


Le code des gabarits est toujours prcd par deux commentaires, indiquant la licence et lutilit du fichier. Tant que vous ne redistribuez pas votre version de Magento, vous pouvez vous abstenir de faire de mme et ventuellement, si vous le souhaitez, nettoyer les gabarits que vous recopiez.

Souvenez-vous qu la fin dune requte, seul un document HTML est envoy. Cela implique que lorsquune page est compose de multiples gabarits (cest toujours le cas), le document contiendra tout le code HTML de tous ces gabarits. Il ne faut donc pas, par exemple, que deux dentre eux aient ouvert et ferm la balise <body>. Une bonne pratique, applique dans les fichiers disponibles, est de tenter le plus possible de sparer PHP et HTML. Vous observerez donc souvent, en dbut de fichier, une balise PHP qui dfinit des variables utilises par la suite :
<?php $_helper = $this->helper('catalog/output'); $_product = $this->getProduct(); ?>

SAVOIR Vos erreurs


Si vous faites des erreurs dans les modifications de templates, plusieurs choses peuvent se produire. La page peut sinterrompre, safficher en partie, ou avec des aberrations. Dans tous les cas, vous ne dtruirez rien ici, vous pourrez toujours revenir en arrire en recopiant le fichier originel.

Ceci est ralis afin dallger le code HTML qui suit. Nhsitez pas faire de mme (rappelez-vous que dans les gabarits on ne fait jamais de modification des donnes de Magento, mais seulement de laffichage ; nous sommes seulement dans la couche Vue du MVC). Enfin, vous observerez que souvent les auteurs du thme par dfaut nont pas utilis cette syntaxe habituelle :
<?php if($a > 3) { ?> <img src='x.gif' /> <?php } ?>

Mais celle-ci :
<?php if($a > 3): ?> <img src='x.gif' /> <?php endif; ?>

Ne vous en inquitez pas, le rsultat est le mme.

Classes et fonctions utiles


Au sein du code des gabarits, vous trouverez beaucoup dappels de fonctions internes Magento, qui permettent de lire une information, faire une mise en forme, etc. Voici les plus utiles. Les gabarits sont appels depuis la fonction dun objet PHP, un bloc. Vous pouvez en consulter le code afin dobserver tout ce qui est disponible. Par exemple, le gabarit catalog/product/view.phtml est associ lobjet PHP /app/code/core/Mage/Catalog/block/product/View.php. Cet objet est disponible dans la variable $this. Si vous observez cette 232
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

classe, vous verrez ainsi que cet appel renvoie les donnes du produit en cours (dans le fichier view.phtml) :
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
<?php $p = $this->getProduct(); ?>

Traduction
Parmi les fonctionnalits de tout bloc ($this), voici lappel traduction (fichier translate.csv) ; le nom de fonction peut sembler bizarre, mais il est valide, la chane de caractres x tant la chane traduire (premire colonne du fichier .csv) :
<?= $this->__(x) ?>

Remplacement des caractres spciaux


On a souvent besoin de transformer un texte afin de remplacer les caractres spciaux (lettres accentues, cdilles, etc. que lon veut viter dinscrire telles quelles dans le HTML). La mthode privilgie est la suivante :
<?= $this->htmlEscape( ...) ?>

Affichage dun bloc enfant


Vous trouverez trs souvent cet appel de fonction, qui permet dafficher un bloc inclus (enfant) daprs son intitul. Cette faon de faire est fortement lie aux agencements (expliqus ci-aprs) :
<?= $this->getChildHtml(enfant1) ?>

Les assistants
Parmi les autres classes du module, vous trouvez galement un assistant : helper. Cette classe fournit des services divers (petits calculs, mise en forme spciale, etc.). Le nom de lassistant doit tre indiqu (ici, catalog/image) :
<?php $h = $this->helper('catalog/image'); ?>

Ceci va chercher la classe du fichier /app/code/core/Mage/Catalog/ Helper/Image.php, qui propose diverses mthodes daffichage des images des produits.

Le modle
Il reste une dernire information utile au gabarit : le modle. Vous y trouverez toutes les donnes issues de la base de votre application. Un
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

233

10 Personnaliser lapparence de sa boutique

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

modle est la classe correspondant un type de donnes particulires. Les modles sont relis les uns aux autres (par exemple, le produit est reli sa catgorie). Le modle permet la lecture et lcriture des enregistrements qui lui sont associs, mais, dans le gabarit, seule la lecture devrait tre utilise. Voici comment rcuprer le modle pour les produits :
<?php $m = Mage::getModel('catalog/product') ?>

Cette seconde solution est un petit peu plus rapide, si elle est ralise souvent :
<?php $m = Mage::getSingleton('catalog/product'); ?>

Ceci correspond la classe dfinie dans le fichier Catalog/Model/Product.php.

app/code/core/Mage/

Une fois le modle obtenu, vous pouvez lui demander des enregistrements. Lobjectif ici est que vous nayez pas du tout de SQL crire. Voici la rcupration du produit 18 (toutes les tables de Magento ont des identifiants numriques) :
<?php $p = $m->load(18); ?>

LINTRIEUR Interprtation du PHP


Le code PHP mis en place dans les gabarits sera interprt tel quel. Vous pourriez donc tout fait y faire des traitements qui nont rien voir avec ceux prvus pour Magento (accder une autre base de donnes, utiliser un formulaire, crer des fichiers...).

Pour aller chercher un objet particulier en fonction de filtres, dordre, etc., vous utiliserez les fonctions disponibles dans le modle :
<?= $p->getPrice() ?>

Les fonctions disponibles dans les classes de blocs, assistants et modles sont trs diverses et nombreuses. Il vous faudra abondamment tudier les templates existants et le code PHP de ces fichiers afin de retrouver un chemin vers chaque donne que vous dsirez afficher.

Modifier les agencements (layouts)


Nous avons presque termin notre tour des modifications possibles concernant la mise en forme dun site conu avec Magento. Voil maintenant ce quil pourrait nous rester faire... Ajouter des lments de prsentation qui nont pas t prvus du tout au dpart, par exemple le rsultat de lappel un service distant. Pour cela, nous verrons la modification du code mme de Magento dans le chapitre 11.

234
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Indiquer quel bloc est affich et quelle occasion : cest le rle des

agencements ou layouts.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Lorsquun internaute demande voir une page du site (en saisissant une URL ou en cliquant sur un lien), il appelle en ralit toujours index.php sur le serveur. La faon dont cette page va safficher, savoir sa mise en forme lcran, est dtermine en premier lieu par une instruction PHP, qui indique quel est lagencement (fichier XML) utiliser. En fonction de cet agencement vont tre dtermins les blocs qui devront tre affichs. Habituellement, cest lagencement du module en cours qui est utilis et, lintrieur, le sous-agencement correspondant la fonction en cours (exemple : fonction product/viewdu module catalog).

Syntaxe gnrale et surcharge


Les fichiers dfinissant les agencements se trouvent dans le rpertoire layout du thme demand. Le mcanisme de surcharge est valable une fois encore pour les agencements, ce qui permet de ne pas tout reprendre zro en cas derreur, de modification ou de mise jour.

Structure dun fichier dagencement


Le principal fichier dagencement utilis sur le site public est Examinons sa structure.
Structure du fichier dagencement page.xml
<layout version="0.1.0"> <default> <block > </block> </default> <print> </print> <page_empty> </page_empty> <page_one_column> </page_one_column> </layout> page.xml.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

235

10 Personnaliser lapparence de sa boutique

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La premire balise <layout> na pas dimportance. Elle signale simplement que lon se trouve dans un fichier de type layout. lintrieur, chaque balise correspond un sous-agencement. Le premier est toujours <default>, et les autres sont des mises jour de default. Dans chacun de ces sous-agencements est indiqu ce qui sera affich, sous forme de blocs (balise block).

En pratique
Faisons quelques essais afin de comprendre ce mcanisme complexe. 1 Crez, dans votre rpertoire de thme, votre propre rpertoire layout, et copiez-y le fichier page.xml. 2 Ouvrez le fichier dans un diteur de texte et supprimez le contenu de la balise default !
<default></default>

3 Observez le rsultat sur la page daccueil : la page est blanche. Plus

aucun gabarit nest utilis.


Figure 1029

Nouveau rpertoire des agencements

Le sous-agencement default de page.xml est un cas particulier. Tous les autres agencements, aprs default, lutilisent. 4 Revenez en arrire dans la modification de page.xml, de faon ce que default retrouve son contenu original, et rendez-vous sur le site, sur la page About Us (lien en bas de page). Vous obtenez alors une page de dmonstration qui utilise lagencement 1 colonne (cest-dire sans les colonnes de gauche et de droite avec des botes spciales comme sur la page daccueil ; en revanche, la composition du texte de la colonne peut tre pour sa part ralise en plusieurs colonnes, comme sur la figure qui suit).

Figure 1030

Affichage dune page de dmonstration sur une colonne (le contenu luimme est par contre sur trois colonnes)

236
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

5 Cette page fait partie du CMS (et du module associ), donc copiez

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

dans votre rpertoire layout le fichier cms.xml du rpertoire layout dorigine. lintrieur, la structure est identique lagencement page, avec un sous-agencement default, suivi par dautres sous-agencements. 6 Videz la balise cms_page :
<cms_page> </cms_page>

Vous obtenez un rsultat bien diffrent : seul ce qui tait spcifique cet agencement, savoir laffichage dune page de contenu au milieu, a t supprim.

Figure 1031

Page affiche sans agencement spcifique au contenu

Modification de la balise <default>


Faisons une dernire constatation. Ne revenez pas en arrire, mais modifiez la balise default de cet agencement, en y plaant, au dbut, ce que nous venons de supprimer dans cms.xml.
Copie dun bloc dans la balise <default>
<default> <reference name="footer"> <block type="cms/block" name="cms_footer_links" before="footer_links"> <!-- -> <action method="setBlockId"> <block_id>footer_links</block_id> </action> </block> </reference> <reference name="content"> <block type="cms/page" name="cms_page"/> </reference> </default> <cms_page> </cms_page>

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

237

10 Personnaliser lapparence de sa boutique

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Nous sommes revenu un affichage correct. Que sest-il pass ? Gnralement (et cest le cas ici), de multiples sous-agencements sont utiliss pour afficher une page, dans cet ordre : 1 page.xml : default. 2 .xml :default (cest--dire le sous-agencement default de tous les agencements), qui mettent jour page.xml. 3 .xml :... qui le mettent jour (tous les sous-agencements dont le nom correspond la page demande). Cest de nouveau un systme de surcharge que nous voyons ici, qui vient sajouter celui qui sapplique habituellement entre les thmes. Revenez en arrire compltement, afin que nous ayons un affichage correct sur toutes les pages.

Le contenu des agencements


Dans les agencements et sous-agencements, vous trouvez les balises block, reference et action. Ce sont ces trois simples balises qui vont former lensemble des agencements. Revenons au fichier page.xml :
Dbut du fichier page.xml
<default> <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml"> <block type="page/html_head" name="head" as="head">

La balise <block>
La balise block signifie : crire un bloc. lintrieur, lattribut type est primordial. Il correspond une classe et un fichier. Par exemple, le type page/html correspond la demande daffichage du bloc cod dans le fichier Html.php du rpertoire Block de /app/code/code/Mage/Page/. Lattribut name est associ lattribut name de la balise reference (voir section suivante). Lattribut as correspond lui aussi un nom, celui qui serait indiqu dans la fonction getChildHtml vue dans la section prcdente au sujet des gabarits :
<?= $this->getChildHtml(head) ?>

238
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Il sagit donc du moyen de mettre des blocs, choisis par leur as, dans dautres blocs : dans le fichier .phtml du bloc, utilisez le code ci-dessus et, dans le bloc dans le layout, mettre un bloc enfant avec pour as le mme nom. Bien sr, le bloc principal de default na pas de as, puisquil nest jamais inclus. Les autres attributs dpendent du type de bloc. En voici les principaux : page/html : la page complte. Lattribut template indique quel gabarit utiliser ; page/html_head : len-tte de page HTML. Il sera complt par des balises action ; core/template : un bloc quelconque, ce sont les blocs les plus simples. Lattribut template indique quel gabarit utiliser.

CONSEIL Soignez lattribut as


Il est prfrable de choisir trs mticuleusement la valeur de lattribut as, sinon les gabarits seront incomprhensibles. Bien sr, deux blocs ne peuvent pas avoir la mme valeur pour cet attribut.

La balise <reference>
Dans ce mme agencement, ou dans dautres agencements, il peut y avoir des balises reference, qui viennent complter un bloc. Dans page.xml nous trouvons le bloc principal :
Le bloc principal dans page.xml
<default> <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

Puis, un peu plus loin, un autre sous-agencement vient complter ce bloc :


Sous-agencement compltant le bloc prcdent dans page.xml
<page_empty> <reference name="root"> <action method="setTemplate"> <template>page/one-column.phtml</template> </action>

Cela signifie que le bloc root de default sera modifi lorsque ce sousagencement page_empty sera utilis (ici, cest lattribut template qui est modifi). Souvent, ce mcanisme ne servira pas remplacer un attribut, mais ajouter des lments dans le bloc. Remarquez ainsi dans cms.xml :

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

239

10 Personnaliser lapparence de sa boutique

Magento

Ajout dun bloc de type cms/page dans cms.xml


<cms_page> <reference name="content"> <block type="cms/page" name="cms_page"/> </reference> </cms_page>

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Un bloc de type cms/page est ajout dans le bloc bien dfini dans page.xml :
Le bloc content dans page.xml

content.

Celui-ci est

<default> <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml"> <block type="core/text_list" name="content"... />

La balise <action>
Quant la balise action, elle a des rles varis, en fonction du type de bloc. Laction effectue est dfinie dans le code par une mthode. Comme indiqu ci-dessus au sujet de la balise reference, dans un bloc page/html, elle permet de remplacer le gabarit (mthode setTemplate). Dans un bloc page/html_head, la balise action sert a ajouter des fichiers CSS et JavaScript via la mthode addJs :
Mthode addJs appele par la balise action
<block type="page/html_head" name="head" as="head"> <action method="addJs"> <script>prototype/prototype.js</script> </action>

De par cette conception des agencements, une page sera donc assez difficile analyser : il faut retrouver les agencements utiliss, daprs lesquels on pourra faire un bilan des blocs, et enfin analyser le contenu de ces diffrents blocs. Passons maintenant la pratique au moyen de quelques exemples.

Exemple : changer la couleur du pied de page


Pour commencer, changeons la couleur du pied de page. Analysons tout dabord les CSS. Dans boxes.css, nous trouvons les couleurs : 240
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Les couleurs dans boxes.css


.footer-container { border-top:15px solid #B6D1E2; } .footer { width:930px; margin:0 auto; padding:10px 10px 4em; background-color:#618499; }

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Quelle est la meilleure solution pour modifier la couleur ? vitons de surcharger cette CSS, tellement complte quelle serait reprendre chaque mise jour. la place, crons notre propre CSS dans notre thme. Ajoutons le fichier /skins/frontend/.../css/boxes2.css dans notre paquet et thme, avec ceci comme contenu :
Contenu de boxes2.css
.footer-container { border-top-color:#CCC; } .footer { background-color:#AAA; }

Il faut maintenant que notre CSS soit utilise en plus de la prcdente. Comme on veut que cela le soit dans toutes les pages, modifions lagencement default de page.xml, en y ajoutant la CSS que nous venons de crer (mthode addCss) la suite des autres CSS dj utilises :
Ajout de notre CSS dans page.xml via la mthode addCss
<default > <action method="addCss"> <stylesheet>css/menu.css</stylesheet> </action> <action method="addCss"> <stylesheet>css/clears.css</stylesheet> </action> <action method="addCss"> <stylesheet>css/boxes2.css</stylesheet> </action>

SAVOIR Ordre des actions


Les actions sont naturellement utilises dans lordre de leur dfinition. Cela compte pour les CSS comme pour le JavaScript.

En rsultat, les couleurs du pied de page seront bien modifies selon le contenu de notre fichier boxes2.css.

Figure 1032

Pied de page modifi

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

241

10 Personnaliser lapparence de sa boutique

Magento

Exemple : supprimer un bloc


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Deuxime exemple : nous voulons supprimer le bloc dont le titre est Back to school qui saffiche en permanence dans la colonne de droite, qui na pas de rapport avec notre activit. Observons lagencement dans toutes les pages.
Les diffrentes zones dans page.xml
<default > <block type="core/text_list" name="content" as="content"/> <block type="core/text_list" name="right" as="right"/> <block type="page/html_footer" page.xml,

car la colonne apparat sur

Nous y trouvons la dfinition de la zone de droite, right. Par quoi cette zone est-elle remplie ? Cherchons dans les autres agencements. On trouve que nombre dentre eux lutilisent, par exemple catalog.xml, dans son sous-agencement default.
Figure 1033

Le bloc Back to school

La zone right dans lagencement catalog.xml


<default> <reference name="right"> <block type="core/template" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/ sidebar.phtml"/> <block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/> </reference>

Allons maintenant observer les diffrents gabarits appels, en particulier callouts/right_col.phtml.


Le gabarit right_col.phtml
<div class="box"> <img src="<?php echo $this->getSkinUrl(images/media/ col_right_callout.jpg) ?>" width="195" alt="<?php echo __('Keep your eyes open for our special Back to School items and save A LOT!') ?>" style="display:block;" /> </div>

Figure 1034

Rsultat sur le site public : le bloc a t enlev.

Aucun doute, nous lavons trouv. Plutt que de le vider, faisons une simple surcharge dans le fichier catalog.xml, en enlevant le lien (cest-dire tout lappel ce bloc).
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

242

Suppression de lappel au bloc right dans catalog.xml


<default> <reference name="right"> <block type="core/template" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/> </reference>

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Sur le site public, le rsultat est correct, le bloc a disparu.

Exemple : ajouter un bloc HTML


On aimerait maintenant ajouter un bloc en plus, sur la gauche de la page, pour afficher lheure sur toutes les pages du catalogue. Aprs lexemple prcdent, celui-ci devrait tre facile. Commenons par prparer notre bloc. Crons un gabarit infos.phtml la racine du rpertoire des gabarits (template) de notre thme. Il sagit dun simple code pour afficher lheure.
Cration dun gabarit infos.phtml pour afficher lheure
<div class="box base-mini"> Il est <?= date('H:i:s') ?> </div>

Maintenant, ajoutons ce bloc dans le fichier dagencement, de manire ce quil soit plac dans la colonne de gauche. Inspirons-nous des modifications prcdentes et, toujours dans catalog.xml (on aurait pu modifier nimporte quel agencement), ajoutons un bloc avec une rfrence au bloc left (gauche) issu du layout colonne de page.xml.
Ajout du bloc infos dans lagencement catalog.xml (colonne de gauche)
<default> <reference name="left"> <block type="core/template" name="infos" template="infos.phtml"/> </reference> <reference name="right">

Figure 1035

Lheure saffiche dans la colonne de gauche.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

243

10 Personnaliser lapparence de sa boutique

Magento

Exemple : ajouter un lien vers une page


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Cette fois, on se propose dajouter un lien vers notre page de contenu cre prcdemment, Recette du riz pilaf , dans le mini-menu en haut.

Figure 1036

Emplacement souhait pour un nouveau lien

Comment ces liens sont-ils crs ? Comme on sait quils apparaissent sur toutes les pages, examinons notre fichier dagencement page.xml. Entre les notices (global_notices) invisibles ici, sous le menu, et le fil dAriane (breadcrumb), se trouve un bloc den-tte (header).
Le bloc den-tte (header) dans page.xml contenant un bloc lien (top.links)
<block type="page/html_notices" name="global_notices" as="global_notices" template="page/html/notices.phtml" /> <block type="page/html_header" name="header" as="header"> <block type="page/template_links" name="top.links" as="topLinks"/> <block type="page/switch" name="store_language" as="store_language" template="page/switch/ languages.phtml"/> <block type="core/text_list" name="top.menu" as="topMenu"/> </block> <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>

Ce bloc contient trois autres blocs, dont un nomm top.links, de type page/template_links. Allons voir le gabarit de ce bloc, le fichier /app/ design/frontend/.../template/page/template/links.phtml.
Gabarit des blocs de type links
<?php $_links = $this->getLinks(); ?> <?php foreach($_links as $_link): ?> <?php echo $_link->getLabel() ?> <?php endforeach; ?>

Ce fichier fait appel $this->getLinks(). Nous allons trouver cette mthode dans le code du bloc correspondant :/app/code/core/Mage/ 244
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Page/Code/Block/Template/Links.php.

Dans ce petit fichier, une seule

fonction est intressante.


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La fonction addLink dans Links.php


public function addLink($label, $url=, ...) {

Il nous faut donc trouver quels sont les agencements qui font appel cette mthode addLink, afin de voir comment elle fonctionne. Nous la trouvons dans plusieurs agencements, par exemple dans customer.xml.
La mthode addLink dans customer.xml
<default> <!-- Mage_Customer --> <reference name="top.links"> <action method="addLink" translate="label title" module="customer"> <label>My Account</label> <url helper="customer/getAccountUrl"/> <title>My Account</title> <prepare/><urlParams/> <position>10</position> </action> </reference> </default>

Les attributs translate et module permettent de demander la traduction de lintitul et du contenu de linfobulle qui apparat au survol de la souris sur le lien. Les balises label, url, title correspondent aux attributs de la balise HTML de lien <a> qui va tre gnre. Il nous suffit maintenant de faire une modification quivalente pour ajouter le lien vers notre page. Comme nous voulons que ce lien soit prsent partout, nous allons lajouter un sous-agencement default, dans notre propre fichier dagencement cms.xml, puisque ce lien concerne le contenu gr par le CMS.
Ajout du bloc top.links dans le sous-agencement default de cms.xml
<default> <reference name="top.links"> <action method="addLink"> <label>Recette du riz pilaf</label> <url>riz-pilaf</url> <position>20</position> <prepare>true</prepare> </action> </reference>

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

245

10 Personnaliser lapparence de sa boutique

Magento

<reference name="footer">

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 1037

Lien ajout dans le menu

Personnaliser le design via linterface dadministration


CONSEIL
Conservez la charte graphique du site
Le plus souvent, vous voudrez maintenir un site le plus homogne possible, en gardant les options par dfaut, plutt que de choisir des designs personnaliss. Cette option est donc dun intrt limit et ne doit sutiliser que de faon exceptionnelle.

Enfin, pour finir le tour des possibilits de personnalisation de la mise en forme du site, signalons les options disponibles via linterface dadministration de Magento. Elles permettent de donner une prsentation particulire une page (CMS), une catgorie ou un produit, au moyen de longlet Design Personnalis.

Paramtres de design personnalis


Pour notre page Riz Pilaf , voici par exemple les paramtres proposs :

Figure 1038 Onglet des designs personnaliss dune page du CMS

Toutes ces options utilisent une valeur par dfaut (afin de se comporter comme les autres pages), vous permettant de ne modifier que les options spcifiques la page. 246
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La premire option, le Thme personnalis, montre les diffrents paquets et thmes disponibles, afin de nous permettre dappliquer lun dentre eux. Ceci peut mme tre limit dans le temps, nous pouvons indiquer quil ne sera utilis quentre une date de Dbut du thme personnalis et une Date de fin du thme personnalis. De mme, nous pouvons choisir lAgencement de dpart (voir la section prcdente), par exemple, en une seule colonne (1 column) au lieu de trois (3 columns). Enfin, il est possible dajouter un code XML de mise jour dagencement, de la mme manire que ce qui pourrait tre fait dans un fichier layout, comme nous lavons vu dans les exemples prcdents (ici, le fichier serait plutt app/design/frontend/default/default/layout/cms.xml, mais cela na pas dimportance, car les paramtres de tous ces fichiers sajoutent les uns aux autres).

Exemple dajout de paramtres de design personnalis


Voici un exemple dajout : lorsque nous sommes sur cette page, indiquons lutilisation dun fichier CSS particulier, skin/frontend/default/ default/css/cms.css, que nous allons crer, de manire afficher les liens en vert (via lattribut color) et dans une police de caractres de plus grand corps (font-family et font-size). De plus, nous allons ajouter une bordure la zone centrale de texte (border). Voici quoi ressemblera cette nouvelle feuille de style CSS.
Fichier CSS dans lequel on modifie lapparence des liens
a, #nav span { color:#0C4; text-decoration:none; } a { font-family: Tahoma, sans-serif; font-size:120%; } a:visited { color:#0C9; } #main { border: 1px solid lightgray; padding: 10px; width: 50%; }

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

247

10 Personnaliser lapparence de sa boutique

Magento

Pour utiliser cette nouvelle feuille de style en plus des autres fichiers CSS dj spcifis, il suffira dajouter dans le champ XML de mise jour dagencement le code suivant.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Application de la CSS modifie via le champ XML de mise jour dagencement


<reference name="head"> <action method="addCss"> <stylesheet>css/cms.css</stylesheet> </action> </reference>

Figure 1039

Modifications personnalises du design

248
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Ajouter et crer une extension

11
SOMMAIRE

B Installer une extension

Magento est un logiciel hautement extensible, ce qui signifie que par lajout de modules supplmentaires, on peut lui ajouter toutes sortes de fonctionnalits. Voici un guide complet pour lextension de Magento : aprs linstallation de modules supplmentaires disponibles au tlchargement sur le site web de Magento, il indique les mthodes, fichiers et astuces utiles au dveloppement dune extension complte et complexe.

B Crer une extension B Exemples de cration


de modules MOTS-CLS

B Magento Connect B cl dinstallation B configuration B XML B PHP B classe B mthode B bloc B paquet

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento est un logiciel hautes capacits dextension, ce qui signifie que ses auteurs ont prvu quon puisse le modifier loisir en ajoutant toutes sortes de modules complmentaires offrant des fonctionnalits adaptes tous les besoins. Certaines de ces extensions sont disponibles sur lInternet et ne demandent qu tre installes, mais il est tout fait possible de dvelopper un module en fonction de ses propres besoins. Toutefois, suivant le rsultat souhait, les difficults seront plus ou moins importantes. En effet, si lapplication dune extension existante est aise, le dveloppement dune nouvelle extension sera une tche plus dlicate, et ncessitera gnralement une bonne connaissance du PHP.

Installer une extension prexistante


CONSEIL Consultez le catalogue
des extensions
Il est indispensable que, votre projet en tte, vous alliez sur le site web officiel de Magento afin de consulter quelles extensions sont disponibles. Rendez-vous ladresse suivante et accdez Magento Connect.
B http://www.magentocommerce.com

Des dveloppeurs du monde entier ont prpar, cr et test des extensions pour Magento, en les rendant disponibles au tlchargement sur le site web officiel afin quelles soient utilisables par tous. Lannexe A propose quelques extensions qui pourraient savrer particulirement intressantes pour un projet de e-commerce. Sur le site de Magento, chaque extension dispose dune page ddie sur laquelle est indique notamment la cl dinstallation de lextension. Le visiteur utilise cette cl dinstallation pour dclencher le tlchargement et la mise en place de cette extension depuis son propre rpertoire de Magento. Il na donc pas lui-mme raliser le tlchargement dun fichier, sa dcompression, son placement dans des rpertoires particuliers. Or si cette mthode est pratique et rapide, elle savre toutefois moins robuste et moins pdagogique que les faons habituelles dtendre une application avec un module existant. Loutil qui ralise le tlchargement, et la partie du site qui y est associ, se nomme Magento Connect. Il est install en mme temps que Magento, mais cest une application part, qui exige une authentification secondaire. Sur le site officiel, Magento Connect est un dpt dextensions o vous trouverez les cls dinstallation ainsi que des pages de prsentation et de communication sur ces produits.

Choisir une extension


Sur la page daccueil de Magento Connect, les extensions proposes sont de trois types, en fonction de leur origine et de leurs modalits de mise disposition : Magento Core : extensions issues du travail des dveloppeurs officiels de Varien Inc ; 250
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Community : extensions gratuites et souvent libres issues des dve-

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

loppeurs de la communaut, o quils se trouvent dans le monde ; Commercial : extensions payantes.

Figure 111

Catgories dextensions

Dans la colonne de droite, les extensions sont classes par catgorie (correspondant au type de fonctionnalits proposes : paiement, livraison, design, etc.) et en fonction de leur origine. Cliquez sur un des liens de ce menu ou du prcdent pour rejoindre les listes des extensions.
SAVOIR tat des extensions
Les extensions proposes sur le site de Magento peuvent se trouver en diffrents tats de stabilit : alors que certaines sont encore en dveloppement, dautres sont en version alpha, bta ou sont considres comme stables. Cette information est indique dans le champ Stability de la fiche de lextension. Dveloppement : lextension nest pas termine, et ne peut tre propose la communaut. Alpha : lextension na pas t teste abondamment, et comporte sans doute des bogues ; en principe, de tels dveloppements ne devraient pas tre publis ici, mais certains auteurs, nayant plus de temps ou de volont pour maintenir ces extensions, ils prfrent les proposer malgr tout au public plutt que de les abandonner. Bta : aprs avoir t en alpha, lextension a t ventuellement corrige, et les tests internes qui ont alors t effectus nont pas montr de bogue. Stable : aprs avoir t en bta, aucun bogue na t report depuis la dernire modification. Attention, les extensions ne sont pas vrifies systmatiquement, et en fonction de lhonntet de son dveloppeur, un module disponible peut tre dclar stable alors quil ne fonctionne pas correctement.

Figure 112

Choix des catgories dextensions

Supposons que nous dsirions tendre notre Magento afin daccepter des mthodes de livraison diffrentes, en particulier pour des envois en France. Cliquons dans le menu droite sur Shipping Methods. Une liste nous est alors prsente, proposant plusieurs critres de tri (menu droulant Sort by), comme la date de cration, le nom du contributeur, le nom de lextension ou sa notation. Nous allons ici la trier par notation

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

251

11 Ajouter et crer une extension

Magento

(Rating) afin de choisir les mthodes de livraison qui ont t considres comme les meilleures par les utilisateurs.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 113

Choix dun critre de tri

Cela nous permet de voir un certain nombre de modules valus par la communaut comme mritant cinq toiles, puis, sur la deuxime page, nous dcouvrons une extension bien connue des utilisateurs franais de Magento : Owebia Shipping 2, cre et mise en ligne par Owebia. Cliquons dessus pour accder sa fiche de prsentation. Voici la description propose par ses auteurs : Ce module met disposition trois modes de livraison configurables avec une syntaxe trs souple. Le premier mode de livraison permet par dfaut la gestion des modes de livraison Colissimo, Chronopost et Export 3J.

Figure 114

Page de prsentation dune extension

252
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

En plus des informations de base sur lextension prsentes dans la fiche en haut de page, cinq onglets sont disponibles afin den savoir plus : Overview : rsum et description, comme ci-dessus ; Reviews : commentaires dutilisateurs, servant aussi souvent de documentation additionnelle ; Releases : diffrentes versions tlcharger, de la plus rcente la plus ancienne ; Patches : lien vers le forum de Magento, dans une section patches (corrections) ddie cette extension ; ainsi, chaque extension dispose dune zone de forum qui lui est propre o vous pourrez poser vos questions et trouver des rponses ; Documentation : lien vers le forum de Magento, dans une section documentation ddie cette extension, o les auteurs peuvent poster des tutoriels et assistants.

Figure 115

Onglets dinformation sur lextension

Obtenir la cl dinstallation
Au vu des informations fournies, nous choisissons dinstaller cette extension Owebia Shipping 2. Nous devons alors obtenir une cl dinstallation, qui se trouve sur la page principale de lextension, gauche, ou bien parmi les Releases : demandez la cl en cliquant sur le bouton Get extension key. On vous demande alors de cocher une case pour accepter la licence sous laquelle lextension est mise disposition, puis de cliquer nouveau sur un bouton GET EXTENSION KEY.
CONSEIL Lire la licencedes extensions
La licence sous laquelle une extension est mise disposition par son crateur peut tre lue en cliquant sur le lien Extension licence agreement qui apparat une fois que lon a cliqu sur le bouton Get extension key. Lisez bien ce texte de licence, car ses conditions peuvent rendre lextension inutilisable pour vous. Les licences des extensions peuvent varier. Chacune est rattache un organisme qui la diffuse ; pour ne pas relire tout le texte en entier chaque fois, vous pourrez facilement trouver de leur part un rsum de la licence afin de savoir si elle vous convient ou pas.

Figure 116

Accs la cl de lextension

Owebia Shipping 2 est propose sous la mme licence que Magento, savoir la licence OSL v.3 (Open Software License), donc nous considrons cela convenable. Nous pouvons enfin obtenir la cl !
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

253

11 Ajouter et crer une extension

Magento

Figure 117

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La cl est obtenue.

ALTERNATIVE Extensions commerciales


Dans le cas dune extension payante, la cl vous sera fournie par le site des auteurs (bouton Visit Page), dans les conditions commerciales dfinies par le distributeur, moins quun mcanisme diffrent de distribution soit propos.

Cette cl ne varie pas dune version lautre ou dun utilisateur lautre. Il ne sagit pas dun dispositif de scurit, mais seulement didentification. Le bouton SELECT ne fait que slectionner la case, dont il faudra ensuite copier le contenu : magento-community/Owebia_Shipping_2.

Tlcharger et installer lextension avec Magento Connect


Nous allons maintenant utiliser loutil Magento Connect de notre propre installation afin de demander le tlchargement et la mise en place de lextension qui correspond cette cl. Dans linterface dadministration, utilisez le menu Systme>Magento Connect>Magento Connect Manager. Une authentification spciale est demande. Seul un administrateur complet peut la raliser, avec ses Username et Password habituels. Toute linterface nest malheureusement quen anglais.

LINTRIEUR Magento et Magento Connect


Bien que nous nayons ralis quune seule installation, Magento et Magento Connect sont bien deux applications spares. Les fichiers de la seconde se trouvent dans le rpertoire downloader de la premire.

Figure 118

Authentification pour Magento Connect

En haut, les onglets permettent de passer de la configuration (Settings) aux listes dextensions installes (Extensions). Le lien Return to admin permet de sortir de Magento Connect pour revenir ladministration, tandis que Log out permet de se dconnecter de Magento Connect pour 254
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

sy reconnecter avec un autre compte, ce qui est a priori inutile. Vrifions plutt la bonne configuration de loutil, via longlet Settings.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 119

Onglets disponibles de Magento Connect

Le seul paramtre configurer ici est la version minimum que vous exigerez des extensions, du point de vue de la stabilit. La valeur par dfaut est Stable : Alpha : les extensions en version alpha, bta ou stables seront acceptes. Beta : les extensions en version bta ou stables seront acceptes. Stable : seules les extensions stables seront acceptes (paramtre conseill). Il ny a pas de problme pour nous, lextension Owebia Shipping 2 tant stable. Revenons la liste (onglet Extensions), qui prsente les extensions dj installes. Nous pouvons alors dsinstaller chacune dentre elle (action Uninstall), ou bien la rinstaller (action Reinstall). Cette dernire opration est rare.
Figure 1110

Extensions installes

MTHODE Interrompre la boutique

Cocher loption Clear all sessions after successfull install or upgrade (Annuler toutes les sessions aprs une installation ou une mise jour russie) est une pratique raisonnable ; cela aura pour effet de dconnecter tous vos visiteurs en ligne la fin de linstallation (sans perdre leur panier), vitant ainsi des tats incohrents.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

Si vous installez une nouvelle extension sur une boutique dj en place, peut-tre dciderez-vous auparavant de linterrompre pendant la dure de lopration. Lidal est de tester cet ajout sur un serveur de test, afin dobserver si le maintien des visiteurs pose problme. Tout dpend en fait de lextension installer.

255

11 Ajouter et crer une extension

Magento

Quant au systme dinstallation, il est disponible au-dessus de cette liste (Install New Extensions). Collez la cl de lextension dans la case 2, et cliquez sur le bouton Install.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 1111

Formulaire dinstallation dune extension

Une fentre de console souvre alors pour vous afficher les informations propos du droulement : 1 Un fichier compress (.tgz) est tlcharg. 2 Il est dcompress et install. Cliquez sur le bouton Refresh (actualiser). Lextension apparat comme installe.

Figure 1112

Console dinformation sur linstallation

Figure 1113

La nouvelle extension apparat dans la liste des extensions installes.

Dautres extensions peuvent ainsi tre installes les unes aprs les autres.

256
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Une fois linstallation termine, vous pouvez revenir ladministration de votre boutique en faisant simplement usage du lien Return To Admin, sans autre procdure de redmarrage supplmentaire.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

ASTUCE Vrifier les mises jour


Le bouton Check for Upgrade affiche les mises jour disponibles pour Magento et les extensions actuellement installes, et permet ainsi, sans repasser par le site officiel, de disposer de la dernire version.

Exemple de configuration
Gnralement, un processus de configuration suit linstallation. Dans le cas de notre extension Owebia Shipping 2, rendons-nous dans la configuration des livraisons de Magento par le menu Systme>Configuration. On y observe un onglet supplmentaire, sans que lon puisse toutefois y accder. Il faut, pour y tre autoris, se dconnecter puis se reconnecter manuellement.

LINTRIEUR Administrateur interdit daccs


Linterdiction daccs longlet de lextension provient du fonctionnement interne de Magento. En effet, les droits de chaque utilisateur de ladministration sont enregistrs leur ouverture de session, y compris ceux des administrateurs complets. Il faut donc se dconnecter et reconnecter, afin que les droits supplmentaires exigs par cette extension soient acquis par notre utilisateur.

Figure 1114

Onglet spcifique lextension Owebia Shipping 2

Figure 1115

chec de laccs longlet Owebia

Revenons ensuite ce menu Systme>Configuration>Gnral>Owebia. LUnit de poids correspond aux valeurs indiques pour les produits. De plus, vous pouvez demander, lorsque lutilisateur choisit sa mthode denvoi, ce que tous les modes de livraison lui soient prsents, mme sils sont indisponibles : mettez oui dans le champ Afficher quand indisponible, si vous estimez que cela peut avoir une quelconque utilit.

Figure 1116

Paramtres de configuration dOwebia

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

257

11 Ajouter et crer une extension

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 1117

Configuration du mode de livraison : Owebia Shipping 1

Mais lessentiel de la configuration se ralise dans un autre emplacement : Systme>Configuration>Ventes>Modes de livraison. Trois modes de livraison identiques sont alors proposs, bien que seul le premier soit utile pour le moment. Cependant, des cas particuliers, telle une activation et dsactivation rgulire de votre part dune des solutions denvoi, pourraient justifier votre utilisation des deux autres. Chaque mthode peut tre Active ou non, et porte un Titre au choix. Mais le plus important ici est le champ Configuration. Il sagit dune chane de caractres encode dans une syntaxe spcifique cette extension, qui est documente via le lien Aide qui se trouve en dessous du champ. Il sagit de multiples blocs de donnes, tous cods sur le modle suivant.
Exemple de code pour les donnes de configuration de lextension Owebia Shipping 2
# Colissimo National + Recommand R1 { label: "Colissimo National Recommand R1", code: "colissimo_r1", tracking_url: "http://www.coliposte.net/particulier/ suivi_particulier.jsp?colispart={tracking_number}", destination: "AD,FR,MC", prices_range: "*=>50.00", fixed_fees: 0.00, fees_table: "0.5:7.60, 1.0:8.50, 2.0:9.70, 3.0:10.60, 5.0:12.40, 7.0:14.20, 10.0:16.90, 15.0:18.90, 30.0:24.90" }

258
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La premire ligne est un commentaire, prcd par un dise. Puis des accolades entourent le contenu du bloc, qui contient des proprits spares par des virgules. Le label est le nom de la solution denvoi. Il est complt par un code, qui doit tre unique. La proprit tracking_url dsigne le lien de suivi du colis indiqu aux clients, qui sera automatiquement complt par le numro grce la syntaxe spciale {tracking_number}. La destination est un filtre partir des codes de pays (ici, Andorre AD, la France FR et Monaco MC). La proprit prices_range permet de limiter cette solution des colis dun minimum ou dun maximum dune certaine valeur (ici, pour les colis jusqu 50 ). La proprit fixed_fees indique une premire valeur, les frais fixes. Y sont ajouts les frais dpendant du poids total des articles, via la fees_table. Ici, il faut lire : jusqu 500 grammes : 7,60 , jusqu un kilogramme : 8,50 , etc. LURL de suivi devrait tre laisse vide (car remplac par tracking_url cidessus). La proprit Afficher quand disponible indique si un message dinformation saffiche si, cause du poids ou du pays, ce mode nest pas disponible. Si, linverse, plusieurs sont disponibles, ils seront tous proposs, sauf si Arrt la premire correspondance trouve est choisi. Enfin, lOrdre de tri dtermine lordre daffichage par rapport aux autres modes de livraison.

ASTUCE Mettre jour les tarifs des


transporteurs
Cette configuration est rcuprable sur le forum de documentation de lextension rgulirement, afin que vous nayez pas vous-mme consulter les tarifs du transporteur national concern.
B http://www.magentocommerce.com/boards/

viewchild/13573/

CONSEIL Frais de livraison et frais de


traitement
Vous tes tout fait libre de mettre en place des frais fixes en plus du prix rel, condition que cela soit clair pour le client. Par contre, attention, dans certains cas en France, la jurisprudence a interdit la gratuit des frais de port.
B http://www.legalis.net/jurisprudence-

decision.php3?id_article=2114

Crer soi-mme ses extensions


Modifier Magento ?
Thoriquement, il serait possible de se passer compltement du systme dextension de Magento, et de modifier loutil directement, en modifiant ses fichiers PHP sur le disque dur (voir le tableau dcrivant larborescence de Magento ci-aprs). Cela consisterait modifier directement les fichiers .php des rpertoires app/code et lib. Dans le cas de lib, cest effectivement une solution envisageable. Plus exactement, il est possible de contribuer, publiquement ou pour soimme, ces bibliothques, et de modifier le comportement de Magento en consquence. En pratique, le besoin se prsentera trs rarement. Par contre, vous ne modifierez en principe jamais les fichiers PHP de app/ code existants, de mme que les fichiers de configuration et de design
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

ATTENTION Ne pas modifier


Toute modification des fichiers du noyau de Magento sera potentiellement crase sans avertissement en cas de mise jour.

LINTRIEUR Priv ou public ?


Vous observerez sur larborescence du noyau de Magento quil ny a pas de division forte entre les parties prive et publique (il ny a pas de rpertoire admin). Ces deux parties fonctionnent avec le mme principe et les mmes classes.

259

11 Ajouter et crer une extension

Magento

associs. la place, dans vos propres rpertoires, vous en ferez des copies, que vous transformerez ensuite, ou bien vous crerez des fichiers nouveaux en partant de zro.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

CULTURE Pear
Pear, PHP Extension and Application Repository, est un ensemble de bibliothques, qui a eu son heure de gloire dans les premires annes de PHP. Ctait alors le principal dpt de nouvelles bibliothques. Particulirement riche, Pear a subit un dveloppement un peu anarchique, la qualit et surtout laboutissement des diffrents paquets, issus de nombreux auteurs, tant trs variable. Toutefois cest une bonne source de bibliothques complmentaires libres pour lensemble des besoins dune application web.
B http://pear.php.net

Figure 1118 Structure complte

des rpertoires de Magento

Figure 1119

Page 404
Tableau 111 Les rpertoires de Magento Nom du rpertoire
404 app code design etc locale downloader includes js lib

Contenu et fonction

Prsentation des erreurs de type page non trouve (voir figure 11-19). Cest un cas rare derreurs. Cur de lapplication. Cest l que figure lessentiel du travail des dveloppeurs de Magento. Code PHP. Fichiers pour la mise en forme (gabarits, agencements, pages HTML...). (Voir le chapitre 10 pour plus de dtails.) Fichiers de configuration (voir la section Dclaration : crer le fichier de configuration de lextension ci-aprs). Une partie des traductions (voir la section Design et internationalisation au chapitre 10). Magento Connect. Non utilis. JavaScript utilis dans les interfaces publique et prive du site. Cela inclut les bibliothques associes : Script.aculo.us, ext.js...). Code PHP. Il ne sagit cette fois que des bibliothques dont Magento profite. Deux bibliothques essentielles sont PEAR, qui dsigne un dpt standard de PHP pour les classes de toutes sortes et les classes elles-mmes qui en sont issues, et Zend, le Zend Framework (voir lannexe C). Images et autres documents envoys sur le site pour tre accessibles aux visiteurs. Ce rpertoire est vou grossir au fur et mesure de la constitution de votre site. Documentation propre aux dveloppeurs de Magento (sans grande importance pour nous). Utile pour la rcupration des erreurs (voir ci-aprs la section Trouver les erreurs ).

media pkginfo report

260
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Tableau 111 Les rpertoires de Magento (suite) Nom du rpertoire Contenu et fonction

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

skin var cache session

Thmes graphiques (voir la deuxime section du chapitre 10 ce sujet). Fichiers gnrs automatiquement par Magento pour luimme. Fichiers du mcanisme de cache (voir le chapitre 5, section Gestion du cache ). Sessions dutilisateurs, si la configuration le permet (voir le chapitre 3, section Les droits daccs ).

Mais si la modification directe de Magento peut vous permettre de corriger ponctuellement certains comportements, pour ajouter des fonctionnalits proprement parler, mieux vaut dvelopper une extension spare et ensuite linstaller comme expliqu dans la premire section de ce chapitre.

Structure et fichiers essentiels dune extension


Nous prsentons ici rapidement le cheminement dans la cration dune extension. La section qui suit vous proposera ensuite de raliser un exemple complet et complexe, avec tous les dtails ncessaires. La mise en place de la structure de lextension est suffisante, cest--dire que chaque modification que nous ferons sera prise immdiatement en compte, sans passer ensuite par une procdure dinstallation avec Magento Connect. Les extensions disposent de rpertoires qui leurs sont propres dans lun des sous-rpertoires de /app/code/ : community contient les modules issus de la communaut, gratuites ou payantes ; core contient les modules de base, issus de linstallation simple de Magento (les auteurs sont indiqus : Zend et Mage) ; local contient vos modules privs. Techniquement, il vous est possible de crer votre extension dans nimporte lequel de ces rpertoires. Nous allons toutefois la placer dans local, en crant un rpertoire portant le nom de lextension (ici, Dawan) et un sous-rpertoire au nom du module (Show).
CULTURE Nom et paternit des extensions
Une extension est souvent nomme daprs son auteur (ou un groupe dauteurs, une socit, etc.), et des modules quelle contient. On parlera par exemple de lextension Dawan showroom comme tant les modules Show et Room crs par la socit Dawan.

RAPPEL Modularit de Magento


Rappelons que toute la structure fonctionnelle de Magento repose sur une division en modules. Les principaux sont Core (le fonctionnement de base), Catalog (les produits, catgories...), Page (laffichage), Eav (le mcanisme spcial denregistrement des donnes).

Figure 1120

Nouveau rpertoire dextension

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

261

11 Ajouter et crer une extension

Magento

Chaque module est ensuite susceptible de contenir lui-mme les rpertoires prsents dans le tableau suivant. Aucun de ces rpertoires nest obligatoire, et il ne sert rien de crer des rpertoires vides.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
Tableau 112 Rpertoires et fichiers dune extension Rpertoire
Block controllers etc config.xml

Fichier

Contenu ou fonction

Le code PHP des blocs, qui correspondent des gabarits crs dans les thmes. Les contrleurs, cest--dire des classes PHP qui soccupent de recevoir les vnements issus des utilisateurs, et de ragir en consquence. La configuration du module (pour complter le rpertoire /var/ etc/) Dclare les modifications que ce module ralise sur le fonctionnement de Magento. Cela inclut les nouveaux agencements, fichiers du modle, mthodes de paiement... Prsente les paramtres qui seront proposs par ce module dans la page qui correspond au menu Systme>Configuration. Leur valeurs par dfaut sont indiques dans config.xml. Rarement disponibles et spcifiques certains modules. Les classes dassistance et autres classes du module (voir la section Classes et fonctions utiles dans le chapitre 10). Le modle du module, qui contient les fonctions en relation avec la base de donnes. Des fichiers PHP excuts linstallation afin de crer ou modifier la base de donnes.

system.xml

Autres fichiers XML


Helper Model sql

Une extension sera donc constitue de ses diffrents modules, mais aussi de tous les rpertoires que vous voudrez y placer (par exemple, des rpertoires de thmes). Elle nest pas cantonne un rpertoire isol.
SAVOIR Quelques conventions pour le dveloppeur PHP
Lorsque vous codez votre extension, il est prfrable de suivre les conventions des auteurs de Magento chaque fois que cest possible dans votre code PHP : Tout est crit en anglais. Pour commenter les fonctions et variables, utilisez la syntaxe PHP-Doc (de type : /** mon commentaire */), en inscrivant le commentaire au-dessus de la fonction ou de la variable. Les intituls scrivent de cette manire : Un_Paquet_Et_Une_Classe, uneFonction, $uneVariable, $unParamtre, _uneMethodePrivee, $_unAttributPrive. Les fichiers PHP sont ouverts par <?php, mais vous observerez que la balise fermante est absente. Cest autoris et mme recommand car il ne reste ainsi pas de ligne vide parasite la fin. Les accolades sont isoles sur leurs lignes.

262
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

De plus, pour chaque extension, on trouve un fichier de configuration principal dans le rpertoire /app/etc/modules/. Cest le point dentre, cest--dire qu chaque requte, Magento observe ce rpertoire et lit tous les fichiers qui sy trouvent.

Trouver les erreurs


Pour terminer cette mthodologie de dveloppement dextension pour Magento, il est ncessaire de parler de la recherche des erreurs. En effet, si jamais il arrivait que lors de vos dveloppements en PHP, vous rencontreriez des erreurs, il est ncessaire de les trouver pour pouvoir les corriger. Or, Magento maintient un processus daffichage complexe qui va rendre cette tche quelque peu difficile, et vous ne pourrez rduire cette recherche placer des echo un peu partout. Cependant, ne perdons pas courage, tout a une solution ! Vous disposez tout dabord dun systme de logs, que vous devez avoir activ lors de la configuration gnrale du logiciel (voir le chapitre 5, section Gestion des journaux dans la configuration avance). Il suffit, dans votre code, dcrire ceci :
Mage::log("on est ici",Zend_Log::INFO); //ou DEBUG, ERR...

CULTURE Les exceptions


Les messages derreurs de Magento utilisent le mcanisme des exceptions. Sans lui, pas de pile dappel (cest--dire la liste des mthodes utilises en cascade au moment de lerreur), information trs utile lors de lapproche dune application existante et complexe.

Le rsultat de cet appel scrit dans le rpertoire /var/log/. Vous pouvez rencontrer des erreurs du type There has been an error processing your request . Cest une exception. Lerreur est indique dans le message. Vous pouvez aussi noter le numro qui sinscrit dans la barre dadresse : http://127.0.0.1/magento1.3/report/?id=688054319&s=default.

Figure 1121

Exemple de page derreur

Un fichier de log, du mme nom que le numro indiqu ci-dessus, est alors cr en correspondance dans le rpertoire /var/report.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

263

11 Ajouter et crer une extension

Magento

Exemple de fichier de log rapportant une erreur


a:2:{i:0;s:311:"Waring_load_string() [<a href=function.simplexml-load-string>function.simplexml-loadstring</a>]: Entity: line 11: parser error :Opening and ending tag mismatch: modulesz line 3 and modules in C:\Documents and Settings\mblanchard\Mes documents\www\magento\lib\Varien\Simplexml\Config.php on line 510";i:1;s:1249:"#0 [internal function]: mageCoreErrorHandler(2, simplexml_load_..., C:\Documents an..., 510, Array) #1 C:\Documents and Settings\mic\Mes documents\www\magento1.3\lib\Varien\Simplexml\Config.php(510): simplexml_load_string(<?xml version="..., Mage_Core_Model...) #2 C:\Documents and Settings\mic\Mes documents\www\magento1.3\lib\Varien\Simplexml\Config.php(498): Varien_Simplexml_Config->loadString(<?xml version="..., Mage_Core_Model...) #3 C:\Documents and Settings\mic\Mes documents\www\magento1.3\app\code\core\Mage\Core\Model\Config.p hp(625): Varien_Simplexml_Config->loadFile(C:\Documents an...) #4 C:\Documents and Settings\mic\Mes documents\www\magento1.3\app\code\core\Mage\Core\Model\Config.p hp(233): Mage_Core_Model_Config->_loadDeclaredModules() #5 C:\Documents and Settings\mic\Mes documents\www\magento1.3\app\code\core\Mage\Core\Model\App.php( 263): Mage_Core_Model_Config->init(Array) #6 C:\Documents and Settings\mic\Mes documents\www\magento1.3\app\Mage.php(434): Mage_Core_Model_App->init(, store, Array) #7 C:\Documents and Settings\mic\Mes documents\www\magento1.3\app\Mage.php(455): Mage::app(, store, Array) #8 C:\Documents and Settings\mic\Mes documents\www\magento1.3\index.php(65): Mage::run() #9 {main}";}

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Il sagit ici dune erreur de chane de caractres saisie. Au dbut apparat le message derreur, puis la pile dappel de lexception, cest--dire les mthodes appeles au moment de son dclenchement, avec leurs paramtres. Enfin, sachez que tant que ce rpertoire nest pas vid, vous pourrez appeler de nouveau lURL correspondante lerreur, elle restera valide.

264
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Un exemple complet : cration dun premier module daccs une base de donnes
Nous allons dvelopper une extension, prte installer, comportant toutes les nouveauts dont nous avons besoin pour notre boutique. Regrouper ainsi tous les dveloppements dans une seule extension minimisera les efforts ncessaires pour les redployer plus tard, par exemple aprs une mise jour du site au bout de plusieurs annes. Cette extension comportera deux modules indpendants : le premier va lire une information dans une base de donnes et lafficher, le second ajouter une mthode de livraison. Ces deux modifications sont typiques des besoins de dveloppement que vous pourrez rencontrer. Ce premier module va tre ralis par tapes : mettre en place les fichiers et la configuration, puis le texte de base et sa traduction, et enfin ajouter la lecture dans une table de base de donnes.
CONSEIL Ralisez votre propre extension
Vous pouvez dvelopper cet exemple tel quel, pour vous entraner. Mais vous pouvez aussi, si vous matrisez le PHP, raliser directement votre propre extension, aprs avoir lu en dtail ce chapitre, afin de rpondre vos propres attentes.

Dclaration : crer le fichier de configuration de lextension


Crons le fichier de dpart de notre extension, dans le rpertoire /app/ etc/modules. Nous ne partons pas dun fichier vide, mais de nimporte quel fichier dj existant, par exemple Mage_Compiler.xml, que nous nettoyons, afin de ne garder que les balises suivantes.
Fichier Mage_Compiler.xml nettoy
<?xml version="1.0"?> <config> <modules> <><!-- Mage_Compiler --> <active>true</active> <codePool></codePool> <depends> </depends> </> </modules> </config>

Nommons ce nouveau fichier, indpendamment des choix dintituls (nom des classes, blocs) que nous ferons ensuite. La convention de nommage tant de type [Auteur]_[SujetGeneral].xml, nous lappelons donc RizDuMonde_Site1.xml.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

265

11 Ajouter et crer une extension

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Dans la balise modules se placent les diffrents modules de cette extension, les uns aprs les autres. Ici, notre premier module consistera en un bloc supplmentaire affichant un message choisi par ladministrateur. Appelons-le Message , donc la balise sera RizDuMonde_Message (observez bien les conventions de codage minuscules, majuscules, souligns utilises dans tout cet exemple). La balise active indique si le module est actif ou non. true est la valeur pour un module actif, tandis que false indique un module inactif. Un module inactif est compltement ignor. La balise codePool contient les valeurs community, core ou local, en fonction de lorigine du module, et par consquent de lemplacement utilis dans /app/code/. Nous choisissons donc local. Enfin, la balise depends contient une ou plusieurs balises, correspondant aux noms (complets) des modules dont celui que nous sommes en train de crer dpend. Dans notre cas, aucune dpendance nest signaler, nous indiquerons donc Mage_Core, savoir le noyau de lapplication Magento. Voici le rsultat, que nous pouvons sauvegarder.
Nouveau fichier de dclaration RizDuMonde_Site1.xml
<?xml version="1.0"?> <config> <modules> <RizDuMonde_Message> <active>true</active> <codePool>local</codePool> <depends> <Mage_Core> </depends> </RizDuMonde_Message> </modules> </config>

Structure des fichiers


Commenons la cration de notre premier module, dont la fonction sera dafficher divers messages aux utilisateurs, en haut de la zone de droite de la page. Pour comprendre cette partie, il est utile que vous ayez pris connaissance du chapitre prcdent consacr la mise en forme et aux thmes graphiques. En corrlation avec ce que nous avons dclar dans le fichier de configuration dextension, crons les rpertoires RizDuMonde (lextension) et, au niveau infrieur, Message (le premier module) dans /app/code/local. Notre module fournira un bloc, donc nous pouvons aussi prvoir le sous Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

Figure 1122 Cration de lextension

dans le rpertoire app/code/

266

rpertoire correspondant (Block), ainsi que celui qui servira la configuration (etc).
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Et puis, comme il sagit pour le moment dun module qui va ajouter un bloc, prparons aussi le rpertoire du gabarit correspondant dans le thme de notre choix, lintrieur de template. Crons ensuite dans ce rpertoire ce gabarit, simple.
Cration du gabarit lemessage.phtml
<div class="box"> <?php if(trim($this->getMessage())!=""): ?> <?php echo $this->htmlEscape($this->getMessage()); ?> <?php else: ?> Pas de message <?php endif; ?> </div> lemessage.phtml,

trs

Ce gabarit fera appel une mthode getMessage() qui est dfinie dans le bloc ($this), et qui renverra le message. Crons donc ce bloc dans notre module.

Figure 1123

Nouveau rpertoire pour le thme

Crer le bloc correspondant au module


Fichier de bloc : LeMessage.php
Nous nommons la classe de bloc LeMessage. Afin que le chargement automatique des classes (autoload de PHP) soit bien en place, nous devons nommer les classes en correspondance avec leur emplacement. Ici, il sagit donc de la classe RizDuMonde_Message_Block_LeMessage, qui se trouve dans le rpertoire /app/code/local/RizDuMonde/Message/ Block/, et le fichier PHP correspondant est LeMessage.php. Souvenons-nous des blocs que nous avons rencontrs prcdemment. Lun dentre eux tait le bloc correspondant limage Back To School affiche sur la droite des pages (voir le chapitre prcdent). Sa classe est Mage_Core_Block_Template. Comme ctait un bloc simple, mentionnons-le comme classe mre, ce qui va nous permettre de lutiliser comme base de programmation.
Cration de la classe de bloc dans le fichier LeMessage.php
<?php /** * Classe de bloc pour les message de www.rizdumonde.fr */

LINTRIEUR Les espaces de noms


(namespaces)
En nommant si longuement leurs classes (RizDuMonde_Message_Block_LeMessa ge, par exemple), les auteurs de Magento compensent labsence despaces de noms (namespaces ou packages, paquets) dans PHP jusqu PHP 5.3. Les espaces de noms (appels parfois aussi espaces de nommage) sont une fonctionnalit bien utile en programmation qui permet de rpartir les classes dans la plupart des langages objets sans risque de collision.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

267

11 Ajouter et crer une extension

Magento

class RizDuMonde_Message_Block_LeMessage extends Mage_Core_Block_Template {

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

} ?>

Or, comme ce bloc devra rcuprer des messages pour les afficher, il nous faut dans le bloc une fonction getMessage(). Pour le moment crons-la de faon basique, de sorte quelle renvoie toujours le mme texte, Tous vos riz, toutes vos envies ! , par exemple. Voici alors notre classe.
Ajout de la fonction getMessage() la classe de bloc
<?php /** * Classe de bloc pour les message de www.rizdumonde.fr */ class RizDuMonde_Message_Block_LeMessage extends Mage_Core_Block_Template { public function getMessage() { return 'Tous vos riz, toutes vos envies !'; } } ?>

Testons cela en ajoutant notre bloc sur linterface, peu importe o, mais de sorte que ce bloc saffiche sur toutes les pages. Il va donc falloir modifier un fichier dagencement.

Fichier dagencement : message.xml


SAVOIR Le numro de version
Le numro de version du layout, ici 0.1.0, est sans importance, on choisit souvent 0.9.x lorsquon se rapproche dune version stable, et 1.0 lorsque la version est rellement stable.

Afin de dterminer o et quand saffichera notre nouveau module, nous allons produire un nouveau fichier dagencement pour ce module. Dans notre thme (le mme o nous avons cr le gabarit), dans le rpertoire layout, crons le fichier message.xml, en copiant et nettoyant nimporte quel autre fichier dagencement.
Cration du fichier dagencement message.xml
<?xml version="1.0"?> <layout version="0.1.0"> </layout>

268
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Puisque le nouveau bloc doit tre affich sur toutes les pages, nous devons maintenant modifier lagencement par dfaut (default) pour y ajouter le bloc. On se propose de lafficher dans la zone de la page qui se trouve droite, zone dj dfinie dans page.xml, avec un attribut as de valeur right. Dans notre nouvel agencement, il nous suffira donc dajouter une reference ce bloc dj existant. Nous choisissons que notre bloc sera de ce type prpar : message/ (extension/classe). (Attention, les types scrivent bien en minuscule, mme si une partie correspond une classe.) On devra lui donner un nom (le_message), et indiquer le nom du gabarit recherch (message/lemessage.phtml) au moyen de lattribut template, car nous sommes dans un bloc de type core/template (cest--dire une classe fille). Enfin, nous pouvons indiquer que notre bloc saffiche tout en haut de la zone de droite, cest--dire au dbut, en indiquant dans le code le fait quil ny ait rien avant : before = *. Voici le rsultat :
lemessage

Fichier dagencement message.xml pour le bloc le_message


<?xml version="1.0"?> <layout version="0.1.0"> <default> <reference name="right"> <block type="message/lemessage" name="le_message" template="message/lemessage.phtml" before="*" /> </reference> </default> </layout>

Nous avons termin notre fichier dagencement rpertoire layout de notre thme.

message.xml,

dans le

Fichier de configuration : config.xml


Enfin, il faut que notre module soit trouv, notre agencement utilis et notre classe de bloc interprte. Cest la fonction du fichier etc/ config.xml dans le rpertoire de notre module. Pour plus de facilit, nous pouvons repartir dun fichier config.xml dun autre module, que nous nettoierons en consquence.
Cration du fichier de configuration config.xml
<?xml version="1.0"?> <config> <modules> </modules>

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

269

11 Ajouter et crer une extension

Magento

<global> </global> </config>

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Nous devons indiquer : Quels sont les modules dclars dans ce fichier, et leur numro de version. O trouver les classes (dans la zone global), savoir ici prcisment, o se trouve la classe du bloc. Pour le module message, ce sera dans le paquet RizDuMonde_Message_Block. (Attention, paquet nest pas ici employ au sens o nous lavons vu dans les thmes, mais au sens de la programmation oriente objet, cest--dire un espace de noms). Dans les autres zones de lapplication (frontend, admin, install), quels sont les fichiers dagencement utiliser pour mettre jour lagencement par dfaut (message.xml). Il nest pas ncessaire de prciser les trois zones, mais seulement celle qui sera concerne (ici, frontend). Voici toutes ces informations dans le fichier config.xml.
Dclaration de la classe de bloc dans config.xml
<?xml version="1.0"?> <config> <modules> <RizDuMonde_Message> <version>0.1</version> </RizDuMonde_Message> </modules> <global> <blocks> <message> <class>RizDuMonde_Message_Block</class> </message> </blocks> </global> <frontend> <layout> <updates> <message> <file>message.xml</file> </message> </updates> </layout> </frontend> </config>

270
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Voil, notre premier module devrait fonctionner ! Le message Tous vos riz, toutes vos envies ! saffiche bien en haut de page droite, sur toutes les pages.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

CULTURE Pas besoin dactivation


Dans la plupart des applications modulaires, les mcanismes dextension demandent souvent que chacune des extensions soient actives dans linterface dadministration. Dans Magento, nul besoin de passer par cette tape, les extensions sont actives automatiquement partir du moment o elles sont prsentes dans larborescence.

Figure 1124

Notre nouveau bloc sur le site public

Fournir une traduction du message


titre dexemple, au cas o aucun message ne serait prt safficher, nous avons prvu un message par dfaut ( Pas de message ). Or il serait bon que ce dernier message soit traduit automatiquement lorsque le site est consult dans sa version anglophone ou francophone. Chacun des messages a un texte de base, une cl, qui nest jamais affiche, et, dans des fichiers spars, pour cette cl, un texte dans la langue choisie. La cl elle-mme est ici, comme souvent, crite en anglais (ce choix est libre). Nous ne traduisons pas le message publicitaire ci-dessus, nous le remplacerons ensuite par une information dynamique, en prsentant laccs aux bases de donnes.
CONSEIL Lavantage de sparer les textes
Ce systme de traduction nest utile que pour un site international. Il permet aussi de montrer le principe de sparation claire des textes du reste de lextension, qui permet de les regrouper part, afin den faciliter la modification ou la correction.

Modification du gabarit
Pour cela, il
lemessage.phtml

nous faut dabord transformer afin quil utilise une traduction.

notre

gabarit

Modification du gabarit lemessage.phtml pour y inclure la traduction


<div class="box"> <?php if(trim($this->getMessage())!=""): ?> <?php echo $this->htmlEscape($this->getMessage()); ?> <?php else: ?> <?php echo $this->__('No Message'); ?> <?php endif; ?> </div>

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

271

11 Ajouter et crer une extension

Magento

Cration des fichiers de traduction CSV


Ensuite,
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
RizDuMonde_message.csv

dans app/locale/en_US un fichier afin de contenir la version anglaise de ce message par dfaut ( gauche, la cl, droite, la valeur traduite) :
"No Message";"No message"

crons

Faisons de mme dans app/locale/fr_FR pour le franais. Bien sr les deux fichiers doivent avoir le mme nom, RizDuMonde_message.csv.
"No Message";"Pas de message"

Modification du fichier de configuration


config.xml,

Enfin, il faut modifier le fichier de configuration de notre module, etc/ afin dindiquer la prsence de ces fichiers de traduction. Comme ce sont des traductions destines linterface publique, nous ferons donc lajout suivant dans la zone frontend.
Ajout du fichier de traduction RizDuMonde_message.csv dans config.xml
<frontend> <layout> <updates> <message> <file>message.xml</file> </message> </updates> </layout> <translate> <modules> <RizDuMonde_Message> <files> <default> RizDuMonde_Message.csv </default> </files> </RizDuMonde_Message> </modules> </translate> </frontend>

Ainsi, dans le cas o notre fonction getMessage() ne renvoie pas de rsultat, Pas de message est affich aux Franais, et No message aux Anglais.

272
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure 1125

Message en franais dans le nouveau bloc

Afficher un message dynamique partir de la base de donnes


Allons encore plus loin, et plutt quun texte simple et dtermin lavance, affichons comme message une information dynamique issue de la base de donnes MySQL : quelle est la meilleure varit de riz actuellement. Cette donne sera enregistre, et nous ne raliserons ici que la partie de lecture, pour le gabarit ralis juste avant (lemessage.phtml), et pas la modification de cet enregistrement proprement parler. Vous pouvez ainsi considrer ceci comme un exemple de laffichage dans Magento de donnes qui proviendraient dun autre outil. Cet enregistrement pourrait par exemple avoir t cr par un systme li notre logiciel de gestion des stocks, ou une autre boutique.

Crer la table denregistrements


Pour commencer et pour les besoins de lexemple, nous allons ddier une table de la base de donnes au type de donnes que lon souhaite rcuprer dans le message, savoir les varits et la qualit des riz. Peu importe ici do ces donnes proviennent, il sagit ici de crer la structure de donnes qui sera utilise par la fonction de message de notre nouveau module. Rendons-nous dans loutil PhpMyAdmin, et crons notre table, appele variete. Voici la requte SQL excute.
Requte SQL pour crer la table variete
CREATE TABLE IF NOT EXISTS `variete` ( `variete_id` int(11) NOT NULL auto_increment, `variete_type` varchar(32) default NULL, `variete_qualite` int(3) default NULL, PRIMARY KEY (`variete_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

LINTRIEUR Pas de dtection


des tables inutiles
Magento ignore compltement les tables qui sont dans la mme base mais qui ne lui appartiennent pas, que ces tables aient t cres par vous ou quelles proviennent dun autre logiciel. Il ne considre une table que si le code dune extension y fait rfrence.

Nous obtenons donc une table SQL avec trois champs, dont le premier est un identifiant auto-incrment (variete_id), le deuxime un texte

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

273

11 Ajouter et crer une extension

Magento

correspondant au type de riz (variete_type) et le troisime un chiffre correspondant la qualit (variete_qualite).


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Insrons tout de suite des donnes lintrieur, par exemple :


Insertion de donnes dans la table variete
INSERT INTO `variete` (`variete_id`, `variete_type`, `variete_qualite`) VALUES (1, 'Long', 6), (2, 'Rond', 3);

Figure 1126

La table est cre dans la base de donnes.

Nous obtenons ainsi la table suivante (figure 1126).

Prvoir linstallation automatique de la table


Si jamais nous tions amens diffuser notre extension, nous voudrions certainement que cette table soit cre automatiquement, lorsquun autre utilisateur installera lextension. Ceci peut tre fait en ajoutant un fichier dinstallation. Crons pour cela un rpertoire sql ct de Block et, lintrieur, un rpertoire message_setup (ces deux noms sont conventionnels). Dans ce dernier, crons un fichier mysql4-install-0.1.0.php (0.1.0 correspondant au numro de version que nous avons choisi pour notre extension). Cest un fichier PHP qui va utiliser le systme de gestion de la base de donnes propre Magento pour installer la table chaque fois quil est appel (en principe, une seule fois, lors de linstallation du module). Pour le crer, il suffit de reprendre et de modifier nimporte quel fichier quivalent dans les autres modules, par exemple /app/code/code/Mage/Log/ sql/log_setup/mysql-install-0.7.0.php, en y insrant les donnes propres notre table. Nous allons utiliser lobjet en cours ($this), qui dans le cas dune installation, contient des mthodes de dbut et fin (startSetup et endSetup), et surtout une mthode permettant dexcuter du code SQL (run). Le code de ce fichier est trs simple.
Fichier mysql4-install-0.1.0.php dinstallation de la table variete
<?php $installer = $this; $installer->startSetup(); $installer->run(" CREATE TABLE IF NOT EXISTS `{$this->getTable('variete')}` ( `variete_id` int(11) NOT NULL auto_increment, `variete_type` varchar(32) default NULL,

274
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

`variete_qualite` int(3) default NULL, PRIMARY KEY (`variete_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO `variete` (`variete_id`, `variete_type`, `variete_qualite`) VALUES (1, 'Long', 6), (2, 'Rond', 3); "); $installer->endSetup(); ?>

CULTURE PhpMyAdmin notre secours


Le systme dexportation de PhpMyAdmin permet trs facilement dobtenir les lignes de SQL correspondant linstallation de lextension, comme celles du fichier ci-contre. Pour cela, cliquez sur le bouton Exporter en haut de lcran cet outil.

Encore une fois, ceci nest utile que pour les extensions qui seront ensuite empaquetes et destines une utilisation dans dautres installations de Magento.

Construire le modle
Maintenant, nous allons crer les fichiers intermdiaires daccs aux donnes de notre module. Cest ce qui correspond au modle dans MVC. Ajoutons donc dans notre module Message un rpertoire Model et, lintrieur, un second rpertoire Mysql4 (il ny a pas dautre rpertoire prvu que Mysql4 pour le moment dans Magento, mme si vous disposez de MySQL 5). Le rpertoire Model contiendra les lments gnraux, alors que Mysql4 est destin aux ressources associes directement la base. Vous pouvez considrer ce duo comme deux couches dabstraction, lune au dessus de lautre. Dans chacun des deux rpertoires, nous allons placer une classe Variete correspondant notre table, dans un fichier nomm Variete.php. Dans Model, crons la classe RizDuMonde_Message_Model_Variete comme une classe de modle. Le module Mage_Core (le module de base de Magento) dispose de classes abstraites prtes pour cela, ici Mage_Core_Model_Abstract, quil va nous suffire dtendre. Il va juste y avoir lintrieur un pseudo-constructeur _construct() (appel automatiquement linstanciation de notre classe) qui indiquera au systme quelle est la ressource (table) concerne. Voici cette classe au complet.
Cration de la classe de modle abstraite contenant un constructeur
<?php class RizDuMonde_Message_Model_Variete extends Mage_Core_Model_Abstract { public function _construct()//un seul soulign, pas deux {

Figure 1127

Rpertoires pour le modle de lextension

PHP Le constructeur
Lors de la cration dun objet, il est frquent que lon veuille initialiser plusieurs de ses attributs, ou plus gnralement, un contexte. PHP fournit pour cela une mthode de construction dobjets (dite magique, car elle va tre appele implicitement) : __construct().

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

275

11 Ajouter et crer une extension

Magento

$this->_init('message/variete'); } } ?>

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

la classe est trs similaire. Il sagit cette fois-ci de qui hrite de Mage_Core_ Model_Mysql4_Abstract. Dans son pseudo-constructeur, nous plaons un code du mme genre que prcdemment, mais cette fois-ci plus proche de la base ; nous devons alors en plus indiquer quelle est la cl primaire de la table (variete_id).
RizDuMonde_Message_Model_Mysql4_Variete

Dans

Model/Mysql4,

Cration de la classe de modle spcialise pour MySQL 4 contenant un constructeur indiquant la cl primaire de la table
<?php class RizDuMonde_Message_Model_Mysql4_Variete extends Mage_Core_Model_Mysql4_Abstract { public function _construct() { $this->_init('message/variete', 'variete_id'); } } ?>

Ajoutons lintrieur de cette classe une mthode supplmentaire qui permettra daller chercher la varit de meilleure qualit. Nous allons utiliser les outils daccs aux donnes proposs par les bibliothques fondamentales de Magento, Mage/Core/Model, qui permettent dviter dcrire du SQL. Leur utilisation est plutt aise. Pour plus dinformation, tudiez les classes quivalentes des autres modules. Voici la classe augmente afin de faire une requte et de renvoyer le premier (et seul) rsultat sous la forme dun tableau.
Classe de modle spcialise pour MySQL 4 augmente dune requte
<?php class RizDuMonde_Message_Model_Mysql4_Variete extends Mage_Core_Model_Mysql4_Abstract { public function _construct() { $this->_init('message/variete', 'variete_id'); } public function getBest() {

276
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

$adapter = $this->_getReadAdapter(); $select = $adapter->select() ->from($this->getMainTable()) ->order('variete_qualite DESC') ->limit(1); return $adapter->fetchRow($select); } } ?>

Dclarer le modle
Il nous faut maintenant dclarer ce modle dans notre module. Revenons au fichier config.xml. Nous devons dclarer nos classes de modle de la mme manire que les classes de blocs :
Dclaration des classes de modle dans config.xml
<global> <blocks> <message> <class>RizDuMonde_Message_Block</class> </message> </blocks> <models> <message> <class>RizDuMonde_Message_Model</class> <resourceModel>message_mysql4</resourceModel> </message> <message_mysql4> <class>RizDuMonde_Message_Model_Mysql4</class> <entities> <variete> <table>variete</table> </variete> </entities> </message_mysql4> </models> </global>

De plus, il nous faut signaler la connexion utilise (en tant que ressource), en lecture (et ventuellement en criture). Voici la version finale du bloc XML global de config.xml.
Dclaration des ressources dans config.xml
<global> <blocks> <message>

ASTUCE Il y avait plus simple...


Il est tout fait possible dviter la cration de ces deux classes, et daccder directement, quand on en a besoin, aux tables, avec du SQL. Certaines extensions procdent ainsi. Observez toutefois dans la suite de ce chapitre le ct pratique et lgant du modle ralis.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

277

11 Ajouter et crer une extension

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

<class>RizDuMonde_Message_Block</class> </message> </blocks> <models> <message> <class>RizDuMonde_Message_Model</class> <resourceModel>message_mysql4</resourceModel> </message> <message_mysql4> <class>RizDuMonde_Message_Model_Mysql4</class> <entities> <variete> <table>variete</table> </variete> </entities> </message_mysql4> </models> <resources> <message_setup> <setup> <module>RizDuMonde_Message</module> </setup> <connection> <use>core_setup</use> </connection> </message_setup> <message_write> <connection> <use>core_write</use> </connection> </message_write> <message_read> <connection> <use>core_read</use> </connection> </message_read> </resources> </global>

Modifier la classe de bloc pour afficher le rsultat


Utilisons maintenant notre modle dans notre bloc message, en modifiant la classe de bloc pour : utiliser cette donne dynamique ; utiliser cette donne avec une traduction ventuelle si besoin (pour le message). Voici la transformation de la classe. Observez lappel getResource(), qui a pour effet de passer de la premire classe gnraliste du modle la version Mysql 4. Le texte du message y est inscrit en remplaant la donne dynamique (rsultat de la requte) par %s, tandis que le champ de la table utilis est indiqu dans la variable $best. 278
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Transformation de la classe de bloc en utilisant le modle et lappel la traduction


<?php

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

/** * Classe de bloc pour les messages de www.rizdumonde.fr */ class RizDuMonde_Message_Block_LeMessage extends Mage_Core_Block_Template { public function getMessage() { $best = Mage::getModel(message/variete)-> getResource()->getBest(); return sprintf( __("For now, best species is %s"), $best['variete_type'] ); } } ?>

Il ne nous reste plus qu ajouter les traductions de ce message dans les fichiers CSV adquats. Voici pour le fichier anglais final :
"No Message","No message" "For now, best species is %s","For now, best species is %s"

Et pour le fichier franais :


"No Message","Pas de message" "For now, best species is %s","En ce moment, la meilleure varit est : %s"

Figure 1128

Rsultat : le bloc affiche une information issue de la base de donnes.

Bilan du premier module


Ce premier module tant enfin termin, faisons un bilan des dix fichiers crs dans lordre alphabtique.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

279

11 Ajouter et crer une extension

Magento

Tableau 113 Fichiers crs lors du dveloppement du premier module Rpertoire Fichier
app/code/local/RizDuMonde/Message/Block/LeMessage.php app/code/local/RizDuMonde/Message/etc/config.xml app/code/local/RizDuMonde/Message/Model/Variete.php app/code/local/RizDuMonde/Message/Model/Mysql4/ Variete.php app/code/local/RizDuMonde/Message/sql/message_setup/ mysql4-install-0.1.0.php app/design/ app/design/frontend/interface_blanche/default/layout/ message.xml app/design/frontend/interface_blanche/default/template/ message/lemessage.phtml app/etc/ app/locale/ app/etc/modules/RizDuMonde_Site1.xml app/locale/en_US/RizDuMonde_Message.csv app/locale/fr_FR/RizDuMonde_Message.csv

Description

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

app/code/

Code du bloc Configuration du module Modle abstrait pour les varits Modle spcialis de MySQL 4 pour les varits Fichier dinstallation pour la table des varits Agencement adapt pour inclure le bloc Gabarit du bloc Fichier de dpart du module Chanes de caractres traduites en anglais Chanes de caractres traduites en franais

Tout cela reprsente donc une manipulation lourde et dlicate pour un simple affichage. De plus, les erreurs ne sont pas faciles dtecter. Nhsitez pas noter soigneusement vos manipulations et faire des tests aussi souvent que possible.

Suite de lexemple : crer un second module pour la livraison


Nous allons maintenant raliser un second module dans notre nouvelle extension. Il aura pour fonction doffrir nos clients un mode de livraison supplmentaire, consistant leur faire cadeau des frais si cest leur seconde commande. Dans un second temps, nous ferons en sorte que cette extension soit configurable, cest--dire quon puisse modifier son comportement partir de linterface dadministration : par exemple, afin de dcider que les frais ne sont offerts qu partir dun certain nombre de commandes (et pas forcment deux).
SAVOIR Des modules indpendants
Le dveloppement de ce second module ne ncessite absolument pas davoir dj ralis le premier. Vous pouvez aussi les raliser dans le dsordre, ou dans des extensions spares.

Chaque fois que lutilisateur effectuera une commande, lors de la proposition des modes de livraison, le programme examinera le nombre de commandes dj passes avec son compte. Ainsi, sil y en a suffisamment (deux ou plus, si lon a modifier le nombre de commandes minimal), notre nouveau mode de livraison sera ajout aux autres dans la liste propose au client, qui pourra alors le slectionner.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

280

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Vis--vis des mcanismes complexes comme la livraison, la vente ou le paiement, Magento se prsente comme un framework PHP exigeant : il faut raliser des classes selon exactement le bon format (classe mre, noms de leurs mthodes, leurs paramtres et rsultats), et les dclarer dans le XML. Elles sont alors instancies au moyen du mot-cl new, leurs fonctions sont appeles et leurs rsultats, utiliss. Bien sr, pour crer ces classes, il nous faut : hriter de classes existantes, ventuellement abstraites (qui ne peuvent elles-mmes tre instancies) ; redfinir les mthodes qui manquaient ou qui ne nous convenaient pas. Voici nos choix dintituls, pour la suite : lextension et lauteur sappellent toujours RizDuMonde ; le module se nomme RewardShipping (livraison-rcompense) ; le nouveau mode de livraison est appel Back (retour) ; la classe se nomme RizDuMonde_RewardShipping_Model_Back.
CONSEIL Utiliser lhritage
Si, pour un mme besoin (par exemple, le paiement), vous mettez en place plusieurs mthodes, nhsitez pas crer votre propre classe mre, partir de laquelle vous pourrez driver de multiples classes filles, afin doptimiser vos dveloppements.

Construire la structure et les classes du module


Crer les rpertoires
Crons tout dabord dans /app/local/ le module RewardShipping et sa structure (les rpertoires etc et Model), au mme niveau que le module prcdent, Message.

Construire la classe Back


Dans le rpertoire Model, crons notre classe Back dans un fichier Back.php. Le nom complet de la classe est RizDuMonde_ RewardShipping_Model_Back et elle hrite de Mage_Shipping_Model _Carrier_Abstract. Cest elle qui va raliser le traitement de la commande pour crer et ajouter le nouveau mode de livraison.
Cration de la classe Back
<?php class RizDuMonde_RewardShipping_Model_Back extends Mage_Shipping_Model_Carrier_Abstract { } Back doit indiquer la demande du systme de livraison deux informations : un code qui la diffrencie des autres modes de livraison de

Figure 1129

Nouveaux rpertoires pour le second module

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

281

11 Ajouter et crer une extension

Magento

et un nom, renvoy par une mthode habituelle dans les classes dextension de Magento, qui indique dans notre cas quels modes de livraison sont disponibles.
getAllowedMethods(),

la

mme

extension

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Ajout dun code et de la mthode getAllowedMethods()


<?php class RizDuMonde_RewardShipping_Model_Back extends Mage_Shipping_Model_Carrier_Abstract { protected $_code = 'back'; public function getAllowedMethods() { return array(back=>__("Free")); } }

Enfin, la mthode principale collectRates() doit renvoyer un rsultat (les modes de livraison) en fonction dune requte indiquant la commande en cours. est dans ce cas de type (disponible comme modle, nomm shipping/rate_result), et contient une ou plusieurs mthodes ($method) , correspondant des lignes de fin de commande (cest--dire les lignes de commandes et factures qui indiquent les taxes, la livraison, les promotions panier, etc.). Chaque ligne dispose dun nom de transporteur (setCarrierTitle), dun intitul de mode de livraison (setMethodTitle), dun prix (setPrice) et dun cot (setCost), que nous supposons zro, puisque le but est ici que les frais soient nuls. Ces lignes ainsi produites seront ajoutes la commande.
Mage_Shipping_Model_Rate_Result

La

classe

du

rsultat

La classe de requte est Mage_Shipping_Model_Rate_Request, et elle contient toutes sortes de donnes propos de la commande (les produits commands, le lieu de livraison, etc.). Nous allons nous proccuper dajouter une mthode de gratuit dans le rsultat, si et seulement si le client en cours a dj effectu une commande sur le site (cest--dire quune commande est dj prsente dans la base pour ce client). Le modle core/session renvoie des informations sur la session en cours (getVisitorData()), notamment le numro de client du visiteur (customer_id), sil en a un. Le modle sales/ order_collection nous permet de raliser des requtes sur la table des commandes (getResourceModel()).

282
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Classe Back au complet


<?php

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

class RizDuMonde_RewardShipping_Model_Back extends Mage_Shipping_Model_Carrier_Abstract { protected $_code = 'back'; public function collectRates(Mage_Shipping_Model_Rate_Request $request) { $free = false; $visitor = Mage::getSingleton('core/session') ->getVisitorData(); if(isset($visitor['customer_id']) && $visitor['customer_id']>0) { $collection = Mage::getResourceModel('sales/order_collection') ->addAttributeToFilter('customer_id', $visitor['customer_id']); $free = count($collection)>=1; } if(!$free) return false; // ajout d'une mthode gratuite $result = Mage::getModel('shipping/rate_result'); $method = Mage::getModel('shipping/rate_result_method'); $method->setCarrier('back'); $method->setCarrierTitle(__("Reward for your comeback")); $method->setMethod('back'); $method->setMethodTitle(__("Free")); $method->setPrice(0); $method->setCost(0); $result->append($method); return $result; } public function getAllowedMethods() { return array('back'=>__("Free")); } }

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

283

11 Ajouter et crer une extension

Magento

Crer les fichiers de traduction


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Vous observez dans cet extrait de code les appels des traductions, par la mthode __(). Voici le fichier app/locale/en_US/RizDuMonde_ RewardShipping.csv correspondant (comme toujours, la cl de traduction est gauche, et le texte rsultat dans la langue, droite) :
"Reward for your comeback","Reward for your comeback" "Free","Free"

De mme, le fichier app/locale/fr_FR/RizDuMonde_RewardShipping.csv tablira les traductions en franais :


"Reward for your comeback","Rcompense pour le retour" "Free","Gratuit"

Adapter les fichiers de configuration


Fichier de configuration etc/config.xml
SAVOIR La balise carriers
La balise default/carriers est une balise spciale ddie aux systmes de livraison.

Dans notre extension RizDuMonde, pour le module RewardShipping, nous avons besoin dun fichier de configuration, etc/config.xml. Celui-ci spcifiera les lments suivants : Le module RewardShipping dpend du module Mage_Shipping (qui fait partie de core) ; cela signifie que lextension ne pourrait pas tre utilise si Mage_Shipping ntait pas prsent. Notre mode de livraison saffiche au dbut de la liste des modes proposs au client (balise sort_order de valeur 1). Nous ntablissons pas dURL de suivi (tracking_view_url), puisque celle-ci nest utile que lorsque le mode est reli un transporteur particulier, pour mener sur son site web.
Contenu du fichier etc/config.xml
<?xml version="1.0"?> <config> <modules> <RizDuMonde_RewardShipping> <version>0.1.0</version> <depends> <Mage_Shipping /> </depends> </RizDuMonde_RewardShipping> </modules> <global> <models> <RewardShipping>

284
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

<class>RizDuMonde_RewardShipping</class> </RewardShipping> </models>

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

<resources> <sales> <shipping> <carriers> <back> <class> RizDuMonde_RewardShipping_Model_Back </class> </back> </carriers> </shipping> </sales> </resources> </global> <frontend> <translate> <modules> <Mage_Shipping> <files> <RizDuMonde_RewardShipping> RizDuMonde_RewardShipping.csv </RizDuMonde_RewardShipping> </files> </Mage_Shipping> </modules> </translate> </frontend> <default> <carriers> <back> <active>1</active> <sort_order>1</sort_order> <model> RizDuMonde_RewardShipping_model_back </model> <tracking_view_url></tracking_view_url> </back> </carriers> </default> </config>

Fichier de dpart de lextension


Enfin, mettons jour pour notre nouveau module le fichier correspondant notre extension, /etc/modules/RizDuMonde_Site1.xml, en indiquant quil est activ (active de valeur true), que cest un module de type local et quil dpend du module de base Mage_Shipping.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

285

11 Ajouter et crer une extension

Magento

Mise jour du fichier de dpart RizDuMonde_Site1.xml


<?xml version="1.0"?> <config> <modules> <RizDuMonde_Message> <active>true</active> <codePool>local</codePool> <depends> <Mage_Core /> </depends> </RizDuMonde_Message> <RizDuMonde_RewardShipping> <active>true</active> <codePool>local</codePool> <depends> <Mage_Shipping /> </depends> </RizDuMonde_RewardShipping> </modules> </config>

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Le rsultat sur le site public correspond bien ce que nous attendions : nous disposons dun mode de livraison supplmentaire intitul Rcompense pour le retour et gratuit.

Figure 1130

Nouveau mode de livraison, lors de lachat

Rendre lextension configurable


Dans un deuxime temps, soyons moins gnreux avec notre client. Plutt que doffrir la livraison ds le deuxime achat, ne loffrons qu partir dun certain nombre dachats, en faisant en sorte que ce nombre soit configurable dans linterface dadministration. De mme, nous allons donner ladministrateur la possibilit de paramtrer depuis cette interface le fait que cette fonctionnalit soit active ou non, de modifier le 286
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

titre et lordre de ce mode de livraison dans la liste et de choisir quoi afficher en cas de non disponibilit de cette nouvelle fonction.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Nous allons donc cette fois modifier le systme de configuration de Magento pour y intgrer notre extension, en proposant deux ralisations associes : un menu gnral de configuration (dans Systme>Configuration) spcialement pour notre extension ; une modification de la configuration dans la partie ddie aux modes de livraison (Systme>Configuration>Ventes>Modes de livraison). Enfin, nous lirons cette configuration depuis notre classe du modle.

CONSEIL Choisir entre configuration


commune et nouvel onglet
Gnralement, vous nutiliserez que lun des deux mcanismes prsents dans cet exemple pour proposer la configuration dune extension. Ici, la configuration spcialise pour les modes de livraison, savoir la seconde solution, serait a priori suffisante. Nous vous prsentons les deux solutions valeur dexemple.

Un menu spcial pour notre extension


Cration dun fichier system.xml Il nest pas ncessaire ici de crer une classe PHP supplmentaire, il suffit dinscrire les paramtres de configuration dans un fichier ddi cela que nous crons, etc/system.xml. Ce fichier est conu selon la hirarchie suivante, qui correspond la hirarchie des informations de la section consacre la configuration dans linterface dadministration.
Structure du fichier system.xml
<?xml version="1.0"?> <config> <sections> <rizdumonde> <groups> <shipping> <fields> <display_when_available> </display_when_available> </fields> </shipping> </groups> </rizdumonde> </sections> </config>

1 En premier niveau, une ou plusieurs sections, qui correspondent aux

onglets gauche de la page. Chaque section dispose ensuite dune balise son nom, comme ici notre nouvelle section rizdumonde. Elle se trouve elle-mme dans lun des onglets principaux (balise tab de valeur general, voir le fichier au complet ci-aprs). 2 Chaque section contient un ou plusieurs groupes (groups), qui correspondent aux volets bleus foncs de la partie centrale, que lon peut

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

287

11 Ajouter et crer une extension

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

LINTRIEUR Modles de composants


pour les listes droulantes
Vous pouvez voir les diffrents composants rutilisables pour les contenus slectionner dans le rpertoire ; /app/code/core/Mage/ Adminhtml/Model/System/Config/ Source/.

drouler ; chacun tant dlimit par une balise au nom du groupe (ici shipping, pour les options de livraison). 3 Chaque groupe contient un ou plusieurs champs (fields), dsigns par le nom du paramtre (ici, display_when_available), avec un type de contenu (text, select, multiselect, textarea), selon quil sagit de texte prformat, dune ou plusieurs options slectionner dans une liste ou de texte libre. Pour les contenus select et multiselect, il peut y avoir aussi un modle de composant rutiliser (source_model), comme ici adminhtml/system_config_source_yesno (voir fichier au complet ci-aprs). Chacun de ces niveaux possde en plus : un intitul (label) ; un ordre dapparition (sort_order) ; trois indicateurs du niveau auquel sapplique la configuration : show_in_default (afficher dans toute linstallation), show_in_website (afficher dans tout le site) et show_in_store (afficher dans le magasin). Leurs valeurs sont soit 0 (par dfaut), soit 1. Par exemple, si un groupe indique 0, 0, 1 pour respectivement default, website et store, il ne sera configurable quau niveau des vues magasin (bote droulante en haut gauche de Systme>Configuration).

SAVOIR Plusieurs lments traduire ?


Sil faut traduire plusieurs lments dans la balise, par exemple un label et une description, on ncrira toujours quun seul attribut translate, mais avec plusieurs valeurs lintrieur, spares par un espace, par exemple : translate="label description".

Enfin, lattribut translate="x" permet dindiquer nimporte quel niveau quels lments du document doivent tre traduits. Par exemple :
<rizdumonde translate="label"> <label>Riz Du Monde</label>

Voici donc le fichier system.xml pour notre premier onglet de configuration, avec un seul paramtre, display_when_unavailable, qui indique si le mode de livraison apparat ou non indisponible.
Fichier system.xml au complet
<?xml version="1.0"?> <config> <sections> <rizdumonde> <label>Riz Du Monde</label> <tab>general</tab> <sort_order>320</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> <groups> <shipping translate="label"> <label>RizDuMonde shipping module</label>

288
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

<sort_order>2</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> <fields> <display_when_unavailable translate="label"> <label>Display when unavailable</label> <frontend_type>select</frontend_type> <source_model> adminhtml/system_config_source_yesno </source_model> <sort_order>2</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </display_when_unavailable> </fields> </shipping> </groups> </rizdumonde> </sections> </config>

Modifications dans config.xml Nous devons indiquer maintenant o se trouve ce nouvel onglet, au moyen de la balise acl, dans le fichier config.xml. La hirarchie admin, system, config, rizdumonde correspond longlet Riz Du Monde du menu Configuration du menu Systme de linterface dadministration de Magento. Indiquons aussi les besoins en traduction dans linterface dadministration (adminhtml), via la balise translate. Enfin, nous allons choisir une valeur par dfaut (1) pour le paramtre display_when_available dfini auparavant, afin dindiquer quil est activ.
Fichier config.xml modifi
<?xml version="1.0"?> <config> <modules> </modules> <global> </global> <adminhtml> <acl> <resources> <admin> <children> <system> <children> <config> <children>

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

289

11 Ajouter et crer une extension

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

<rizdumonde> <title>Reward</title> <sort_order>100</sort_order> </rizdumonde> </children> </config> </children> </system> </children> </admin> </resources> </acl> <translate> <modules> <Mage_Shipping> <files> <RizDuMonde_RewardShipping> RizDuMonde_RewardShipping.csv </RizDuMonde_RewardShipping> </files> </Mage_Shipping> </modules> </translate> </adminhtml> <frontend> <translate> <modules> <Mage_Shipping> <files> <RizDuMonde_RewardShipping> RizDuMonde_RewardShipping.csv </RizDuMonde_RewardShipping> </files> </Mage_Shipping> </modules> </translate> </frontend> <default> <rizdumonde> <RewardShipping> <display_when_unavailable> 1 </display_when_unavailable> </RewardShipping> </rizdumonde> <carriers> </carriers> </default> </config>

290
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Mise jour des fichiers de traduction CSV Pour terminer, nous mettrons jour le fichier app/locale/en_US/ RizDuMonde_RewardShipping.csv en consquence (en anticipant mme sur la suite, avec la dernire ligne, voir la section suivante) :
"Reward for your comeback","Reward for your comeback" "Free","Free" "RizDuMonde shipping module","RizDuMonde shipping module" "Times to come back","Times to come back"

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Et voici le fichier mis jour :

app/locale/fr_FR/RizDuMonde_RewardShipping.csv

"Reward for your comeback","Rcompense pour le retour" "Free","Gratuit" "RizDuMonde shipping module","Module de livraison de RizDuMonde" "Times to come back","Retours avant gratuit"

La configuration particulire du module Riz Du Monde est maintenant disponible dans la configuration gnrale de Magento.

Figure 1131

Nouvel onglet de configuration pour lextension dans linterface dadministration

Ajout de paramtres dans un onglet existant


Modifications dans system.xml Ajoutons maintenant des paramtres dans un onglet existant : le mode de livraison est-il actif (balise active), quel est son titre (balise title), combien de fois faut-il revenir pour y avoir droit (balise times) et dans quel ordre il apparat parmi les modes de livraison (balise sort_order). Le processus est identique, et il faut repartir du fichier system.xml complet, en modifiant la section carriers.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

291

11 Ajouter et crer une extension

Magento

Ajout de paramtres dans le fichier system.xml


<?xml version="1.0"?> <config> <sections> </sections> <sections> <carriers> <show_in_store>1</show_in_store> <groups> <back translate="label" module="shipping"> <label>Reward for your comeback</label> <sort_order>1</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> <fields> <active translate="label"> <label>Enabled</label> <frontend_type>select</frontend_type> <source_model> adminhtml/system_config_source_yesno </source_model> <sort_order>1</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </active> <title translate="label"> <label>Title</label> <frontend_type>text</frontend_type> <sort_order>2</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </title> <times translate="label"> <label>Times to come back</label> <frontend_type>text</frontend_type> <sort_order>1</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </times> <sort_order translate="label"> <label>Sort order</label> <frontend_type>text</frontend_type> <sort_order>100</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website>

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

292
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

<show_in_store>1</show_in_store> </sort_order> </fields> </back> </groups> </carriers> </sections> </config>

Modifications dans config.xml Nous devons aussi mettre jour le fichier config.xml en ajoutant une section back, afin dindiquer des valeurs par dfaut pour les quatre paramtres ajouts dans system.xml (active, title, times, sort_order).
Mise jour de config.xml
<?xml version="1.0"?> <config> <modules> ... </modules> <global> </global> <adminhtml> </adminhtml> <frontend> </frontend> <default> <rizdumonde> <RewardShipping> <display_when_unavailable>1</display_when_unavailable> </RewardShipping> </rizdumonde> <carriers> <back translate="title"> <active>1</active> <title>Reward for your comeback</title> <times>2</times> <sort_order>1</sort_order> <model>RizDuMonde_RewardShipping_model_back</model> <tracking_view_url></tracking_view_url> </back> </carriers> </default> </config>

Le fichier de traduction ayant t mis jour par anticipation lors de lexercice de la section prcdente, cet onglet de configuration est disponible dsormais parmi les autres onglets de paramtrage de la livraison.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

293

11 Ajouter et crer une extension

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure 1132

Configuration du module dans linterface dadministration

Lecture des paramtres depuis la classe du modle


Enfin, lisons ces paramtres depuis notre classe du mode de livraison (Back) : $this->getConfigFlag('parametre') renvoie la valeur dun paramtre boolen ; $this->getConfigData('parametre') renvoie la valeur dun paramtre quelconque ; Mage::getStoreConfig('onglet/onglet/parametre') renvoie la valeur dun paramtre de nimporte quel module.
Fichier Back.php actualis
<?php class RizDuMonde_RewardShipping_Model_Back extends Mage_Shipping_Model_Carrier_Abstract { protected $_code = 'back'; public function collectRates(Mage_Shipping_Model_Rate_Request $request) { if (!$this->getConfigFlag('active')) return false; $free = false; $visitor = Mage::getSingleton('core/session') ->getVisitorData(); if(isset($visitor['customer_id']) && $visitor['customer_id']>0) { $collection = Mage::getResourceModel('sales/order_collection') ->addAttributeToFilter('customer_id', $visitor['customer_id']);

294
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

$free = count($collection) >= $this->getConfigData('times');

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

} if(!$free) { if(Mage::getStoreConfig('rizdumonde/RewardShipping/'. 'display_when_unavailable')) { //rien pour le moment } return false; } $result = Mage::getModel('shipping/rate_result'); $method = Mage::getModel('shipping/rate_result_method'); $method->setCarrier('back'); $method->setCarrierTitle($this->getConfigData('title')); $method->setMethod('back'); $method->setMethodTitle(__("Free")); $method->setPrice(0); $method->setCost(0); $result->append($method); return $result; } public function getAllowedMethods() { return array('back'=>__("Free")); } } ?>

SAVOIR Lhritage est possible


Une solution plus optimale encore eu t de raliser une seconde classe hritant de la premire, et ne modifiant quune seule fonction. On aurait alors d modifier le fichier de configuration en consquence, afin dindiquer la nouvelle classe.

On obtient sur la partie publique un rsultat graphique identique ce qui a t ralis en dbut de section et, qui plus est, nos paramtres sont pris en compte.

Figure 1133

Prise en compte des paramtres Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

295

11 Ajouter et crer une extension

Magento

Crer un paquet pour publication


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Notre extension tant maintenant termine, afin dtre publie (si vous le dsirez), elle doit tre empaquete sous la forme dune archive. Magento propose dans la zone dadministration un utilitaire ddi cette tche, accessible via le menu Systme>Magento Connect>Packager des extensions.

Figure 1134 Formulaire de cration dun paquet

CULTURE Acceptation des extensions


sur Magento Connect
La socit Varien est trs librale dans son acceptation des extensions sur le site de Magento. La nouvelle extension ne sera pas ncessairement teste, et encore moins juge, condition dtre dans un format correct (suivre les rgles afin que Magento soit capable de lutiliser, en particulier les dclaration qui suivent, mais aussi les convention de codage respectes tout au long de ce chapitre) et dune taille raisonnable.

Passons en revue les cinq volets de ce menu les uns aprs les autres. Nous pourrons en sauvegarder les informations la fin.

Informations du paquet
Le Nom ne doit contenir que des minuscules, des chiffres et des souligns. Si vous avez t recrut par Varien Inc., le Canal devrait tre connect.magentocommerce.com/core, sinon mettez connect.magentocommerce.com/community. Enfin, si vous dcidez de publier lextension, indiquez soigneusement le Rsum, la Description, la Licence et une URL de la licence.

296
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Informations de publication
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Le second volet est consacr aux versions utilises. La Version de la publication, cest--dire la version de lextension, sera utilise en conjonction avec le nom et le canal pour gnrer la cl de lextension. Ici par exemple, elle serait magento-community/RizDuMonde-0.1.0. La Version de lAPI indique la version interne de Magento utilise pour le systme dextension (donner seulement la version et sous-version). La Stabilit de publication est au choix, en fonction de ltat davancement de votre extension (voir dans la premire section du chapitre). Quant la Stabilit de lAPI, elle devrait tre sur stable. Enfin, les Remarques sont destination des autres dveloppeurs potentiels de lextension et des utilisateurs. Indiquez-y les volutions de lextension.

Figure 1135

Paramtrage des versions

Responsables de la maintenance
Cette section est destine dclarer les personnes responsables de la maintenance. Au moins un directeur doit y apparatre pour que lextension soit publie.

Figure 1136

Paramtrage de la maintenance

Le bouton Ajouter un mainteneur permet de faire ces dclarations. Le Niveau peut tre Lead (directeur), Developer (dveloppeur), Contributor (contributeur) ou Helper (assistant). Le Nom correspond au nom rel, lUtilisateur est le le nom dutilisateur sur le site officiel de Magento. Ladresse Email et le Statut doivent aussi tre indiqus.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

297

11 Ajouter et crer une extension

Magento

Dpendances
T PECL

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

PECL (PHP Extension Community Library) est un dpt communautaire dextensions de PHP.
B http://pecl.php.net

La spcification des dpendances, dans le quatrime volet, est essentielle. Les Version Minimum et Maximum de PHP, ainsi que la version Recommande et les versions Exclues doivent tre indiques (pour rappel, Magento 1.4 ncessite PHP 5.2). Ensuite, diffrents Paquets, Souspaquets et Extensions (PHP ou PECL) peuvent tre inscrits, de la mme faon que notre propre extension.

Figure 1137

Spcification des dpendances de lextension

Contenu
Enfin, le dernier volet nous permet dindiquer le contenu du paquet, savoir les fichiers qui le composent.

Figure 1138

Contenu de lextension

Chaque ligne suit ce fonctionnement : Le Rle correspond au type de fichier, dont voici les principaux : contenu quelconque des modules dans le rpertoire app : Magento Local Module File (ou Community ou Core) ;

298
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

gabarits, agencements, traductions des thmes graphiques : Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

User Interface ; fichiers de configuration dans le rpertoire etc : Magento Global Configuration ; fichiers de langue pour les modules : Magento Locale Language File ; fichiers du rpertoire skin (images, JavaScript...) : Magento Theme Skin. Le Chemin est le rpertoire pour ce rle. Attention, le rle dterminera dj un rpertoire racine, qui ne doit pas tre indiqu nouveau ici. Par exemple, un fichier de langue sera cherch naturellement dans le rpertoire /app/locale/. Le Type peut tre Fichier (si le chemin nindique quun fichier) ou Rpertoire rcursif sil sagit dun rpertoire fouiller entirement, les sousrpertoires inclus. Dans ce dernier cas, il faut Inclure ou Exclure des fichiers, par des expressions rationnelles standards (et dlimites par un symbole tel que !). Voici quelques expressions : !.*! : tous les fichiers ; !Riz.*! : tous les fichiers dont le chemin (depuis le Chemin indiqu gauche) commence par Riz ; !.*[0-9]+.*! : tous les fichiers incluant au moins un chiffre.
SAVOIR Les fichiers de prsentation
Si votre extension est assiste par des fichiers dterminant lapparence, tels des gabarits, vous aurez pris soin dindiquer des fichiers situs dans les emplacements standards, cest--dire dans les paquets et thmes default.

Sauvegarde et mise en ligne


Ceci termin, nous pouvons cliquer sur Sauvegarder les donnes et crer le paquet. Un fichier .tgz (une archive) est cr alors dans le rpertoire /var/pear/. Il contient nos fichiers, ainsi quun fichier paquet.xml, qui correspond notre configuration. Ce fichier pourra tre mis en ligne sur le site officiel de Magento sil est accept. Quant longlet Charger le package local, il nous permet plus tard de retrouver notre paquet. Il suffit de cliquer sur le paquet pour retrouver les paramtres prcdents, que lon vient de configurer.
SAVOIR Rgnrer le paquet
Lavantage de ce systme prpar est de permettre une rgnration du paquet tout moment, aprs avoir fait des modifications de lextension. Chargez le paquet, puis recrez-le.

Figure 1139

Chargement dun paquet local

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

299

11 Ajouter et crer une extension

Magento

Voil, vous pouvez maintenant faire glorieusement partie de la communaut Magento et lui faire profiter de vos talents en lui proposant de nouvelles et utiles extensions !
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

300
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Quelques extensions utiles de Magento


B http://www.magentocommerce.com/

magento-connect

De trs nombreuses extensions de Magento sont votre disposition, gratuites ou payantes, sur le site de Magento Connect. Voici quelques unes dentre elles, particulirement adaptes une boutique franaise, classes en fonction de leur utilit. Nous ne prsentons ici que des extensions dclares stables ou en version bta, et utilisables avec la version 1.3 au moins de Magento.

Paiement en ligne par carte bancaire


CM-CIC p@iement (CyberMUT Paiement/Paiement CIC)
B http://www.quadra-informatique.fr

Auteurs : Quadra Team. Licence : OSL (libre et gratuite) Langues : franais et anglais

ATTENTION
Prendre en compte les frais bancaires
Lextension CybermUT elle-mme est tlchargeable et utilisable librement, conformment sa licence, mais elle ncessite pour fonctionner un kit logiciel fourni par la banque qui, elle, pourra vous faire payer ses services, comme pour tout systme de paiement par carte bancaire.

Figure A-1

Logo de lextension CyberMut Paiement

Cette extension communautaire utilise CyberMUT Paiement, la solution de paiement en ligne des banques Crdit Mutuel, CIC et OBC. Le kit logiciel fourni par la banque (incluant Hmac-SHA1 OpenKits ToolBox) est ncessaire en plus de cette extension. La configuration

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

permet dindiquer les critres de paiement (identification de la boutique, type de paiement, etc.).
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Son principe de fonctionnement est celui-ci : lors du paiement, une page Magento prsente une interface avec les logos des cartes bancaires acceptes (figure A-2). Cette interface est issue de lextension. Le visiteur clique sur la carte souhaite et arrive alors sur le site web de la banque. Il y indique son numro de carte (figure A-3).

Figure A-2

Prsentation des cartes bancaires autorises

Figure A-3 Page de paiement par carte

En cas de russite ou dchec, le visiteur est redirig vers votre site Magento. Le site de la banque lui-mme a laiss un code invisible ou a appel une page (en fonction de la configuration choisie) permettant Magento de savoir si la transaction est un succs.

SPPLUS Extension (Caisse dpargne)


B http://www.meliweb.fr

Auteur : Sbastien Lepers (Meliweb) Licence : OSL (libre et gratuite) Langues : franais et anglais

302
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure A-4

Logo de lextension SPPLUS

Cette extension communautaire utilise SPPLUS, la solution de paiement en ligne de la Caisse dpargne et ncessite pour fonctionner linstallation et lactivation du kit PHP SPPLUS. Elle dispose dune documentation complte qui, ajoute celle du kit, permet de configurer aisment cette solution de paiement dans les moindres dtails (cartes bancaires acceptes, logos, etc.). Le rsultat de cette extension est similaire celui de lextension CMCIC p@iement.

ATTENTION Frais bancaires


Comme pour lextension CyberMUT, lextension SPPlus ncessite pour fonctionner un kit logiciel fourni par la banque qui, elle, pourra vous faire payer ses services, comme pour tout systme de paiement par carte bancaire.

Et pour les autres banques ?


La plupart des autres banques disposent dun systme similaire aux deux systmes que nous venons de prsenter (base SIPS ATOS). Ceux-ci pourraient donc tre facilement adapts Magento. bon entendeur...

Modes de livraison
J2T TNT Module (relais colis TNT)
Auteurs : j2t-design Licence : GNU GPL (libre et gratuite) Langues : franais
B http://www.j2t-design.com

Figure A-5

Logo de lextension J2T TNT Module

Cette extension communautaire libre et gratuite (avec appel donation) permet de proposer le mode de livraison dans des Relais colis TNT (selon le code postal). Les frais de port sont calculs en fonction du montant total du panier ou du poids total. La configuration est libre.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

303

A Quelques extensions utiles de Magento

Magento

Owebia Shipping 2
B http://www.owebia.com

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Auteurs : Owebia Licence : OSL (libre et gratuite) Langues : franais et anglais

Figure A-6

Logo de lextension OwebiaShipping 2

Ce module gnraliste offre la livraison par tous types de transporteurs. Il est configur par dfaut avec les tarifs en cours de Colissimo, Chronopost et Export 3j (La Poste), pour la France. Mais la configuration est libre, permettant, en fonction du poids, dindiquer des tarifs dautres transporteurs. La version premire de cette extension (Owebia Shipping 1) tait un peu plus restreinte, des transporteurs supplmentaires ne pouvant pas tre ajouts. Nhsitez pas installer les deux afin de les comparer.

Thmes et design
Advanced Menu
B http://ecommerce.aheadworks.com

Auteurs : LostDocs7 (aheadWorks) Licence : propritaire Prix : 89 USD Langue : anglais (le rsultat sur votre site utilise les titres de votre boutique, seule la configuration est spcifiquement en anglais).

Figure A-7

Logo de lextension Advanced Menu

Voici un exemple dextension trs simple qui permet de modifier la prsentation dun site. Cest une extension commerciale, mais au prix faible,

304
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

comme la plupart dentre elles. Les auteurs proposent une installation sur mesure avec un supplment (50 USD).
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Cette extension propose diverses formes de menus plusieurs niveaux pour linterface publique du site.

Figure A-8

Affichage dun menu droulant sur le site public

Clean EasyStart Theme


Auteurs : TemplatesMaster Licence propritaire Prix : 154 USD Langue : anglais
B http://templates-master.com

Figure A-9

Logo de lextension Clean EasyStart Theme

Cette extension commerciale propose un thme complet. De nombreux thmes sont ainsi disposition, gratuits ou payants.

CONSEIL Acheter une extension graphique ou raliser soi-mme son thme ?


chacun de dterminer sil a les comptences et le temps de raliser lui-mme des augmentations de type graphique ou concernant le comportement de linterface, ou bien si lachat de mini-fonctionnalits lui est prfrable ; de trs nombreuses extensions sont disposition, gratuites ou payantes, gnralement pour modifier le thme et le design de linterface publique du site (prsentation graphique, fonctionnement des menus, des boutons, etc.). Il semble raisonnable de choisir un thme parmi ceux disponibles, et ensuite de le modifier afin de ladapter votre boutique (couleurs, polices...). Ainsi, vous vous assurez une identit suffisamment forte, tout en limitant le travail de graphisme. Toutefois, il se peut que votre boutique prsente des exigences particulires, telles que : une audience forte et un volume important ; une marque ou une socit denvergure ; des besoins en design et en ergonomie spciaux. Alors, il vous faudra plutt partir dun thme minimal, et raliser les recherches graphiques, ergonomiques... ncessaires votre boutique, afin de fabriquer la prsentation au complet (ce qui est videmment beaucoup plus long).

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

305

A Quelques extensions utiles de Magento

Magento

Internationalisation
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Une soixantaine de langues et dialectes sont disponibles pour Magento, sous la forme dextensions. Sil peut sembler trange que celles-ci ne soit pas tlcharger dans la partie ddie du site officiel, comme son menu (Community>Translations) nous y invite., il semblerait que cette page spciale ne dispose pas du mme rythme de mise jour, et nombre de ces traductions ne sont ralises encore que partiellement et peut varier fortement selon les langues (le pourcentage du contenu traduit est indiqu pour chaque langue dans la liste). Pour le franais, celui-ci est annonc 100 %, mais cela concerne la version 1.3 et la base nest pas forcment jour. Pour le franais du Canada, ce statut nest qu 67,7 % lheure o nous publions ce livre.

Figure A-10

Menu pour le tlchargement des traductions, sur le site officiel

Figure A-11

tat de la traduction officielle

French (France) Language Pack


B http://www.meliweb.fr

Auteur : Sbastien Lepers (Meliweb) Licence : Academic Free License (AFL) (libre et gratuite) Langue : franais

Figure A-12

Logo du French (France) Language Pack

306
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Cette extension libre et gratuite est prsente dans le chapitre 3, section Magento en franais . Elle permet de traduire Magento en franais de France.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

SAVOIR Et pour les autres pays


francophones ?
Pour les autres pays francophones, ce jour, seule une extension existe pour le qubcois : le French (Canada) Language Pack, ralise par pictogram, galement en licence AFL.

Autres extensions utiles


osCommerce fixed migration tool
Auteur : Anton Aleksandrov Licence : OSL (libre et gratuite)

B http://anton.world.lv

Figure A-13

Paramtre de lextension de migration depuis OsCommerce

Voici lexemplaire le plus populaire dune catgorie dextensions ddies la migration des donnes depuis dautres systmes de boutique en ligne. Ici, il sagit de la migration depuis le logiciel libre OsCommerce, de plus en plus remplac par Magento. Loutil va se connecter la base de donnes indique et y rcuprer toutes les informations utiles (produits, images, clients...). Alors que la base de donnes de OsCommerce ne sera pas modifie, celle de Magento sera augmente. Attention, il ne sagit que du processus de migration minimal, pas dune cohabitation avec synchronisation de deux systmes. Vous devez donc, si vous projetez cette migration, raliser les actions suivantes, dans cet ordre : 1 Crer le site Magento sur un hbergement sans nom de domaine et y installer lensemble des lments, dont cette extension. 2 Interrompre les achats sur la boutique OsCommerce et y laisser un message davertissement aux clients.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

307

A Quelques extensions utiles de Magento

Magento

3 Effectuer la migration des donnes grce cette extension. 4 Associer lancien nom de domaine la nouvelle boutique (configuraCe document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

tion chez le registrar sil sagit dune machine diffrente, sinon, simple modification dApache).

Blog
B http://ecommerce.aheadworks.com

Auteurs : aheadWorks Licence : GNU GPL (libre et gratuite) Langues : anglais, allemand, franais, tchque

Figure A-14

Logo de lextension Blog

Cette dernire extension montre la qualit de larchitecture interne de Magento, qui permet la cration dun ensemble fonctionnel lourd. Il sagit ici dun systme de blog, cest--dire des pages, comparables aux pages CMS, qui pourront tre commentes par les lecteurs. Elle est distribue sous forme libre et gratuite (avec appel donation). Elle va ajouter un menu complet, qui met disposition des pages dadministration, des articles du blog, leurs commentaires, et le tout en franais !

Figure A-15

Menu du blog dans la partie dadministration

De plus, on obtient par la configuration un lien vers le blog dans lentte des pages. Le rsultat est trs classique, mais utile pour fdrer vos clients autour dune communaut avec une forte implication.

308
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Figure A-16 Gestion gnrale des blogs

Figure A-17

Menu augment pour les blogs

Figure A-18 Affichage de la premire page des blogs

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

309

A Quelques extensions utiles de Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

user 177 at Thu Nov 11 07:36:42 +0100 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

HTML, CSS et JavaScript

Voici un petit rappel afin de faire le point ou de rviser vos connaissances sur les technologies de base du Web : le langage (X)HTML, les feuilles de styles CSS et le langage JavaScript.

(X)HTML
Tout dabord, cette petite introduction au HTML (et son successeur le XHTML) vous permettra de le dcouvrir si vous ne le connaissez pas encore, et de vous entraner quelques minutes, hors du contexte de Magento. Si Magento 1.4 dispose dsormais dun diteur HTML Wysiwyg intgr, afin de vous assister la cration de contenus des blocs statiques, la modification de la prsentation telle que propose au chapitre 10 ncessite de modifier ou vrifier soi-mme son code.

BONNE PRATIQUE
Nommer correctement les fichiers
Habituellement, et par la suite, tous les noms de fichiers sont crits en minuscules, et ne comportent ni espaces ni caractres spciaux tels que les lettres accentues.

La page
Un site web conu en HTML est organis sous forme de pages. Chaque page est indpendante lune de lautre, et une page correspond un fichier HTML, par exemple un fichier sur votre disque dur. Crez un nouveau fichier texte avec un diteur simple (Notepad, sous Windows, par exemple), et nommez-le test.html. Il suffira ensuite douvrir ce fichier avec votre navigateur web pour quil soit analys et transform en une page affiche lcran. Actuellement, le fichier tant vide, cest une page blanche. Au fur et mesure de vos modifications dans ce fichier, actualisez la page dans le navigateur pour observer votre progression.

CULTURE Les navigateurs et le HTML


Les navigateurs peuvent varier lgrement quant leur interprtation du HTML. Ceci est de moins en moins le cas, mais il est utile de vrifier les pages avec plusieurs navigateurs, par exemple Microsoft Internet Explorer 7, Mozilla Firefox 3 ou Apple Safari 4.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Toute la page est compose de balises, savoir des lments textuels entours de symboles infrieur et suprieur. Les balises sont simples (exemple : <abcd />) ou doubles, lorsquelles ont un contenu (ex : <efgh> le contenu </efgh>). Il faut alors une balise ouvrante <efgh> et une balise fermante </efgh>. Les balises peuvent contenir des attributs, chacun ayant un nom et une valeur entre guillemets ou avec des apostrophes (exemple : <abcd x="3" /> ou <abcd x='3' />). La norme HTML du W3C (voir chapitre 2) prcise quelles sont les balises disponibles, leurs attributs obligatoires ou optionnels et leur comportement. Une page se compose de plusieurs parties : la dclaration du type de document (DOCTYPE) : il sagit dun simple bloc invariant indiquant que le fichier contient du XHTML ; le HTML proprement dit, avec lintrieur len-tte (head) et le corps (body). Le corps est tout ce qui est affich dans le rectangle principal, et len-tte correspond au reste (notamment des lments invisibles ou le titre de la page <title> qui saffiche dans la barre suprieure du navigateur quand la page est ouverte).
Exemple complet et simple de page HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Mon test</title> </head> <body> Bonjour le HTML ! </body> </html>

CONSEIL Soigner sa balise title


Le Title (contenu de la balise <title> dans <head>) est ce titre qui saffiche dans la barre suprieure du navigateur lorsque la page saffiche, ainsi que dans les diffrents onglets. Il sert didentifiant votre page et savre un facteur important pour russir son rfrencement (cest une balise de prdilection pour les robots des moteurs de recherche, et cest ce son contenu qui est affich en titre dans les rsultats de Google). Il est donc important que ce titre soit le plus clair et prcis possible, sans tre trop long, et contienne les mots-cls de votre page.

Vous pouvez essayer cet exemple. crivez-le dans le fichier de test qui tait vide, puis enregistrez le fichier et actualisez laffichage de votre navigateur (souvent, cela peut se faire avec la touche F5 de votre clavier).

Figure B-1

Un premier rsultat de page HTML

312
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Notez la structuration visuelle du fichier et les tabulations en dbut de ligne. Elles ne sont pas ncessaires mais permettent de rendre le code plus lisible. Tout aurait trs bien pu tre crit la suite, sur une seule ligne. En HTML, les espaces, tabulations et retours la ligne se trouvant dans le code ne sont pas visibles sur la page de rsultat, on sen sert simplement pour rendre le code plus clair et comprhensible. Essayez par exemple cette modification, et vous verrez que le rsultat est exactement le mme que prcdemment !
<body> Bonjour le HTML ! </body>

CONSEIL Les tabulations de dbut de ligne


La plupart des codeurs en HTML mettent des tabulations en dbut de ligne afin de distinguer les diffrents blocs, comme cest le cas dans les exemples des pages suivantes.

Les balises principales


Quelques balises sont essentielles, et se retrouvent abondamment utilises par Magento.

Les commentaires
Voici une premire balise qui nen est pas une : le commentaire. Il sagit dun code qui ne va pas tre excut, mais qui vous permet de vous reprer ou dajouter des remarques.
...<!-- dbut de la page ->

Le corps de texte et sa mise en forme


Les balises suivantes appartiennent au corps de la page. Vous allez pouvoir en observer le rsultat trs clairement. Lexemple prcdent vous a montr que les retours la ligne dans le fichier de code HTML navaient pas dimpact sur laffichage final. Il faut donc utiliser des balises ddies cela. La balise <br /> (break) ralise un simple retour la ligne, tandis que <p>...</p> entoure un paragraphe complet :
Paragraphes et sauts de ligne
<p> Nos riz de louest de lInde.<br /> Des got simples prts tre pics ! </p> <p>Nos autres riz indiens sont meilleurs encore.</p>

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

313

B HTML, CSS et JavaScript

Magento

SAVOIR
Un langage structure smantique
Il est important de bien comprendre la structure du HTML, et notamment du XHTML : plus quun langage de mise en forme (les CSS offrent pour cela des possibilits bien plus intressantes), il permet de structurer les informations au niveau smantique, savoir en fonction de leur sens et de leur statut dans la page : les niveaux de titre, par exemple, ont une importance smantique dans le contenu dun texte, et il ne sagit pas uniquement dun texte inscrit en gros caractres et en gras. Cela permet ensuite une meilleure exploitation des pages, que ce soit des fins de rfrencement ou pour tout autre traitement de ces informations (recherche, rutilisation des donnes, etc.). Nous vous conseillons donc de rserver la mise en forme la CSS (voir section suivante) et de vous concentrer sur la structure smantique de votre contenu dans le HTML.

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Un peu de mise en forme peut tre faite au moyen des balises <b> (bold, gras), <i> (italics, italique) et <u> (underlined, soulign), qui sont des balises strictement de mise en forme. On a aujourdhui tendance les remplacer les deux premires par les balises <strong> (fort) ou <em> (emphasis, mise en exergue), qui possdent de surcrot un caractre smantique. Par dfaut, les navigateurs afficheront du gras et de litalique.
Renforcement visuel dun texte (gras ou autre)
<p>Achetez 4kg, recevez <strong>5</strong>kg !</p>

Figure B-2

Un peu de texte...

Les titres
Les titres sont indiqus par des balises h1, h2... jusqu h6. Chacune correspond un niveau (h1 : titres principaux, h2 : titres de deuxime niveau, etc.).
<h1>Riz et culture</h1>

Listes et tableaux
Les listes puces sont ralises par la conjonction de deux balises. La premire, <ul> (unordered list), entoure la liste complte, et lintrieur <li> (list item) contient chaque lment :
Une liste puces
<ul> <li>Glucides : 79%</li> <li>Lipides : 1%</li> <li>Protines : 8%</li> </ul>

Figure B-3

Une liste non ordonne

314
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les tableaux utilisent trois balises incluses les unes dans les autres. La balise <table> contient des balises <tr> (table row, ligne de table) qui elles-mmes contiennent des balises <td> (table data, donne de table), voire <th> (table header, en-tte de table), qui correspondent aux cellules.
Un tableau simple
<table> <tr> <th>Pays</th> <th>Type</th> </tr> <tr> <td>Inde</td> <td>Long</td> </tr> <tr> <td>Chine</td> <td>Rond</td> </tr> </table>

Des attributs nombreux peuvent tre ajouts, en particulier pour fusionner des cellules. Lattribut colspan indique une fusion dans le sens horizontal (sa valeur correspond au nombre de cellules fusionnes) et rowspan, dans le sens de la hauteur. Ce sont donc des attributs optionnels, dont la valeur par dfaut est 1.
Extrait du tableau prcdent dans lequel on a fusionn deux cellules
... <tr> <td rowspan='2'>Chine</td> <td>Rond</td> </tr> <tr> <td>Long</td> </tr> </table>

Figure B-4

Un tableau, incluant deux cellules fusionnes

Les balises de liens


Les deux prochaines balises proposent de mettre en place des URL. Une URL complte, absolue, indique le protocole utilis, puis le nom de
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

315

B HTML, CSS et JavaScript

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

LINTRIEUR Linterprtation des liens


par le navigateur
Quand un navigateur rencontre une balise avec lune des deux syntaxes, il les convertit naturellement en adresse absolue en les mlangeant avec ladresse de la page en cours.

domaine, et enfin les rpertoires et le fichier appel. Par contre, des adresses relatives sont aussi autorises : /recettes/risotto.html est une adresse partiellement relative. Le / du dbut correspond au dbut du chemin, juste aprs le numro de port (ou le nom de domaine) dans une adresse absolue. ../index.html est une adresse relative, elle ne commence ni par un protocole (http://), ni par un /. Il sagit alors dun chemin par rapport la page en cours.

Lien vers une autre page


La balise <a> (anchor, ancre) permet de faire un lien (affich par dfaut en bleu et soulign), sur lequel lutilisateur peut cliquer. Cest une balise double, ce qui permet dindiquer un texte. Lattribut href contient lemplacement vers lequel le lien mne.
Exemple de lien vers la page daccueil (index.html)
<a href='/index.html'>Retour laccueil</a>

Images
Les images ne peuvent tre incluses dans un fichier HTML, qui ne contient que du texte. Celles-ci sont donc appeles depuis le navigateur au moyen de la balise <img /> (image), dont lattribut src (source) donne lemplacement sur le serveur.
<img src=http://www.magentocommerce.com/img/logo.gif />

Lencodage des caractres


CULTURE Encodage des caractres
Lencodage correspond la faon de stocker sous forme doctets (nombres) les caractres. Pour le franais, les normes ISO-8859-1 et ISO-8859-15 sont particulirement adaptes, mais la norme UTF-8 est dsormais la plus rpandue car, au prix dun espace plus important, elle permet denregistrer des caractres de toutes les langues dans un mme texte. Les Anglo-Amricains disposaient quant eux dun encodage simplifi et plus lger, lASCII, leur langue comportant trs peu de caractres spciaux.

Vous avez rdig votre page HTML dans un certain systme dencodage des caractres, qui peut habituellement tre indiqu dans lditeur que vous utilisez (sinon il correspond lencodage en cours dans votre systme dexploitation). Les encodages les plus courants en Europe sont ceux dEurope occidentale ISO et Windows, ainsi que lUnicode (UTF8), cens pouvoir reprsenter les caractres du monde entier. Si un visiteur de votre page nutilise pas le mme encodage que vous, les problmes seront criants. Tous les caractres spciaux seront transforms de manire bizarre. Il est gnralement possible de tester ceci en modifiant le comportement du navigateur, une option permettant dy spcifier lencodage (Affichage>Encodage des caractres dans Mozilla Firefox 3 ou Affichage>Codage dans Internet Explorer 7, par exemple).

316
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Plusieurs solutions pallient ce problme, en particulier celles-ci (la conjonction des deux solutions tant la faon de faire la plus sre) : remplacer tous les caractres spciaux par des entits , cest--dire des codes spcifiques, dont la liste officielle est facile trouver ; par exemple, on crira &eacute; plutt que , &agrave; plutt que ; indiquer dans len-tte, par lattribut charset dune balise <meta> (qui a beaucoup dautres possibilits non abordes ici), lencodage que vous avez utilis, comme dans lexemple qui suit.
Indication du systme dencodage dans len-tte HTML
<head> <metahttp-equiv="content-type" content="text/html;charset=windows-1250">

ASTUCE Liste des caractres spciaux


B http://htmlhelp.com/reference/html40/

entities/

Voici donc les principales balises du HTML et XHTML. De nombreuses autres existent, et certaines sont utilises par Magento. Consultez les ouvrages spcialiss pour en savoir plus.

LIRE HTML, XHTML et CSS


R F. Draillard, Premiers pas en XHTML et

CSS
La norme CSS sajoute au HTML. Elle correspond la mise en forme (couleurs, polices...) du contenu dun fichier HTML. Elle est disponible en trois versions, chacune apportant des possibilits supplmentaires. La plupart des navigateurs respectent correctement la version 2. Nous prsentons ici lessentiel, avec la version 1. Pour les dtails des versions 2 et 3, consultez les ouvrages spcialiss. Les CSS dcrivent une balise HTML lintrieur dun attribut style='...'. Le code CSS est la partie lintrieur des apostrophes. Il ne sagit plus de HTML. Les instructions CSS sont toujours avec la mme syntaxe, [proprit]:[valeur], avec des points-virgules pour les sparer. Chaque instruction apporte une mise en forme supplmentaire de llment HTML concern (voir le premier exemple de code ci-aprs). Les commentaires peuvent y tre crit avec /* .. */. Comme pour le HTML les espaces, retours la ligne et tabulations insrs dans le code ou le fichier CSS nont pas dincidence sur le rsultat des pages cres.

CSS, 3e dition, Eyrolles, 2010. R M. Nebra, Russir son site web avec XHTML et CSS, 3e dition, Eyrolles, 2010. R R. Goetter, CSS 2 Pratique du design web, 2e dition, Eyrolles, 2009. R R. Goetter, Mmentos XHTML et CSS, 2e dition, Eyrolles, 2009.

SAVOIR Et si je najoute pas de CSS


dans mon code HTML ?
Sans utiliser les CSS, il y a des mises en forme par dfaut. Par exemple, le texte est noir, le fond est blanc, le contenu de la balise <strong> est en gras, <em> en italique... Les CSS viennent seulement modifier le comportement standard de chaque balise.

Intgrer les CSS dans le HTML


Trois solutions sont possibles afin de mlanger les CSS au HTML : lintgrer directement dans les balises HTML ;
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

317

B HTML, CSS et JavaScript

Magento

indiquer lensemble des styles de la page en haut de page ; indiquer les styles dans une feuille de styles spare.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La premire solution consiste placer, dans la balise HTML concerne, un attribut style. Les espaces autour des signes de ponctuation ; et : dans la balise sont sans consquence.
Exemple de CSS intgr dans une balise HTML pour afficher un texte en Arial rouge
<p style='color:red ; font-family:Arial'>Et le bl ?</p>

La deuxime solution propose de placer tout le code CSS dans len-tte de la page, cest--dire la balise <head>, dans une balise spcifique <style>. Les navigateurs les plus anciens demandent lajout dune balise de commentaire lintrieur <!-- -->.
Exemple de CSS plac dans len-tte HTML
<head> ... <style type="text/css"> <!-- h1 { padding:3px } --> </style> </head>

La dernire solution consiste crer un fichier texte spcial dans lequel le code CSS (tel que le h1 de lexemple prcdent) se trouve isol. Cest ce quon appelle une feuille de styles. Dans len-tte du fichier HTML, il faut alors faire appel ce fichier en utilisant une balise de lien <link>.
Exemple de lien vers une feuille de styles CSS
<head> ... <link rel="stylesheet" type="text/css" href="titres.css" /> </head>

Crez alors un nouveau fichier textuel, nomm textes.css, puis ajoutez lintrieur.
Contenu du fichier textes.css CONSEIL Sparer le HTML du CSS
Coder le HTML et le fichier CSS sparment est la meilleure faon de faire, permettant de rutiliser un fichier CSS pour plusieurs pages HTML et deffectuer trs rapidement et sans oubli des modifications de style.
body{ color: #666; }

Ensuite, essayez de faire un lien (relatif ou absolu) vers le fichier CSS que vous venez de crer, depuis le fichier HTML prcdent, et observez le rsultat.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

318

Associer le code CSS au HTML


Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Quand le code CSS nest pas au milieu du code HTML, il faut un moyen pour faire des correspondances entre lun et lautre. Trois solutions sont alors utilisables, en fonction de la cible, qui peut tre : soit un type dlments (des balises HTML, par exemple h3) ; soit une classe CSS ; soit un identifiant. La syntaxe gnrale est [cible] [proprit3] }, comme suit :
{ [proprit1] ; [proprit2] ;

h3 { color:blue ; background-color:cyan; }

Dans ce cas prcis, cest le nom de la balise (type dlments) qui a t utilis comme cible. Il est galement possible dindiquer des classes CSS lintrieur des balises HTML, grce lattribut class. Chaque balise peut avoir plusieurs classes, spares par des espaces. Le nom de chaque classe est au choix (mais sans caractres spciaux), par exemple :
<a href='contact.html' class='liens bleuvert'>...</a>

De faon trs similaire, il est possible dindiquer un identifiant, grce lattribut id. Deux balises ne peuvent avoir, dans une mme page, le mme identifiant :
<h1 id='titrePrincipal'>...</h1>

CONSEIL Choisir des noms judicieux


Il est prfrable de choisir soigneusement les noms des classes et les identifiants, afin de rendre votre code CSS facilement modifiable plus tard.

Enfin, dans la CSS, les classes seront indiques par leur nom prcd dun point, et les identifiants par leur nom prcd dun dise. Voici le code dun fichier CSS complet.

Figure B-5

Rsultat dune mise en forme complte

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

319

B HTML, CSS et JavaScript

Magento

Exemple de fichier CSS


h1 { color: green; } h2 { color: green; padding-left: 20px; } .liens { text-decoration: none; } .bleuvert { color: cyan; } #titrePrincipal { font-weight: bold; border: 1px solid green; }

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Quelques proprits CSS


Quelques dizaines de proprits CSS existent, chacune modifiant une particularit de laffichage dune balise HTML. La plupart des proprits ne sappliquent qu certains types dlments (par exemple, color ne sapplique quaux balises contenant du texte). Les diffrentes valeurs possibles pour ces diffrentes proprits dpendent de la proprit elle-mme.

Couleurs
SAVOIR Les codes couleurs
Les codes couleurs de trois octets sont couramment utiliss, et nimporte quel logiciel de dessin ou de traitement dimages sera capable de vous assister pour choisir vos teintes.

Les proprits color et background-color indiquent les couleurs de forme et de fond. La valeur peut tre : une couleur, choisir dans une liste prdfinie (en anglais) : blue, green, magenta... trois valeurs entre 0 et 255, correspondant la quantit de rouge, vert et bleu constituant la couleur lcran, sous cette forme :rgb(0,255,0) (vert vif ) ; ces mmes trois valeurs, abrges par une criture hexadcimale (exemple :#00FF00 voire #0F0).
Dfinition dune couleur pour un paragraphe
p { background-color: rgb(64,0,32); }

SAVOIR Les fichiers de polices


Les polices de caractres sont contenues dans des fichiers installs sur chaque ordinateur. Elles ne sont donc en aucun cas incluses dans vos fichiers, et lutilisateur devra avoir la police que vous spcifiez installe sur son poste pour pouvoir lafficher sur son cran. Les polices de remplacement servent donc compenser certains manques, et des systmes de polices embarques dans les pages web sont ltude, mais posent de nombreux problmes de droits.

Polices de caractres
La proprit font-family indique la police de caractres utiliser. Il y a plusieurs valeurs, spares par des virgules, afin de proposer une autre police si la premire demande nest pas disponible sur lordinateur du client.
Dfinition dune police et de ses polices alternatives
body { font-family: Arial, Tahoma, Sans-serif; }

320
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Marges et bordures
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La proprit padding indique une marge intrieure. Elle est complte par border (la bordure visible) et margin (la bordure extrieure). Pour chacune des ces trois proprits, il est possible dindiquer la taille de lensemble des cts en une seule fois, ou bien des mises en place spares. La taille peut tre indique en pixels. Voici deux exemples identiques :
Dfinition dune marge pour les deux cts en une seule proprit
margin: 0 10px 0 0;

Dfinition dune marge pour les deux cts sparment


margin: 0px; margin-right: 10px;

Raliser une bordure ncessite galement dindiquer sa couleur et son style.


Dfinition dune bordure
border: 3px solid blue;

Autres
Bien dautres proprits CSS sont utiles. Il est intressant de sinspirer des feuilles de styles existantes, par exemple celles mises en ligne par les sites que vous visitez : 1 Rendez-vous sur le site via un navigateur. 2 Le navigateur vous permet de voir le code source (menu Code source, dans le menu Affichage ou dans le menu clic droit). 3 Dans le code source HTML, retrouvez les balises link (sil y en a). 4 Observez ladresse indique pour reconstituer lemplacement de la CSS. 5 Entrez ensuite cette adresse directement dans la barre dadresses du navigateur. 6 La feuille de styles apparat et peut maintenant tre enregistre.

JavaScript
Le JavaScript est un langage similaire au CSS, dans le sens quil sintgre au HTML afin de le modifier. Mais si le CSS sappliquait changer la mise en forme, le JavaScript, lui, propose de modifier le comportement
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

321

B HTML, CSS et JavaScript

Magento

EXEMPLE Leffet domino


Un exemple typique : lors de la saisie de ses coordonnes postales, si lutilisateur doit choisir une commune franaise, il verra alors apparatre une premire partie du formulaire qui lui permet dans un premier temps de choisir le dpartement. Ds quil en slectionne un, la suite de la page se modifie afin de lui proposer toutes les communes du dpartement concern.

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

des lments du HTML. Il sagit essentiellement de ragir aux actions de lutilisateur. Cest ce quon appelle un langage dynamique. Des cas typiques dutilisation du JavaScript sont : un menu droulant qui ne saffiche que lorsquil est survol par le curseur de la souris ; la validation des donnes entres par lutilisateur dans un formulaire ; le rafrachissement partiel de la page via Ajax. Le JavaScript est un langage de programmation. Il est plutt dlicat matriser. Le code JavaScript sexcute sur le navigateur du client. Il peut donc avoir t dsactiv, ou tre mal compris (ce qui est le cas de beaucoup de navigateurs web pour tlphones portables). Ses possibilits sont restreintes en consquence : le JavaScript ne peut modifier quasi que la page en cours. Il ne peut pas accder au disque dur du client, ses priphriques (carte son, imprimante), faire une connexion quelconque, etc.

CULTURE JavaScript en dehors du Web


Le JavaScript est un langage de programmation complet et peut tre utilis afin de raliser toutes sortes dapplications. Toutefois, il se diffrencie fortement des autres langages et souffre pour le moment de labsence dun environnement de dveloppement acceptable.

Intgrer le JavaScript dans le HTML


Le mlange du HTML et du JavaScript est trs similaire celui du HTML et du CSS. Le JavaScript peut tre plac directement dans le code HTML, dans len-tte de la page ou dans des scripts spars. Voici un exemple du premier cas, afin de dclencher une alerte sur une page.
Code JavaScript intgr une balise HTML
<p onclick='alert("Page incomplte");'>Les riz complets.</p>

Figure B-6

Dclenchement dune alerte sur la page

Et voici un exemple du second, provoquant un changement de page lorsquon passe la souris au dessus dune phrase.

322
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

JavaScript plac dans len-tte de la page HTML


<head> ... <script type='text/javascript'> function plusdinfo() { document.location = 'http://www.leriz.fr'; } </script> </head> <strong onmousemove='plusdinfo();'>Plus d'infos ?</strong>

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Notez les attributs onclick, onmousemove. Ce sont les correspondances entre tel vnement (li tel lment de la page) et tel script excut. Chaque balise HTML peut disposer de ces vnements ddis au JavaScript. Ltude complte du JavaScript est hors du propos de cet ouvrage. Toutefois, notez que vous aurez disposition de nombreuses bibliothques JavaScript, telles que Script.aculo.us, prtes tre utilises (en tant que script spar), fournissant des services standards (animation, Ajax, etc.).

LIRE JavaScript, Ajax et Script.aculo.us


R C. Porteneuve, Bien dvelopper pour le

Web 2.0 , 2e dition, Eyrolles, 2008. 2007.

R S. Powers, Dbuter en JavaScript, Eyrolles, R T. Templier, A. Gougeon, JavaScript pour le

Web 2.0 , Eyrolles, 2007.

Script.aculo.us
Utilisation
Une fois la bibliothque tlcharge (elle est bien sr prsente dans linstallation de Magento, ce qui permet den bnficier directement), il faut inclure dans le HTML les fichiers .js correspondant la bibliothque.
<script src="prototype.js" type="text/javascript"></script> <script src="scriptaculous.js" type="text/javascript"></script>

Ensuite, il est possible daffecter des comportements des lments, en raction des vnements. Chaque comportement est paramtrable. Voici laffectation dune fonction un vnement (ici : lvnement onload de la fentre) :
Event.observe(window, load, function() { alert(ok); });

CONSEIL Le site Script.aculo.us


Pour en apprendre plus sur Script.aculo.us, ou simplement voir une dmonstration, rendez-vous sur le site du mme nom :
B http://script.aculo.us

Dans cette fonction on peut demander lutilisation dun effet Script.aculo.us :


Event.observe(window, 'load', function() { new Effect.Appear($('image'), {duration : 3 }); }); <img src='black.png' id='image' />

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

323

B HTML, CSS et JavaScript

Magento

Cela a pour effet de faire apparatre llment de la page HTML dont lidentifiant (attribut id) est image.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Voici enfin la mme fonctionnalit, mais avec une syntaxe plus moderne de Script.aculo.us.
Event.observe(window, 'load', function() { $('image').appear({duration : 3 }); }); <img src='black.png' id='image' />

Principaux effets
Effect.Morph

propose la modification progressive dune proprit CSS quelconque (duration indique la dure en secondes).

Modification dune proprit CSS avec Effect.Morph


$('tableau').morph({ style:'background-color:#000;', duration:0.5 }); Effect.Move absolute).

propose de dplacer un lment (le mode est

relative

ou

Dplacement dun lment avec Effect.Move


$('tableau').move({ x: 10, y: -10, mode: 'relative' }); Effect.Opacity fait apparatre (ou disparatre) un lment en manipulant lopacit (inverse de la transparence, entre 0 et 1).

Modification de lopacit dun lment avec Effect.Opacity


$('tableau').opacity({ from: 1.0, to: 0, duration: .3 });

La plupart des autres effets sont drivs des prcdents, par des combinaisons de toutes sortes. Par exemple, Effect.Fade propose de faire disparatre un lment compltement.
Disparition dun lment avec Effect.Fade
$('tableau').fade({ duration: .5 });

Comportements
Script.aculo.us propose galement certains mcanismes permettant de modifier le comportement de la page, essentiellement autour du glisser324
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

dposer (Drag&Drop). Voici comment faire en sorte quun lment puisse tre dplac (comportement le plus simple propos). De nombreuses options sont ensuite disponibles.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Rendre un lment dplaable


new Draggable('produits', { revert: true, contraint:'horizontal' }); <span id='produit'>...</span>

Llment produit peut alors tre dplac par lutilisateur au moyen de la souris. Il reprendra sa place ds quil laura lch, et ne pourra tre dplac que de gauche droite ou de droite gauche.

Ajax
Enfin, Script.aculo.us propose lutilisation des fonctionnalits Ajax mises en place par Prototype, bibliothque sous-jacente basique et trs rpandue (voir le chapitre 2 ce sujet). Voici un exemple dutilisation dAjax grce Prototype. Lorsque la fonction JavaScript sera excute, une adresse sera appele, et le rsultat de cet appel, invisible pour lutilisateur, sera affich ds rception dans une zone de la page.
Exemple dutilisation dAjax
function appel(i) { new Ajax.Request('/recette.php?n='+i, { method:'get', onSuccess: function(res){ $('zone').innerHTML = res.responseText; } }); }

Bien sr, il faut quen correspondance, la page recette.php supplmentaire soit cre et renvoie des recettes la demande en fonction du paramtre n (ce nest pas du ressort du JavaScript, mais du PHP).

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

325

B HTML, CSS et JavaScript

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

user 177 at Thu Nov 11 07:36:42 +0100 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

PHP et le Zend Framework

Magento est un logiciel crit en PHP, qui repose sur lun des frameworks PHP les plus puissants et les plus dynamiques, le Zend Framework. Lapprentissage de ces technologies ncessiterait plusieurs ouvrages entiers, nous nous contentons donc de vous en fournir ici une prsentation, en prcisant les spcificits lies leur intgration par Magento.

PHP
Les fichiers PHP portent lextension .php. Le code PHP est lui aussi mlang au HTML, mais sen distingue facilement. La syntaxe PHP vient en addition du HTML. Dans un fichier PHP, il peut ventuellement ny avoir que du HTML. Dans le HTML, PHP est appel par des balises <?. Deux versions sont disponibles : <? ?> (ainsi que sa variante stricte <?php ?>) permet de placer un code PHP quelconque. Ce code est constitu dinstructions, les unes aprs les autres, termines par des points-virgules ; <?= ?> permet dafficher lemplacement choisi le rsultat dune expression. Voici un exemple de code PHP lintrieur dune page HTML complte. Attention, le PHP ncessite un interprteur, cet exemple ne peut donc pas tre test tel quel comme les exemples prcdents en HTML ou CSS.

LINTRIEUR Apache et interprtation PHP


Magento ncessite un interprteur PHP, associ au serveur web (Apache). Dans un rpertoire de Magento, vous pouvez donc crer des scripts PHP (fichiers textuels .php) et les appeler comme vous le feriez avec des pages de Magento.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

Exemple de code PHP


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <?php $titre = 'Les riz africains'; ?> <head><title><?= $titre ?></title></head> <body> <h1> </body> </html>

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

<?= $titre ?> </h1>

LIRE PHP pour tous niveaux


R J. Engels, PHP 5 Cours et exercices, 2e

dition, Eyrolles, 2009.


R E. Daspet, C. Pierre de Geyer, PHP 5 avanc,

Nous ne dveloppons pas plus cette syntaxe, car lapprentissage du PHP fait lobjet douvrages entiers. Vous en trouverez quelques rfrences cicontre.

5edition, Eyrolles, 2008.

R J.-M. Defrance, Premires

applications web avec Ajax, jQuery et PHP, Eyrolles, 2010. R D. Seguy, P. Gamache, Scurit PHP 5 et MySQL, 2e dition, Eyrolles, 2009. R G. Ponon, Best practices PHP 5, Eyrolles, 2005.

Les apports de PHP 5


Magento ncessite la version 5.2.0 (ou plus rcente encore) de PHP. PHP 3 date de 1998, et fut la premire version utilise en masse ; PHP 4 a volu petit petit jusqu PHP 4.4 en 2005 ; PHP 5 (2004) est une grande volution de PHP, ajoutant de nombreux points syntaxiques, tandis que PHP 5.2 (2006) apporte toutes sortes dajouts parmi les bibliothques. Pour ceux qui connaissent dj le PHP, lapport de PHP 5 mrite dtre dvelopp. Il y a eu rupture de compatibilit dans les deux sens entre PHP 4 et PHP 5, ce qui notamment rend impossible lutilisation telle quelle de nombreux scripts datant de 2004 ou avant. PHP 5 a t une volution positive et importante de PHP. Elle a apport des mcanismes qui existaient bien avant dans dautres langages objet, tels Java ou C#, et qui rendent le code des applications de grande envergure plus propre, plus comprhensible et plus facile maintenir. Une premire volution a t daugmenter les possibilits de la programmation oriente objet, avec lapparition des classes abstraites, des interfaces, des lments statiques, etc.. Une modification est dimportance : le constructeur sappelait comme la classe en PHP 4, mais il sappelle toujours __contruct() en PHP 5. Par chance, si le second constructeur nexiste pas, le premier est utilis. Quant la principale source de difficults et de retards dans le passage PHP 5 de nombreux outils, elle tient la modification du comporte-

328
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

ment face aux rfrences. En effet, en PHP 4, quel que soit le type de $a, le code suivant produisait une copie complte :
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10
$b = $a;

Il fallait alors utiliser lesperluette pour bnficier dune copie de rfrence :


$b = & $a;

Le mcanisme tait le mme lors des appels de fonctions et de leurs retours. Voici un code qui affiche juste une phrase, afin de tester la version. En PHP 5, dans le cas des objets, la copie de rfrence est implicite. Cela signifie que le code suivant a pour rsultat PHP 4 ou PHP 5 , suivant la version :
Affichage dune phrase pour tester la version de PHP
class C { var $x; } function changepas($o) { $o->x += 1; } $o = new C(); $o->x = 4; changepas($o); echo 'PHP '.$o->x;

LIRE Zend Framework


Mme sil ne prsente pas la dernire version du framework, dont lvolution est encore trs rapide, cet ouvrage permet de se familiariser avec le fonctionnement du Zend Framework et de la programmation objet en PHP : R J. Pauli, G. Ponon, Zend Framework Bien dvelopper en PHP, Eyrolles, 2008.

Ceci peut tre un frein votre utilisation de Magento en collaboration avec dautres outils plus anciens.

Le Zend Framework
Magento utilisant ce framework abondamment, en voici une brve prsentation.
CULTURE Zend et le PHP
Zend Technologies est une socit qui a eu un impact dcisif sur le PHP, de par les outils quelle fournit aux dveloppeurs. Actuellement, elle propose en particulier le Zend Framework, Zend Server (serveur web) et Zend Studio (environnement de dveloppement). Si le premier est libre et gratuit, les deux autres sont, en revanche, commerciaux.

Le Zend Framework dans Magento


Un lment essentiel du Zend Framework est son implication dans la structure mme de lapplication qui lutilise. Ainsi, une structure est propose, et peut mme tre cre automatiquement par un script shell inclus, sous la forme : reprsente sur la figure C-1.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

329

C PHP et le Zend Framework

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento

Figure C-1

La structure issue du Zend Framework

Il ne reste plus alors qu complter lapplication en ajoutant des modles (code mtier, manipulation des donnes), contrleurs (rception des actions de lutilisateur) et vues, en correspondance avec les fonctionnalits dsires. On retrouve donc ici larchitecture MVC (Modle-VueContrleur) respecte par Magento. Toutefois, Magento nutilise pas lorganisation stricte dapplication telle que propose par le Zend Framework, mais se calque en ralit sur le Zend Framework plutt que de sy intgrer. Le Zend Framework nest donc directement utilis dans Magento que comme bibliothque de classes utilitaires. Chaque classe a un nom correspondant son emplacement. Afin de pallier labsence des espaces de noms ou namespaces existant jusqu PHP 5.3, les noms des classes sont complets. Par exemple, la classe Zend_Amf_Parse_Deserializer se trouve lemplacement lib/Zend/Amf/ Parse/Deserializer.php.

Interaction avec les bases de donnes


La classe Zend_Db_Adapter_Abstract prsente des fonctionnalits courantes de manipulation de base de donnes. En hritent des classes filles spcialises dans des bases de donnes particulires comme : DB2 (IBM DB2) ; MySQLi (MySQL improved) ; Oracle (Oracle DB) ; PDO (PHP Data Objects pour les SGBD IBM DB2, Microsoft SQL Server, MySQL, Oracle DB, PostgreSQL, SQLite). 330
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Si MySQL reste toutefois ncessaire pour Magento, dautres bases de donnes seraient en principe prises en charge par cette bibliothque Zend.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Magento fait lui-mme une requte de cet ordre, ce qui permet dobtenir une instance de la base de donnes.
Requte pour obtenir une instance de la base de donnes
$db = Zend_Db::factory('Pdo_Mysql', array( 'host' => '...', 'username' => '...', 'password' => '...', 'dbname' => '...' ));

Ensuite, linstance utilise est disposition pour toute requte. Parmi les fonctions, fetchAll() ralise une requte, ventuellement avec des paramtres (points dinterrogation) et renvoie le rsultat sous la forme dun tableau (dobjets) :
Utilisation de la fonction fetchAll()
$result = $db->fetchAll( 'SELECT * FROM catalog_product_entity '. 'WHERE entity_id = ?', 3); echo $result[0]->sku;

ATTENTION Utiliser les modles


pour les requtes dans Magento
Gnralement, le dveloppeur pour Magento nutilisera pas le mcanisme de requtes prsent ci-contre, mais le systme de modles prsent au chapitre 11 de cet ouvrage.

Le SQL avec ladaptateur


Les classes de bases de donnes du Zend Framework facilitent en particulier lenvoi de SQL standard vers MySQL. Voici une prsentation des bases de ce langage. Le SQL ne tient pas compte de la diffrence entre majuscules et minuscules, ni des espaces, retours la ligne et tabulations. La fin dune ligne peut tre commente avec deux tirets :
-- commentaire -- commentaire suite

RAPPEL SQL
Le SQL (Structured Query Language) est le langage privilgi pour la communication avec les bases de donnes. Il sagit dun langage simple et norm. Les systmes de bases de donnes relationnelles respectent gnralement correctement ce langage, en y apportant des lments spcifiques supplmentaires, ce que ne manque pas de faire MySQL.

Les requtes principales du SQL sont dfinies comme les requtes du langage de manipulation de donnes (DML, Data Manipulation Language), un sous-ensemble du SQL. Ces requtes, au nombre de quatre, permettent de lire et denregistrer des donnes tout moment dans la base. Les exemples suivants correspondent une table espece qui contiendrait trois champs : espece_id, nom et type. Linsertion de donnes se fait par
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

331

C PHP et le Zend Framework

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

le moyen de INSERT INTO, qui indique la table et les diffrentes valeurs pour les champs.La suppression de donnes se fait par le moyen de DELETE FROM, qui indique la table et peut contenir une clause WHERE afin de choisir prcisment les donnes supprimer. Quant la modification de donnes, elle seffectue avec UPDATE, qui peut contenir une clause WHERE afin de choisir les donnes modifier, et SET pour choisir les modifications. Enfin, il est possible de lire des donnes avec linstruction SELECT. Il faut alors indiquer les champs lire, la table concerne (aprs FROM), ventuellement filtrer avec une clause WHERE, et ordonner avec une clause ORDER BY.
Insertion de donnes (insert)
INSERT INTO espece VALUES(2, 'Oriza Sativa Indica', 'long');

Suppression de donnes (delete)


DELETE FROM espece WHERE espece_id > 22;

Modification de donnes (update)


UPDATE espece SET nom='Oriza Sativa Japonica' WHERE espece_id = 11;

Lecture des donnes (select) LIRE SQL


R C. Soutou, Apprendre SQL avec MySQL

Avec 40 exercices corrigs, Eyrolles, 2006.


R C. Pierre de Geyer, G. Ponon, S. Mariel,

SELECT espece_id, nom FROM especes WHERE type = 'long' ORDER BY nom;

Mmento PHP 5 et SQL, 2e dition, Eyrolles, 2009.

De nombreuses possibilits supplmentaires sont disponibles dans le langage SQL, afin de lier les donnes entre elles, de les filtrer, etc. Rfrez-vous pour cela aux ouvrages spcialiss.

Le contrleur
Le contrleur est la couche de MVC qui est appele lors de toute action de lutilisateur. Il fait appel lui-mme au modle et la vue. Les classes associes au contrleur donnent des informations propos du contexte web dans lequel on se trouve. On retrouve notamment Zend_Controller_Request_Http, dont linstance sera produite pour nous, qui reprsente la requte.

332
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Requte de type Zend_Controller_Request_Http


//$req est de type Zend_Controller_Request_Http if($req->isPost() ) echo $req->getPost('valeur2');

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

La classe oppose est la classe permet de modifier la rponse.

Zend_Controller_Response_Http,

qui

CONSEIL Ne pas outrepasser


le Zend Framework
Bien sr, il serait possible doutrepasser compltement ces classes pour accder ces donnes avec $_POST, $_GET, header(), etc. Toutefois, les mthodes prsentes ici permettent de bnficier de tous les services associs au framework (scurit, log).

Modification de la rponse avec Zend_Controller_Response_Http


//$res est de type Zend_Controller_Response_Http $res->setHeader('Content-Type','text/html'); $res->appendBody('<html>');

Le client HTTP
La classe Zend_Http_Client est disposition pour raliser des requtes HTTP depuis le serveur vers dautres serveurs. Son utilisation est aise, voici un exemple denvoi de formulaire.
Envoi de formulaire avec Zend_Http_Client
$client = new Zend_Http_Client( 'http://www.dawan.fr/contact.html', array('timeout'=>10)); $client->setParameterPost('titre'=>"Demande dinformations"); $reponse = $client->request('POST'); echo $reponse->getBody();

Bien sr, le rsultat de lappel Zend_Controller_Response_Http.

request()

est un objet de type

Autres classes utiles


La classe Zend_Date propose la manipulation simple de dates :
Affichage dune date et heure (1er janvier 2001, midi) avec Zend_Date
$date = new Zend_Date(mktime(0,0,0,1,1,2001)); $date->add('12:00:00', Zend_Date::TIMES); echo $date->toString('dd.MM.yyyy');

La classe Zend_Json propose lencodage dun objet sous une forme JavaScript pratique rutiliser ensuite depuis Script.aculo.us.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

333

C PHP et le Zend Framework

Magento

Cration dune erreur encode en Json avec Zend_Json


echo Zend_Json::encode( array('error' => true, 'error_msg' => 'Catastrophe !') );

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Bien dautres classes sont encore disponibles dans le Zend Framework, pour un total denviron cinquante paquets, mais elles ne sont pas ou peu utilises par Magento lui-mme, qui nen a pas lutilit ou qui les a redfinies sous une autre forme (pour des raisons dhomognit, de performance ou autre).

334
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

XML

Nombre de fichiers de configuration de Magento sont en XML. Voici donc un rcapitulatif du principe de fonctionnement de ce langage et de ses rgles fondamentales.

Pourquoi XML ?
XML (eXtensible Markup Language) tant un langage incomplet (appel aussi mtalangage), il est la base de trs nombreux langages, quils soient anecdotiques (si le seul exemplaire dutilisation de ce langage est le fichier de configuration dune application, par exemple) ou courants comme le XHTML (mlange de XML et de HTML, voir lannexe B). Il a lavantage de proposer des rgles simples pour dfinir une structure de document, une mise en forme, un encodage de caractres, etc. Voici donc le processus final pour construire un langage partir du XML : 1 Je dtermine le besoin dun nouveau langage. 2 Je choisis dutiliser le XML comme base. 3 Jindique les rgles manquantes afin dobtenir un langage complet. Il existe des concurrents au format XML, entre autres : les fichiers plats, plus simples mais aussi plus basiques et, par consquent, moins utiles (que faire des retours la ligne ? quels encodages ? etc.) ; les bases de donnes (lourdes mettre en place, administrer, scuriser) ; YAML (YAML Aint Markup Language), langage un peu plus simple et beaucoup plus rare, etc.
Groupe Eyrolles, 2010
user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

XML est tellement courant quun poste informatique contient habituellement des centaines de fichiers qui suivent cette norme.
Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Les rgles fondamentales du XML


Les rgles du XML sont peu nombreuses, et ce sont celles qui sont notamment appliques dans le XHTML.
RAPPEL Encodage des caractres
Pour le franais, les normes iso-8859-1 et iso-8859-15 taient particulirement adaptes, mais la norme utf-8 (Unicode) est dsormais la plus rpandue car, au prix dun espace plus important, elle permet denregistrer des caractres de toutes les langues dans un mme texte.

Le document XML commence par une balise spcifique <?xml ... ?>, contenant notamment la version de XML (toujours 1.0, en fait) et le systme dencodage des caractres utiliss (utf-8, iso-8859-1, etc.), puis contient au moins une balise racine <a />. Voici un document XML minimal :
<?xml version='1.0' encoding='utf-8' ?><a />

Chaque balise peut tre simple et sans contenu, ou double (ouvrante et fermante) et contenir dautres balises, et ainsi de suite. Les donnes sont contenues entre les balises ouvrante et fermante ou lintrieur dattributs.
Exemple de recette de cuisine structure en XML

<?xml version='1.0' encoding='utf-8' ?> <livre> <!-- juste une seule recette pour le moment--> <recette nom='Riz sngalaise' duree='90'> <ingredient nom='cuisses de poulet' quantite='4' /> <ingredient nom='riz long' quantite='400g' /> <ingredient nom='concentr de tomates' quantite='1bote' /> <ingredient nom='cube bouillon' quantite='4' /> <ingredient nom='poivron vert' quantite='1' /> <ingredient nom='carotte' quantite='2' /> <ingredient nom='oignon' quantite='2' /> <ingredient nom='ail' quantite='5' /> <manipulation><![CDATA[Plonger les cuisses de poulet en morceaux dans une cocotte, avec de l'huile. Laisser dorer]]></manipulation> <manipulation>Ajouter les oignons, ail, bouillon de cube, tomate et poivrons en morceaux </manipulation> <manipulation>Ajouter un litre d'eau</manipulation> <manipulation>Laisser cuire 30 minutes</manipulation> <manipulation>Ajouter les carottes</manipulation> <manipulation>Laisser cuire 30 minutes</manipulation> <manipulation>Rserver les morceaux, et faire cuire le riz 30 minutes avec le bouillon qui reste </manipulation> <manipulation>Remettre les morceaux sur le riz, et servir</manipulation> </recette> </livre>

Notez le commentaire <!-- ... -->, comme en HTML, ainsi que le bloc CDATA qui permet de mettre des donnes sans que le formatage ne soit dtruit (ici un retour la ligne). 336
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Quelques rgles supplmentaires sont respecter en XML : pas dimbrication de balise ; ceci est interdit :<a><b></a></b> ; jamais deux attributs de mme nom dans un mme lment ; lordre des attributs dans un lment nimporte jamais ; les caractres spciaux sont au nombre de cinq :<, >, ", et &, remplacer par les expressions &lt;, &gt;, &quot;, &apos;, &amp; pour ne pas tre confondus avec des signes du langage ; les minuscules et majuscules sont diffrencies.

Autres normes associes XML


XML est un point de dpart pour de nombreuses normes de toutes sortes, qui fonctionnent en association avec ce langage. La validation de structure de fichiers XML est permise par les DTD (Document Type Declaration), XML Schema (fichiers XSD), ou encore Relax NG (Regular Language XML Next Generation). Ces langages permettent de vrifier quun document correspond bien un langage donn bas sur le XML. La transformation est rendue possible par XSL (eXtensible Stylesheet Language) ; sur le mme principe de sparation du fond et de la forme que les feuilles de styles CSS, on part alors dun document et dune feuille de styles pour obtenir un autre document XML, ou bien du HTML, du texte, etc. La recherche, de faon similaire linstruction SELECT du SQL, est permise par XPath, langage qui permet de pointer un endroti prcis dun document XML. Les services web sous leurs diffrentes formes (WS-*, XML-RPC...) utilisent, quant eux, abondamment les fichiers XML. Enfin, le W3C publie encore bien dautres normes bases sur le XML.

SAVOIR Magento et les lments


additionnels du XML
Magento utilise pour le moment trs peu les normes complmentaires au XML. Il ne propose malheureusement pas de DTD ou de Schemas, ni ne ralise de transformations XSL, par exemple.

Groupe Eyrolles, 2010


user 177 at Thu Nov 11 07:36:42 +0100 2010

337

D XML

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

user 177 at Thu Nov 11 07:36:42 +0100 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Index

404 (erreur) 108

A
achat 62, 162 processus 162 rglement 97 administrateur compte 103 cration du compte 45 quipe 103 administration 71 comptes 103 configuration 99 design personnalis 246 rle 103 adresse e-mail 75 IP 20 web 20 voir aussi URL affichage, mode liste ou grille 90 AFL (Academic Free License) 52 agencement 110, 216, 234, 268 contenu 238 syntaxe 235 Ajax 8, 325 alerte 91 sur les produits 136 Amazon Checkout 178 Simple Pay 178

Apache 32 API (Application Programming Interface) 99 Google 99 apparence 209 voir aussi design architecture client-serveur 14 archive 296 attribut 122 groupes 127 intitul 126 recherche 197 utilisation 124 valeurs 126 authentification 72 Authorize.net 178 avis 190

B
balise 312 action 240 block 238 mta 110, 212 robots 212 mise en forme 314 reference 239 Title 312 base de donnes 25, 273, 330 avec Zend Framework 330 configuration 44 cration 42 baseline 213 bibliothque 25

Bing 156 bloc 238 ajout 243 classe 267 lien 244 module 267 statique 111 suppression 242 Blog (extension) 308 bon de commande 180 de rduction 152 bordereau dexpdition 184 boutique 118 breadcrumbs 62 voir aussi fil dAriane Business Intelligence 201 business plan 11

C
cache 90, 101 Caisse dpargne 302 calendrier prvisionnel 17 carte bancaire 301 enregistre 179 paiement 177 catalogue plat 90 recherche 92 Catalogue (menu) 118 configuration 89 catgorie 118, 135 arborescence 118

Groupe Eyrolles, 2009

339
user 177 at Thu Nov 11 07:36:42 +0100 2010

Magento

cration 119 hirarchie 121 image 119 catgorie de produit 54 CGU (conditions gnrales dutilisation) 154 CGV (conditions gnrales de vente) 154 paramtrage 97 change (taux) 164 charte graphique 210 chque 180 CIC (banque) 301 classe 328 abstraite 281 de bloc 267 de modle 275 de taxe produit 170 hritage 281, 295 PHP 232 cl dextension 51, 253 de chiffrement 45, 99 dURL 119 client 165 classe de taxe 170 communication 189 compte 66 donnes personnelles 95 en ligne 165 groupe 166 identification 63 invit 98 liste et informations 166 rapports 201 Clients (menu) configuration 95 client-serveur (architecture) 14 CM-CIC p@iement 301 CMS (Content Management System) 7, 108 blog 308 options de paramtrage 87 Cnil (Commission nationale de linformatique et des liberts) 95 commande 62 bon 180 tat 181 flot ou flux 97 indirecte 167 par tlphone 167 paramtrage 97

tableau de bord 187 traitement 180 commentaire 192 autoriser 90 modration 192 paramtrage 90 commerce lectronique 6 voir aussi e-commerce compte administrateur 103 client 66 paramtrage 95 utilisateur 66, 72 conditions gnrales dutilisation 154 de vente 154 configuration avance 99 pour le dveloppeur 101 dune extension 257 de laccs au site 44 de la base de donnes 44 de Magento 85 des notations 190 du design 211 porte des paramtres 85 systme 44 connexion linterface dadministration 72 constructeur 275, 328 Contactez-nous (page) 88 contenu gestion 108 pages 108 contrleur 228, 332 cookie 66 de session 88 copyright 213 courriel 74 voir aussi e-mail Crdit Mutuel 301 cron (tche) 48 configuration 100 service tiers 51 crontab 49 CSS (Cascading Style Sheet) 25, 240, 317 modification des styles 222 thme 222 CSV (Comma Separated Values) 29

D
dploiement 48 description 110 design 209 extensions 304 personnalis 110 personnalis (onglet) 246 thme graphique 215 dveloppement 14 paramtrage 101 devise 162 configuration 100 paramtrage 163 taux de change 164 distribution 8 DML (Data Manipulation Language) 331 DNS (Domain Name System) 16 document commandes 180 remboursement 186 droit daccs 39 rles 103 DTD (Document Type Declaration) 337 dynamique 216

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

E
e-commerce 6, 11 associations professionnelles 11 cadre juridique 11 diteur Wysiwyg 109, 111, 119 e-mail adresses 75 du magasin 88 configuration denvoi 100 dalerte 91 gabarits 75 gnration automatique 74 inscription la lettre dinformation 198 encodage des caractres 316, 336 en-tte HTML 211 visible 213 envoi un ami 89 ergonomie 13 erreur 404 108 tat 201 voir aussi rapport tude de march 11 exception 220, 263 expdition 184
Groupe Eyrolles, 2009

340
user 177 at Thu Nov 11 07:36:42 +0100 2010

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

ext.js 25 extension 9, 249, 301 catalogue 250 cl dinstallation 253 configurable 286 configuration 257, 284 cration 259 de PHP 32, 38 dclaration 265 dsinstallation 255 tat 251 fichier de configuration 284 fichier de dpart 285 installation 53, 250 langues 306 licence 253 livraison 251, 280 paquet 296 publication 296 rpertoires 266 stabilit 251 tlchargement 254 traduction 271 version 297

configuration 69, 87 gestion des stocks 134 glisser-dposer 55 GNU GPL (GNU General Public License) 6 Google 156 Analytics 99 Base (Merchant Center) 99 Checkout 99 plan de site ou sitemap 93 services (API) 98 Website Optimizer 99 grille, mode daffichage 90 groupe dattributs 127 de clients 166

J
J2T TNT Module 303 JavaScript 25, 222, 321 bibliothque 25 journal, configuration 100

L
LAMP (Linux, Apache, MySQL, PHP) 7 langue 306 installation 51 layout 216, 234 lgislation 155 lettre dinformation 197 voir aussi newsletter licence 6 AFL (Academic Free License) 52 des extensions 253 double 10 OSL (Open Software License) 9 PHP 28 lien 110, 315 ajout 244 liste denvies 67 activation 96 configuration 96 dans linterface dadministration 78 mode daffichage 90 livraison 175, 184, 303 choix du transporteur 12 extension 280 extension Owebia 251 gratuite 177 modes 175 tarif unique 176 tarification 176 paramtrage 98 locale 43 localhost 36 log 100 voir aussi journal logiciel libre 6 logo 77, 213

H
hbergement 15, 33 HTML 24, 311 en-tte 211 gabarits 231 mtadonnes 110 pages de contenu 109 HTTP (HyperText Transfer Protocol) 21 HTTPS 21

F
facture 182 FEVAD (Fdration du e-commerce et de la vente distance) 1 fiche 129 fichier INI 36 fil dAriane 62, 88 filigrane 214 formulaire 28 dans linterface dadministration 79 de contact 89 Fragento 10 frais de port 175, 259 framework 25, 29 French (Canada) Language Pack 307 French (France) Language Pack 306 FTP (File Transfer Protocol) 39 client 41

I
image des catgories 119 des produits 92, 134 filigrane 214 modification 222 thme 222 impression de documents PDF 97 INI (fichier) 36 installation 31, 32, 40, 42 copie 48 dun serveur domicile 34 dune extension 250 dune table MySQL 274 dploiement 48 langue 51 rpertoire 38, 41 test 46 interface 216, 218 dadministration 77 internationalisation 43, 51, 101, 223, 271, 306, 316, 336 Internet 20 inventaire 134 iPhone 10, 217

G
gabarit 216, 228 des e-mails 75 modification 229 newsletter 199 spcial 231 syntaxe 231 Gnral (menu)
Groupe Eyrolles, 2009

M
magasin 80 multilingue 81 vue 81, 82 Magentix 10 Magento communaut 10

341
user 177 at Thu Nov 11 07:36:42 +0100 2010

Index

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

Community Edition 8, 40 en franais 51 Entreprise Edition 8 rpertoires 260 tlchargement 40 Magento Connect 10, 51, 250, 254 mandat 180 message 74 cadeau 97 mtadonnes 110, 133 migration depuis osCommerce 307 mode de livraison 175 de paiement 177 modle 228 construction 275 dclaration 277 modration des commentaires 192 module 9 French Language Pack 51 installation 51 supplmentaire 250 Voir aussi extension 261 mot-cl 67, 110, 193 moteur de recherche 195 robots 212 MVC (Modle-Vue-Contrleur) 228, 330 MySQL 25, 33, 273, 330 cration de la base 42

P
page 108, 216 daccueil 60 de contact 89 HTML 311 pied de page 213 statique 108 titre 211 paiement 177 chec 98 en ligne 301 choix de la solution 12 scurit 1 modes 177 par bon 180 par carte bancaire 177 par carte enregistre 179 par chque 180 par mandat 180 par virement 180 panier 62 paramtrage 98 promotions 152 paquet 216, 218 cration 296 PayPal 12, 98, 178 PDF 97 bordereau dexpdition 184 facture 182 remboursement 186 Pear (PHP Extension and Application Repository) 260 PHP (PHP: Hypertext Preprocessor) 7, 28, 327 classes 232 configuration 32, 36 conventions 262 extensions activer pour linstallation 32 gabarits 231 PhpMyAdmin 26, 42, 273 pied de page 213 changement de couleur 240 plan de site 90 Google 93 planning 14 plug-in 9 Postfix 100 PrestaShop 8 prix 132 de base 132

N
navigateur 311 navigation 62 paramtrage 95 newsletter 197 dsinscription 199 envoi 200 gabarit 199 inscriptions 198 nom de domaine 15, 22 notation 190 nuage 194 de tags 67

de revient 133 par palier 133 spcial 132 production 14 produit 129 ajout 54 apparent 136 attributs 122 avis 190 catgories 54, 118 classe de taxe 170 comparaison 68 configurable 139 duplication 139 fiche 129 group 142 image 92, 134 inventaire 134 options personnalisables 137 packag 144 prix 132 promotion 149 recherche 60 taxe 170 tlchargeable 146 type 124, 129, 138 virtuel 149 projet 10 cots 17 quipe 12 planification 16 planning prvisionnel 14 promotion 12, 149 catalogue 149 du site 189 panier 152 protection des donnes personnelles 95 Prototype 25

R
rapport 201 recherche analyse 195 attributs 124, 197 dans linterface dadministration 77 dans le catalogue 92 de produits 60 dition 196 interne 195 moteur 195 suggestion de termes 195

O
OBC (banque) 301 open source 6 osCommerce 7 fixed migration tool 307 OSL (Open Software License) 6, 9, 253 Owebia Shipping 2 252, 304

342
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

redirection 16 rduction, bons 152 rcriture dURL 87 rfrencement 12, 15 balise mta robots 212 balises mta 110 fil dAriane 62 Google Website Optimizer 99 paramtrage optimis 92 rcriture dURL 156 techniques 157 registrar 15 rgle de promotion 149, 152 de taxes 172 Relax NG 337 remboursement 186 rpertoire 39 dinstallation 38, 41 de Magento 260 de traduction 223 des thmes 215 extensions 266 requte, schma 28 RFC (Request For Comment) 39 rle 103 paquet 298 RSS (flux) 94 activation 94

voir aussi thme SKU (Stock-Keeping Unit) 131 slogan 213 SMTP (Simple Mail Transfer Protocol) 100 snippet 110 Soap 24 sondage 88, 113 SPPLUS Extension 302 SQL (Structured Query Language) 26, 331 SSL (Secure Socket Layer) 21 statique 216 bloc 111 page 108 stock 135 surcharge 217, 235 systme configuration 100 de gestion de contenu 7 voir aussi CMS

textes 224 title 211 titre de la page 211 TLS (Transport Layer Security) 21 traduction 51, 224, 284 en ligne 101 extensions 271 fichiers 225 rpertoires 223 tunnel 97 TVA (taxe sur la valeur ajoute) 169 taux et zones 171

U
UGS (unit de gestion des stocks) 131 unit de gestion des stocks 131 URL (Uniform Resource Locator) 20, 315 cl 119 dadministration cls de chiffrement 99 personnalise 99 optimisation pour le rfrencement 156 paramtrage 87 rcriture/rewriting 87, 158 User-Agent 220 utilisabilit 13 utilisateur compte 66, 72, 103 gestion 105

T
table (MySQL) cration 273 installation 274 tableau de bord administrateur 73 client 95 des commandes 187 tche cron 48, 49 planifie 48, 49 tag 67, 193 nuage 194 taux de change 164 taxe 133, 169 affichage 174 client 170 produit 170 rgles 172 zones 171 tlchargement dune extension 254 template 216, 228 voir aussi gabarit thme 216 application 217, 218 cration 215 extensions 304 rpertoires 215 tlchargement 221

S
Script.aculo.us 25, 55, 323 scurit HTTPS 21, 87 services web 206 Sendmail 100 serveur 14, 22, 32 domicile 34 installer et tester 35, 36 hbergement 33 localhost 36 matriel 34 service web 23, 203 scurit 206 WS-* 205 XML-RPC 204 session 45 cookie 88 SGDBR (systme de gestion de base de donnes relationnelle) 25 skin 216

V
Varien 9 vente 161 croise 136 droulement, paramtrage 96 incitative 136 intermdiaires 178 tunnel 97 Ventes (menu) configuration 96 version 41 dune extension 297 virement 180 VirtueMart 7 vue magasin 81, 82 MVC 228

W
W3C (World Wide Web Consortium) 24 Web 20

Groupe Eyrolles, 2009

343
user 177 at Thu Nov 11 07:36:42 +0100 2010

Index

Magento

Ce document est la proprit exclusive de Algeria Educ (educalgeria@gmail.com) - 29 Novembre 2010 16:10

adresse 20 options de configuration 87 services 23 standardisation 24 Webservicex 164 widget 225 wishlist 67 WS-* (Web Services) 23, 205 WSDL (Web Services Description Language) 205

Wysiwyg (diteur) 109

X
XHTML (eXtensible Hypertext Markup Language) 311 Voir aussi HTML 24 XML (eXtensible Markup Language) 30, 335 XML Schema 337 XML-RPC 23, 204

XPath 337 XSL (eXtensible Stylesheet Language) 337

Y
YAML (YAML Aint Markup Language) 335

Z
Zend Framework 29, 329

344
user 177 at Thu Nov 11 07:36:42 +0100 2010

Groupe Eyrolles, 2009