- Documentation
- Dockers
- Development starter themes
- Tutoriels développement de thèmes
- Extensions
- Certification Front-end
Documentation et ressources officielles
- Magento 2 Front-End Developer Guide – La documentation du développeur.
- Magento 2 Documentation and Ressources – Les manuels utilisateurs.
- Magento 2 Ressources library – Explore the latest eCommerce and technical resources, case studies, and courses.
- Magento 2 Forums – Les forums.
- Doc officielle Magento UI Library
-
Doc officielle: Magento 2 Official Frontend Developer Guide.
This document provides instructions for creating and installing custom storefront themes for a Magento application. It describes Magento’s content rendering process and explains the view layer of the system to the extent required to build a theme efficiently. The document also walks through everyday frontend developer’s tasks.
Developing the view part of a custom module and customizing the Magento Admin panel design is out of the scope of this guide.
- [breakpoints JS] Describes JavaScript used in Magento out-of-the-box to relocate certain elements and change their behavior depending on the breakpoint.
Cours et Tutoriels officiels
- RESPONSIVE WEB DESIGN IN MAGENTO 2 (2 heures)
Documentation officieuse
- Intégrer des librairies/plugins (JS/CSS) externes à un thème Magento 2 (par exemple Bootstrap 3, animate.css, …)
Ressources de ce blog:
- [Magento 2] Ajouter et exploiter une librairie CSS tierce
- [Magento 2] Ajouter et exploiter dans un fichier PHTML une fonction jQuery par l’intermédiaire de requireJS
- [Magento 2] Ajouter et exploiter dans un fichier PHTML un composant javascript issu de Bootstrap 3 par l’intermédiaire de requireJS
- [Magento 2] Exploiter le widget javascript jQuery natif Accordion dans le fichier PHTML des filtres produit (page category) (et une petite introduction aux notations déclaratives et impératives)
- [Magento 2] Utiliser des media queries, points de rupture, en LESS (CSS) et en javascript avec
matchMedia
Ressources externes:
- https://www.mageplaza.com/magento-2-module-development/
- Formation en français à Magento 2 (plutôt orientée dev back-end) par Pierre Fay
JS
Ressources en ligne:
- Un excellent pense-bête sur l’intégration de code javascript dans Magento 2. Tout y est parfaitement structuré, clair, concis et illustré: initialisation imperative/declaration, plain modules, jQuery UI Widgets (add new method, override existing method, create new widget), UI components, etc… Version PDF pour la postérité – jason.codes-Magento 2 JavaScript CheatSheet. Voir aussi, les sous-articles connexes:
- Magento 2 Add Global JS File Through RequireJS et sa version PDF – jason.codes-Magento 2 Add Global JS File Through RequireJS
- Magento 2: Calling and Initializing JavaScript et sa version PDF – jason.codes-Magento 2 Calling and Initializing JavaScript
- Magento 2 Create jQuery UI Widget et sa version PDF – jason.codes-Magento 2 Create jQuery UI Widget
- Magento 2 UI Component (KnockoutJS) et sa version PDF – jason.codes-Magento 2 UI Component
- Passer des options, méthodes, gérer les events – Magento 2 Modal Widget in Use où Max Pronko décrit un use-case du widget jQuery UI Modal.
- Magento 2 properly update core jquery lib – mettre à jour la version de jQuery
- Can I use multiple versions of jQuery on the same page? – utiliser de multiples versions de jQuery dans la même page
- Mettre à jour, à la volée, les options d’un widget jQuery UI: Update jQuery UI Widget Options, Widget Factory, How can I change a jQuery UI widget’s options after it has been created?
Divers
- Charger une ressource JS sur toutes les pages du site (exploitable par le biais de requireJS). La solution de base fonctionne bien.
- Pas réussi à le faire fonctionner – How to add bootstrap.js in Magento 2? (extrait du Magento 2 Cookbook par Alan Storm).
- ATTENTION: tuto complètement merdique pour l’ajout de JS; passable pour l’intégration de CSS – HOW TO INTEGRATE MAGENTO 2 THIRD PARTY PLUGINS & LIBRARIES FOR FRONT-END?
Dockers
alexcheng1982/docker-magento2
Version testée: tag 2.3.1.
Petite particularité liée à ma VM Ubuntu: veiller à ce que le docker proxy soit down
pour éviter un conflit de ports sortants avec le container web du projet et une erreur nginx en front.
Procédure de déploiement:
Voir le fichier readme.md pour une doc d’install complète.
$ git clone https://github.com/alexcheng1982/docker-magento2.git
- Pour choisir la version de Magento 2 souhaitée, ajouter
--branch 2.2.5 --single-branch
à la commande juste au-dessus (où2.2.5
est un tag en référence à la version à prendre en compte). $ cd docker-magento2
Si utilisation pour développer:
Manips nécessaires uniquement si vous souhaitez développer. Dans le cas contraire, vous pouvez sauter cette partie et vous rendre directement à la section suivante « Si utilisation pas pour développer ».
Remplacer le fichier docker-compose.yml
de base par celui suffixé par *-dev:
$ cp docker-compose.yml _docker-compose.yml && cp docker-compose-dev.yml docker-compose.yml
Le nouveau fichier docker-compose.yml
peut comporter une erreur (rencontrée avec le tag 2.2.5) qu’il faut corriger. Remplacer la ligne 4: build: .
par: build: ./developer
.
Si utilisation pas pour développer (bricolage en admin, simple affichage d’une boutique en front, …):
$ docker-compose up -d
$ docker exec -it docker-magento2_web_1 install-magento
- Et si vous souhaitez les sample datas (une boutique de demo):
$ docker exec -it docker-magento2_web_1 install-sampledata
Puis modifier le fichier hosts de Windows en rajoutant la ligne:<IP_de_votre_machine_virtuelle> local.magento
.
Le site est accessible en front via l’URL: http://local.magento.
L’interface admin est accessible via l’URL http://local.magento/admin avec les username/password admin/magentorocks1
.
Lancer des commandes bin/magento
pour les développeurs:
docker exec -it docker-magento2_web_1 ./bin/magento <commande>
or you can enter inside the container with docker exec -it docker-magento2_web_1 bash
and then execute ./bin/magento <commande>
.
Persistance des données:
Pour conserver l’install et les sample data après redémarrage de la machine virtuelle, il faut stopper les dockers plutôt que de les down -v.$ docker-compose stop
et $ docker-compose start
pour redémarrer.
Par défaut, les fichiers stockés hors container le sont à la racine du système Ubuntu (deux dossiers plus haut que /home/intlangf
).
Des fichiers de travail en local (hors container):
L’auteur évoque la possibilité de conserver les dossier extensions et thèmes en local sur la machine et d’utiliser Docker Compose volumes pour les installer. Il donne l’exemple suivant en partant de son fichier docker-compose.yml
:
1 2 3 4 5 |
version: '3.0' services: web: volumes: - /dev/mytheme:/var/www/html/app/design/frontend/mytheme/default |
Au lancement du container web, un chemin/des dossiers /dev/mytheme
sera créé sur la machine locale, à la racine de Ubuntu. C’est dans ce dossier qu’il faudra travailler pour le développement du theme mytheme. Il fait mirroir au chemin /var/www/html/app/design/frontend/mytheme/default
présent quant à lui dans le container.
Pour moi (auteur du blog), pour avoir en local les fichiers d’un thème custom/default
:
1 2 3 4 5 |
version: '3.0' services: web: volumes: - /home/intlangf/sandbox/magento23/app/design/frontend/custom/default:/var/www/html/app/design/frontend/custom/default |
https://github.com/clean-docker/Magento2
Pas testé.
Docker Image to Magento 2 local development in Mac, Linux and Windows
Pas testé. Inclus grunt.
Utilisation de Grunt pour compiler les sources .less
- Docker Grunt in Magento 2 (MAINTAINER Gordon Knoppe
) - Docker Grunt in Magento 2 (for docker-compose)
Development starter themes
Luma Child Theme Starter Files (Magento 2)
Rocket Web Magento 2 theme prime
Installer avec le Docker alexcheng1982/docker-magento2
$ composer require rocketweb/theme-frontend-prime; docker exec -it docker-magento2_web_1 bin/magento module:enable RocketWeb_UiCore; docker exec -it docker-magento2_web_1 bin/magento module:enable RocketWeb_CheckoutEnhancement; docker exec -it docker-magento2_web_1 bin/magento setup:upgrade; docker exec -it docker-magento2_web_1 bin/magento setup:di:compile; docker exec -it docker-magento2_web_1 bin/magento cache:flush
Troubleshooting:
Après install du thème si l’accès au front merde…
…en affichant l’erreur PHP suivante:
Fatal error: Uncaught RuntimeException: Can’t create directory /var/www/html/generated/code/Magento/Framework/App/ResourceConnection/. Class Magento\Framework\App\ResourceConnection\Proxy generation error: The requested class did not generate properly, because the ‘generated’ directory permission is read-only. If — after running the ‘bin/magento setup:di:compile’ CLI command when the ‘generated’ directory permission is set to write — the requested class did not generate properly, then you must add the generated class object to the signature of the related construct method, only. in /var/www/html/vendor/magento/framework/Code/Generator.php:135 Stack trace: #0 /var/www/html/vendor/magento/framework/Code/Generator/Autoloader.php(35): Magento\Framework\Code\Generator->generateClass(‘Magento\\Framewo…’) #1 [internal function]: Magento\Framework\Code\Generator\Autoloader->load(‘Magento\\Framewo…’) #2 [internal function]: spl_autoload_call(‘Magento\\Framewo…’) #3 /var/www/html/vendor/magento/framework/Code/Reader/Class in /var/www/html/vendor/magento/framework/Code/Generator.php on line 135
Lancer la commande suivante:$ docker exec -it docker-magento2_web_1 bin/magento setup:di:compile
Tutoriels développement de thèmes
- Jamesan – Let’s get started theming Magento 2 – part 1, part 2, part 3
- Cloud Ways – Create custom theme Magento 2 – part 1, part 2
Extensions
Page builders/WYSIWYG
Gratuits
-
magesolution.com FRONT-END CMS BUILDER, Demo
- Sources: Magento 2 CMS Builder, nécessite également l’installation de l’extension MGS Core
- Guide d’installation
- Documentation
- Pour utiliser l’extension, il faut obligatoirement créer un builder account. La création et l’édition de contenus se fait côté front-end.
Payants
- [From Magento 2 DevDocs] Page Builder
- [Payant] LandOfCoder Magento 2 Visual Design Editor | Magento 2 Page Builder
- [Payant] CleverBuilder is the World’s Leading Magento 2 Page Builder
Certification Magento 2 (Front End)
- MAGENTO 2 FRONT END PROFESSIONAL CERTIFICATION – FEEDBACK & QUESTIONS EXAMPLES
- magento-2-front-end-developer-certification-practice-exam (120 questions)
- Tout plein de questionnaires d’entrainement gratuits (vérifier les dates pour avoir des questions le plus à jour possible)
- How we trained 8 “Magento 2 Certified Professional Front End Developers” in 6 weeks…
- Payant UDEMY – Magento 2 Front-end Developer Certification Practice Exams
- Payant – MAGENTO 2 CERTIFIED FRONTEND DEVELOPER STUDY GUIDE 152 pages. Concentrated frontend knowledge. For your learning.