design magento

Comprendre les Templates standard de Magento

Le système de templates Magento vous permet de créer facilement des éléments HTML/CSS personnalisés tout en respectant l'architecture et le design Magento.
Cependant, dans certains cas, il peut être judicieux d'utiliser les Templates standard (Default Template). Cela vous permettra de gagner du temps à l'intégration de nouveaux élements HTML au sein des fonctionnalités de Magento.

Par exemple, regardons le contenu de ce répertoire dans l'installation standard de Magento : app\design\frontend\default\default\template\page.
Nous trouvons ici les gabarits (templates) d'une page classique : 1column.phtml, 2colums-left.phtml, 2colums-right.phtml ou 3colums.phtml. Tous contiennent la même structure page (concentrons-nous sur la section 'body') :

<div class="wrapper">

<!-- start header -->
        <div class="header">
            ...
        </div>
<!-- end header -->

<!-- start middle -->
        <div class="middle-container">
            ...
        </div>
<!-- end middle -->

<!-- start footer -->
        <div class="footer-container">
                <div class="footer">
                    ...
                </div>
        </div>
<!-- end footer -->

</div>

Ils diffèrent uniquement dans la partie <div class=”middle-container”>, où le code HTML de mise en page est défini.
Comme vous pouvez le voir, il s'agit là d'une manière tout à fait classique de contruire des page – en-tête, corps, pied de page.
Ainsi, dans la majortité des cas, vous pouvez utiliser ces gabarits sans changer de code HTML et vous borner à créer votre habillage CSS (skin) qui adaptera le rendu de votre page à vos besoins.
Bien sûr, plus un gabarit est complexe, plus il sera difficle de l'adapter, mais vous pouvez commencer par travailler sur un gabarit standard (default magento template) et ne modifier que ce dont vous avez besoin.

Traduction par Benjamin Bellamy

Partager des données entre les controllers et les blocks dans Magento

Comme vous le savez peut-être, la solution e-commerce Magento a un système de template très puissant. Nous pouvons dire la même chose concernant la partie logique du sytème. Grosso modo Magento est composé d'environ 50 modules. Il y un module pour l'enregistrement d'une commande, un pour les clients, un pour les pages CMS etc. Un module est composé de plusieurs parties. La partie design, la partie controllers, blocks, models et helpers. Les controllers contiennent toutes les actions déclenchées lors de l'utilisation d'un module d'un site Magento. Quand nous avons l'url http://www.my-eshop.tld/index.php/a/b/c

cela signifie que le module a doit lancer l'action c contenue dans le controller b.

Les blocks servent à préparer les données pour les templates. Chaque template utilisée doit avoir un block. Les blocs peuvent être simples mais ils peuvent être également plus complexes. Dans certains cas, il peut être utile de déplacer des données du controller vers le block afin de ne pas devoir recalculer ces données.

Pour cela, nous pouvons utiliser une des fonctionnalités de Magento : les registres.

Dans le controller on enregistre notre données dans la variable nommée $data. Nous pouvons utiliser un registre comme cela :

Mage::register('MyData',$dat);

Dans le fichier du block, nous pouvons accéder aux données de cette variable en utilisant :

$data = Mage::registry('MyData');

C'est une petite astuce qui peut s'avérer être très utile.

Traduction par Laurent Clouet

Utiliser le CMS natif pour créer des contenus multilingues dans Magento

La solution e-Commerce Magento intègre nativement des fonctionnalités de CMS.

Deux types d'objet sont ainsi mis à votre disposition afin de créer les contenus de votre site Magento :

  • Les pages, qui vous permettent d'afficher des informations générales telles que vos conditions générales de vente, informations de contact, implantations de magasin, et caetera.
  • Les blocks statiques ("statiques" n'étant pas tout à fait le terme approprié comme nous le verrons plus bas, comprenez qu'il s'agit tout simplement de blocks dont le contenu est modifiable directement depuis le back-office, sans modification de code source php), qui vous permettent de saisir des informations devant être généralement affichées sur plusieurs pages, telles que pieds de pages, en-têtes, mais aussi des informations ponctuelles (fermeture prévisionnelle du site, promotions...).

Notez que ces objets, pages ou blocks statiques, peuvent contenir des éléments dynamiquement calculés et qu'il est même relativement aisé de mettre à disposition du webmaster en charge du contenu un panoplie de fonctions développées sur mesure (date et heure du jour, nombre d'internautes connectés, dernier article vendu...).

