Tagcertification

[Magento] Concepts de base et terminologie

Websites and stores

Un website est une collection de stores qui elles-mêmes sont des collections de store views. L’articulation entre ces différentes entités se fait du général au particulier dans l’ordre suivant :

  1. Website
  2. Store
  3. Store view

Website

Un website est fait d’un ou plusieurs stores qui partagent les mêmes informations sur les clients, les commandes et le panier.

Stores

Le store est une collection de store views. Leur fonction principale est de fournir un container logique qui permet de regrouper les stores views correllées au sein d’un website.

Store views

Les instances de store (boutiques) dans Magento. La plupart des stores n’auront qu’une seule store view, mais la possibilité est laissée d’en affecter plusieurs (typiquement pour des projets multilingues).
Dans ce cas, vous pourriez créer un store unique et autant de store views que de langues voulues pour ce store.

Design packages and themes

  • Design packages
  • Themes

Design package

Une collection de thèmes en corrélation. Une instance de Magento peut en accueillir une multitude, mais un au moins doit être installé.
A l’installation, Magento est accompagné d’un package spécial nommé base. Un autre package sera également présent en fonction de l’édition de Magento que vous avez déployé :

  • Un package default dans l’édition CE
  • Un package pro dans l’édition PE
  • Un package enterprise dans l’édition EE

A ces packages de base peuvent s’ajouter vos propres packages (custom design packages).

Theme

Au sein d’un design package se trouvent les fichiers qui déterminent l’aspect graphique et les fonctionnalités front-end d’une boutique. Un thème Magento contient les éléments suivants :

  • Templating information : fichiers CSS, images, et fichiers JavaScript spécifiques au thème,
  • Skinning information : fichiers layout, fichiers template et locales spécifiques au thème.

Un thème donné ne peut appartenir qu’à un seul design package. Pas convention, chaque design package doit contenir un thème default. En plus de ça, un design package peut contenir une multitude de variations de ce thème default appellées non-default themes ou theme variant.

Structure d’un thème :

Fichiers de templating

Les fichiers de templating, qui définissent les contenus affichés dans les templates des différentes pages, se trouvent dans le répertoire app/design/frontend/<designPackageName>/<themeName>/ et sont organisés en sous-répertoires comme suit :

  • Layout

    Contient les fichiers XML qui définissent la structure des blocs dans les différentes pages, ainsi que les informations renseignées dans les balises meta et l’encodage de la page.

  • Template

    Contient les fichiers PTHML qui embarquent le markup HTML et le code PHP nécessaires à l’affichage de contenus bruts dans les pages.
    Il y a 2 types de templates : les templates de page et les templates de bloc.

  • Locale

    Contient des fichiers CSV, organisés par langue, qui embarquent des chaînes de translation pour l’ensemble des textes produits par Magento (éléments d’interface et messages, mais pas produits et catégories).

Fichiers d’habillage

Les fichiers d’habillage (skin), qui définissent l’habillage visuel des contenus, se trouvent dans le répertoire skin/frontend/<designPackageName>/<themeName>/ et sont organisés en sous-répertoires comme suit :

  • CSS

    Contient les feuilles de style.

  • Images

    Contient l’ensemble de simages utilisées par le thème.

  • JS

    Contient le code javaScript spécifique au thème. La plupart des librairies JavaScript embarquées nativement se trouvent dans un répertoire js à la racine du projet Magento.

Fallback hierarchy

Du particulier au général :

  1. Pour exécuter le rendu front, Magento cherche en premier lieu les fichiers dans package_name/theme_name/ (au plus profond de la hiérarchie des thèmes)
  2. Si il n’a rien trouvé, il remonte d’un cran dans la hiérarchie des thèmes (dans l’arborescence) et cherche les fichiers dans package_name/default/
  3. Si il n’a toujours rien trouvé, il remonte encore d’un cran dans la hiérarchie des thèmes et cherche les fichiers dans base/default/

[Magento] Préparation Front-End Developer Certification

  1. Use the Magento Design Fallback System (7%)
  2. Use Layout XML to Customize a Theme (19%)
  3. Create and Customize Template Files (16%)
  4. Effectively use the Magento Block-Template Design System (11%)
  5. Identify Where to locate Files and Create New Files in the Theming-related Directory Structure (7%)
  6. Customize and Create JavaScript Within the Magento Framework (8%)
  7. Use CSS Effectively to Customize Magento Look and Feel (9%)
  8. Customize the Look and Feel of Specific Magento Pages (12%)
  9. Correctly Use the Admin Configuration Scopes (Default / Website / Store View Fallback) (6%)
  10. Implement Internationalization of Frontend Pages (4%)
  11. Transactional email templates ?

Design fallback – 7%

Key Areas of Study

  • Understand the priority order of fallbacks (all the way from custom themes to the default) as well as what the fallback means for files and folders of the same name in each fallback.
  • Understand how the admin configuration can be used to change the fallback process and the difference between System > Design and System > Config > Design.

Ressources :

XML Layout – 19%

Key Areas of Study

  • Ensure you are 100% confident on all the possible ways to add Scripts / CSS through layout XML for different scenarios.
  • Understand <action> tags and how they affect blocks.

Ressources :

Customization of template files – 16%

Key Areas of Study

  • Understand how to set your own custom template using Layout XML in any given scenario
  • Understand how Magento uses PHP within template.phtml files

Block template system – 11%

Key Areas of Study

  • Understand how Layout XML, .phtml template files and .php Block files relate to each other
  • Know your block types (structural, content – and specific types)

Key Areas of Study

  • Understand the ‘names’ of the specific folders in the fallback path (e.g. area/package/theme) so if referenced in a question you know where they should sit in relation to each other.
  • Understand the use of Skin and all the subfolders within

Javascript creation & Customization – 8%

Key Areas of Study

  • Know how to perform standard Javascript/Prototype functions – not just those uses within the frontend of Magento
  • Understand how to use prototype to extend core JS classes within Magento (in an upgrade safe manner)

CSS principles – 9%

Key Areas of Study

  • Understand as much CSS2 as you can.
  • 1.9 comes with a responsive theme – know your media queries.

Customizing look and feel – 12%

Key Areas of Study

  • Understand the main Magento template files and what PHP calls and blocks are available.

Admin Configuration scope – 6%

Key Areas of Study

  • Understand the admin configuration area – what’s available in each area and what it does.
  • Understand the hierarchy of Magento Global / Website / Store and Store View settings.

Internationalization – 4%

Key Areas of Study

  • Understand the priority order of the different methods of translation

Retours d’expérience :

Ressources en ligne :

Documentation officielle :

Documentation et questionnaires d’entrainement propres à la certification :

Cheat Sheets, Checklistes, …

  • Magento: The Right Way – A (debatable) list of things I think you should be doing as a Magento Developers.

Tutoriels généraux :

© 2020 devfrontend.info

Theme by Anders NorénUp ↑