Magento 2, personnaliser le design de vos sites de e-commerce


Magento 2, personnaliser le design de vos sites de e-commerce

Catalogue : Business Intelligence



Généralités et thèmes

  • Objectif d'un site e-commerce. Fonctionnalités principales de Magento.
  • Les différents modes de gestion.
  • Vue d'ensemble des thèmes.
  • Création d'un thème front-office.
  • Déclarer un logo dans votre gabarit.
  • Configurer les tailles d'images du thème.
  • Création d'un thème back office.

Travaux pratiques

Créer un thème avec l'affectation d'un logo pour le décliner sur le site.

Les layouts

  • Vue d'ensemble des layouts.
  • Les types de layout.
  • Structurer une page layout.
  • Comment déclarer une page layout ?
  • Structurer un thème layout.
  • Les différents blocks et containers.
  • Étendre un layout.
  • Surcharger un layout.

Travaux pratiques

Modifier l'apparence graphique du site en manipulant les layouts.

Templates pour boutique e-commerce

  • Les concepts de base.
  • Vue d'ensemble des templates disponibles.
  • Initialiser un template.
  • Surcharger un template.

Travaux pratiques

Surcharger un template dans notre nouveau thème.

Cascading style sheets (CSS)

  • Less et Grunt
  • Déclarer son thème dans la configuration Grunt.
  • Grunt et LiveReload.
  • Inclure des fichiers CSS.
  • Surcharger et étendre le CSS.
  • Les fonts custom et les variables.
  • Les mixins et Les UI components.

Les widgets, les blocs CMS et le Javascript

  • Comprendre et utiliser RequireJS.
  • Les widgetsjQuery.
  • Comprendre et utiliser KnockoutJS.
  • Création d'un widget et d'un bloc CMS en back office.
  • Création d'un widget dans le thème.
  • Déclaration dans un contenu CMS.
  • Déclaration dans un template.
  • Déclaration en layout.

Travaux pratiques

Créer un custom component et un widget personnalisé.

Le responsive design et Magento 2

  • Les solutions responsive design dans Magento.
  • Approche mobile first.
  • Présentation et utilisation des outils responsive design.
  • Impact sur les performances front-end.
  • JavaScript responsive web design.

Travauxpratiques

Créer un thème responsive design.

Les tests front-end

  • Panorama des solutions de test.
  • JsTestDriver et PhpStorm.

Internationalisation et gestion des e-mails

  • Dictionnaires de traductions.
  • Packages de traductions.
  • Ordre de lecture par Magento.
  • Les clés de traduction selon le contexte.
  • Concepts de base des e-mails.
  • Surcharge en back office.
  • Surcharge dans le thème.

Fiche de la formation



 Cible :

Intégrateurs CSS, développeurs front, développeurs full stack souhaitant maîtriser les aspects techniques du design et du rendu d'un site en Magento 2.


 Prérequis :

Expérience en JavaScript/intégration CSS. La connaissance de Magento 1 est un plus.


 Durée : 2 jours

 Type : Stage pratique


 Contactez-nous