De surcroît, ces pages et blocks peuvent également contenir d'autres blocks, statiques (donc dont le contenu est modifiable ici) ou non (blocs d'articles, blocs de meilleures ventes Magento...).

Enfin, ces pages et blocs s'insèrent parfaitement dans la logique du design Magento et, à ce titre, pour un même identifiant (identifier) de page ou de bloc statique, vous pourrez (sans y être obligé) en créer une version par vue de magasin (Store View Name). Il devient alors très simple de créer un contenu spécifique pour chacune des langues de votre site internet Magento et le système affichera la version correspondant à la langue de l'internaute sans que vous n'ayiez eu à programmer la moindre ligne de code.

Bien entendu le système n'est pas exempt de défaut et on regrettera en particulier :

  • l'absence d'outil d'édition en texte riche,
  • l'impossibilité de gérer du contenu de manière hiérarchique,
  • le manque de gestion de formulaire en ligne.

Nous verrons donc très prochainement comment palier ces manques.

Installer Magento en 5 minutes

Si la mise en place d'une e-boutique qui vous ressemble et qui s'intègre dans votre système d'information ne doit pas être prise à la légère (compter 4 mois minimum, en fonction de vos spécificités), l'installation d'un site Magento de démonstration et de test ne vous prendra que 5 minutes.

Cela vous permettra d'avoir un aperçu des fonctionnalités standard de cette solution e-commerce, de vous faire votre propre idée et de réflechir à la manière dont vos besoins vont pouvoir s'insérer naturellement dans le système, ou au contraire demander des aménagements spécifiques.

Bien entendu, un minimum d'expérience technique est préférable, mais pas strictement indispensable.

  1. Procurez-vous un serveur web

    Magento est écrit en PHP et nécessite une base de données MySql

    NB : L'utilisation de PHP 5.3 n'est pas compatible avec Magento.

    Pour notre démonstration, nous recommandons d'utiliser le serveur Apache, même si ce n'est pas une obligation.

    NB : L'utilisation de Zend Server permet d'btenir des performances accrues, ce qui n'est pas l'objet de ce billet.

    À ce stade, l'utilisation d'un package intégré vous permettra de vous affranchir de l'installation de trois logiciels séparés :

    • LAMP si votre plateforme de démo est sous Linux,
    • WAMP si elle est sous Windows,
    • MAMP si elle est sous Mac OS.

     

  2. Assurez-vous d'avoir toutes les extensions PHP requises installées

    Pour fonctionner correctement, Magento a besoin des extensions PHP suivantes :

    • PDO/MySQL
    • MySQLi
    • mcrypt
    • mhash
    • simplexml
    • DOM

     

    Le cas échéant, rendez-vous dans votre fichier php.ini.

  3. Téléchargez Magento

    Rendez-vous sur le site de Magento et téléchargez la dernière version stable :

     

    NB : Notez que nous n'avez pas à vous soucier de télécharger le framework Zend, celui-ci est intégré dans votre distribution Magento.

  4. Décompactez l'archive Magento

    Décompactez l'archive précédemment téléchargée dans un répertoire accessible de votre serveur web.

  5. Paramétrer votre serveur

    Accéder à votre serveur, muni des informations suivantes :

    • l'adresse IP de votre serveur de base de données (localhost dans le cas d'un LAMP),
    • le nom de la base de données,
    • l'identifiant et le mot de passe d'un utilisateur mySql ayant accès à la base de données, avec le droits pour créer des éléments (tables...).

    Suivez les instructions, votre boutique est (presque) prête !

     

  6. Paramétrez votre boutique

    Accédez au back-office de votre e-boutique pour modifier la configuration Magento et personnalisez le catalogue, les informations, le design Magento, et caetera.

  7. Si vous êtes perdu

    Reportez-vous au guide d'installation Magento ou au forum relatif au problèmes d'installation Magento.

Magento en 10 points

