Nos domaines de formation :

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

Stage pratique
Durée : 2 jours
Réf : MFE
Prix  2018 : 1630 € H.T.
Pauses et déjeuners offerts
  • Programme
  • Participants / Prérequis
  • Intra / sur-mesure
Programme

Ce stage vous présentera les différentes techniques permettant de concevoir et mettre en œuvre un CMS d'e-commerce Open Source Magento 2. Vous verrez les aspects d'installation, de customisation du theming Magento, du Responsive Design, des widgets ainsi que les tests Front-End.

Objectifs pédagogiques

  • Comprendre l'architecture technique d'un thème Magento 2
  • Connaître les paramètres Magento 2 qui ont une influence sur le rendu
  • Personnaliser de nouveaux thèmes et créer des composants Front
  • Mettre en œuvre les bonnes pratiques de développement Front

Travaux pratiques

Création d'une plateforme e-commerce côté client.

Méthodes pédagogiques

Alternance entre présentation magistrale, illustrations de cas concrets et travaux pratiques.
PROGRAMME DE FORMATION

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éer et modifier un thème Magento.
  • Déclarer un logo dans votre gabarit.
  • Configurer les tailles d'images du thème.
  • Faire de son thème un package Composer.

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 différents blocks et Containers.
  • Les types de layout.
  • Structurer une page layout.
  • Comment déclarer une page layout ?.
  • Page configuration.

Travaux pratiques
Mettre en œuvre le layout.

Templates pour boutique e-commerce

  • Concept de boutique e-commerce.
  • Vue d'ensemble des templates disponibles.
  • Template Root.
  • XSS et les templates.
  • Templates : $this, $block, qui suis-je ?

Travaux pratiques
Surcharger un template dans notre nouveau thème.

Cascading Style Sheets (CSS)

  • Inclure des fichiers CSS.
  • LESS (préprocesseur CSS).
  • Grunt JavaScript task runner.
  • Déclarer son thème dans la configuration Grunt.
  • Grunt et LiveReload.

Les widgets

  • Où se trouvent les mixins ?
  • Les variables prédéfinies.
  • Utiliser des mixins.
  • Comprendre et utiliser les fonts custom.
  • Présentation des solutions widgets.

Travaux pratiques
Créer votre 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.

Travaux pratiques
Créer un thème Responsive Design.

Les tests Front-End

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

Internationalisation et gestion des emails

  • Dictionnaires de traductions.
  • Packages de traductions.
  • Emails transactionnels.
  • Customisation d'email via le thème.
Participants / Prérequis

» Participants

Intégrateurs CSS, développeurs Front, développeurs FullStack 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.
Intra / sur-mesure
Programme standard     Programme sur-mesure
Oui / Non

Vos coordonnées

Dates de sessions

Pour vous inscrire, cliquez sur la session qui vous intéresse.
[-]
PARIS

Horaires

Les cours ont lieu de 9h à 12h30 et de 14h à 17h30.
Les participants sont accueillis à partir de 8h45.
Pour les stages pratiques de 4 ou 5 jours, les sessions se terminent à 15h30 le dernier jour.