Magento en 10 points : la solution Magento a bénéficié d'un buzz impressionnant depuis la sortie sa version 1 en 2008 et a révolutionné le monde des solutions e-commerce. Les raisons de cet engouement pour les sites Magento sont multiples, en voici 10, la liste est bien entendu non exhaustive.

  1. Une solution opensource, un éditeur solide

    Écrite en PHP, basée sur le framework Zend, Magento est une solution du monde du logiciel libre.
    Cela signifie que le code source est public : tout le monde y a accès, et ce gratuitement. Les contributions venant de toutes parts sont donc les bienvenues et la vitesse d'intégration de spécificités est accrue, comme ce fut par exemple le cas pour la gestion de la TVA : la version initiale n'était pas adaptée au marché européen mais l'ouverture du code a permis de régler ce problème en quelques semaines.
    Pour autant, Magento est développé par une société à but lucratif, Varien, ce qui garantit une uniformité et une cohérence dans les fonctionnalités et une continuité dans les développements, avec plus de soixante personnes à plein temps travaillant sur la solution.

  2. Une solution clef en main

    Téléchargez Magento, décompressez l'archive sur votre serveur Apache/PHP/MySql, lancez la procédure automatique d'installation, accédez à l'inteface d'administration pour effectuer la configuration Magento : vous êtes prêt !
    Par la suite, accédez à l'interface d'administration pour effectuer les mises à jour de version, et ce en deux clics et pas un de plus.
    Reste bien sûr à personnaliser votre boutique et à y intégrer votre catalogue.

  3. Un modèle de données excessivement maléable, une grande richesse fonctionnelle

    Que vous vendiez des chaussures, des chaussettes, des vêtements, des rideaux, du vin, des chambres d'hôtel ou des produits virtuels téléchargeables, le modèle de données de Magento est conçu et pensé pour s'adapter à vos besoins, tout en proposant les fonctionnalités standard que l'on est en droit d'attendre d'un site e-Commerce : produits personnalisables, attributs (tailles, couleurs...) paramétrables, Cross-Sell, Up-Sell, et caetera.
    En outre, la version 1.3 a introduit la notion de flat catalog qui donne un excellent compromis entre paramétrabilité et performances.
    Parmi les nombreuses fonctionnalités disponibles en standard, on peut également citer les outils de gestion des prix et des promotions, accessibles via un module de règles à la fois fonctionnellement évolué et facilement utilisable, par simples clics dans l'interface graphique du back-office

  4. Une gestion avancée de votre charte graphique

    La gestion du design Magento permet de gérer de manière extrèmement poussée l'ergonomie et le template de votre site Magento.
    Fourni avec un modèle graphique de base, Magento vous permet de mettre en page votre boutique comme bon semble, tout en conservant une parfaite compatibilité avec les versions à venir.
    (Voir le billet Créer un template pour son site Magento à ce sujet.)

  5. Une solution pensée pour le référencement naturel

    Réécriture d'URL, saisie des champs meta, gestion du Google Site Map, et caetera, Magento mets à votre disposition tous les outils qui seront nécessaires au bon référencement naturel de votre site Magento.
    (Voir le billet Magento et le référencement naturel pour plus d'informations à ce sujet.)

  6. Un solution ouverte à l'international

    Avec Magento votre boutique est prête pour l'international, avec la possibilité (mais pas l'obligation) d'avoir pour chaque zone ou pays :

    • sa propre devise,
    • sa propre langue (de nombreuses langues - dont le Français - sont disponibles en standard),
    • sa propre charte graphique,
    • son propre sous-catalogue,
    • ses propres règles de port,
    • et caetera.

  7. De nombreux modules de paiement déjà intégrés

    Magento gère aujourd'hui plus de 200 systèmes de paiement, parmis lesquels :

    • ATOS / Sips,
    • CyberMUT Paiement / Paiement CIC,
    • CyberP@iement,
    • FIAT-NET ReceiveAndpay,
    • Google Checkout,
    • Ogone,
    • Paiement par chèque,
    • Paybox,
    • PayPal,
    • SPPLUS,
    • et caetera.

    Il est en outre aisé d'en ajouter de nouveaux.

  8. De nombreux modules de port déjà intégrés

    Magento gère aujourd'hui plus de 50 systèmes de port, parmis lesquels :

    • Gestion du port gratuit, selon critères,
    • Chronospot,
    • Colissimo,
    • DHL,
    • FedEx,
    • TNT, relais colis,
    • UPS,
    • et caetera.

    Il est en outre aisé de personnaliser un module afin de l'adapter à vos contraintes logistiques et à votre politique tarifaire, voire d'en créer de nouveaux.

  9. Une ouverture native vers vos systèmes d'informations

    Magento fournit en standards des modules d'import/export qui permettent l'import de fichier Magento.
    Ces modules peuvent être aisément personnalisés et automatisés pour correspondre au mieux aux pré-requis de votre système existant.
    (Voir le billet Importer des fichiers dans Magento pour plus d'informations à ce sujet.)

  10. Une solution robuste et éprouvée

    Avec aujourd'hui plusieurs centaintes de sites référencés sur Magento, dont certains ne contiennent pas moins de 300000 références (trois cent mille), Magento est aujourd'hui reconnu comme une solution fiable et digne de confiance, quels que soient vos besoins.

Créer un template pour son site Magento

Créer un template pour son site Magento est une étape incontournable dans la mise en place en place de sa boutique en ligne. En effet, la charte graphique d'une e-Boutique est aussi importante que la vitrine d'un magasin : il s'agit de la première chose que verra le chalant qui passe devant par hasard.
C'est votre vitrine qui retiendra un client potentiel ou qui, au contraire, l'incitera à partir.

(Il existe bien entendu d'autre moyens de faire venir des prospects directement au coeur de votre boutique, via les moteurs de recherche notamment, mais ceci fera l'objet d'autres billets.)

Fort de ce constat, tout le système de gestion du design Magento a été conçu et pensé afin de vous permettre d'achalander au mieux les pages de votre site Magento, de les organiser et de les décorer comme bon vous semble. (Et bien entendu sans faire de développements spécifiques qui interdiraient par la suite de bénéficier des mises à jour de Magento.)

Afin de personnaliser la présentation d'un site Magento, trois types d'objets sont mis en oeuvre, abondamment cités dans les documentations, forums de discussions et autres wiki :

  1. les templates (gabarits ou modèles)
  2. les skins (revêtements)
  3. les layouts (agencements, dispositions)

La compréhension de ces trois types d'objets est primordiale afin de comprendre comment penser votre boutique en ligne.

Les Templates

Les templates (gabarits ou modèles) ne sont ni plus ni moins qu'un ensemble des blocks qui composent votre boutique.

Ce sont ces blocks qui vont par exemple :

  • afficher le détail d'un article,
  • afficher le contenu du panier client,
  • afficher le promo du mois,
  • afficher les menus de navigation,
  • afficher du contenu telles que les conditions générales de vente,
  • et caetera.

Magento fournit un template par défaut qui contient toute une série de blocks standard. Il est possible, par un système d'héritage, de compléter, surcharger, modifier des blocks, d'en créer de nouveaux, et caetera.
En outre, Magento étant basé sur la framework Zend, lui même MVC, les règles métier relatives à l'affichage de ces blocks sont définies ailleurs, permettant ainsi une parfaite indépendance de votre charte graphique vis à vis du coeur du système.

Les Skins

Les skins (revêtements) renferment l'ensemble des feuilles de style CSS de votre site et décrivent avec quelle mise en forme (couleurs, images, polices de caractères...) les blocks de templates vont être affichés. Séparées des templates, il devient ainsi excessivement aisé de modifier un style graphique d'affichage sans devoir modifier les blocks.

Changer tout ou partie de la charte graphique peut ainsi être facilement réalisé, par exemple :

  • pour une partie du site (catégorie spécifique, déstockage...)
  • pour une période donnée (Noël, soldes...),
  • pour une catégorie particulière d'internaute (comités d'entreprises, VIP...),
  • et caetera.

Les Layouts

Les layouts (agencements, dispositions) quant à eux vont définir quels blocks va s'afficher sur quelle page (page catalogue, page produit, page de paiement, page de compte client...) et en définir les attributs. Il ne s'agit donc ni plus ni moins que de la définition de la structure générale de votre site. Là encore, un layout standard est proposé, celui-ci étant très facilement personnalisable.