Grilles parfaites ! Introduction au Composant Grid de PrestaShop

La version 1.7 de PrestaShop utilise le framework Symfony 3 et bootstrap 4 pour son back office.

Mais saviez-vous qu'il embarque aussi un nouveau composant pour customiser et créer de nouvelles page de listing dans le back office ?

Disponible depuis la version 1.7.3 et en constante évolution, prenons un peu moins d'une heure pour expliquer nous avons fait le choix de la création d'un nouveau système et prenons quelques cas d'utilisation communs en agence de développement e-commerce.

Promis, une fois que vous l'aurez utilisé vous ne reviendrez plus en arrière :-)

Transcript

1. Présentation du composant Grid Grilles parfaites !
2. Qui suis-je ? Mickaël Andrieu Formateur chez PrestaShop Certifié Opquast
3. Au programme Pourquoi un composant Grid ? Prendre la main sur la structure Prendre la main sur les données Prendre la main sur les vues
4. Pourquoi un nouveau système de grille ? Grilles parfaites ! Présentation du Composant Grid 4
5. Le système de Grille de PrestaShop 1.6 Grilles parfaites ! Présentation du Composant Grid 5 ✓Facile à utiliser (si on le connaît) ✓ Hooks et templates customizables ✓ Se base sur l’Object Model ✓ Maintenance simplifiée !
6. Le système de Grille de PrestaShop 1.6 Grilles parfaites ! Présentation du Composant Grid 6 ✗Couplé aux controllers “Legacy” ✗Couplé à Smarty ✗Couplé à (aux?) ancien(s) design(s) ✗Ne respecte pas MVC :(
7. Le composant Grid Refaire, sans refaire les mêmes erreurs. 7
8. Le composant Grid (PrestaShop 1.7.5+) Grilles parfaites ! Présentation du Composant Grid 8 ✓Facile à utiliser (auto découvrable) ✓ Hooks et templates customizables ✓ Se base sur des interfaces ✓ Testé et documenté
9. Le composant Grid Grilles parfaites ! Présentation du Composant Grid 9
10. Le composant Grid Grilles parfaites ! Présentation du Composant Grid 10 • Catégories • Marques et fournisseurs • Clients • Pages • Link Widget • Langues • Devises • Taxes • Contacts • SEO & URLS • Emails • Employés • Profils • Gestionnaire SQL • Logs • Produits (en 1.7.7)
11. Toutes les pages de listing de l’espace Administrateur seront “migrées” sur le Composant Grid 11
12. Prendre la main sur la structure d’une Grille 12
13. Le composant Grid - Colonnes Grilles parfaites ! Présentation du Composant Grid 13
14. Le composant Grid - Actions groupées Grilles parfaites ! Présentation du Composant Grid 14
15. Le composant Grid - Actions de grille Grilles parfaites ! Présentation du Composant Grid 15
16. Le composant Grid - tri/recherche/pagination Grilles parfaites ! Présentation du Composant Grid 16
17. Le composant Grid - Structure Grilles parfaites ! Présentation du Composant Grid 17 La structure d’une grille se définit par un identifiant, un nom, des colonnes, un système de recherche et différents types d’actions.
18. Le composant Grid - Structure Grilles parfaites ! Présentation du Composant Grid 18
19. Le composant Grid - Modification de structure Grilles parfaites ! Présentation du Composant Grid 19
20. Le composant Grid - Modification de structure Grilles parfaites ! Présentation du Composant Grid 20 action{GridId}GridDefinitionModifier
21. Le composant Grid - Modification de structure Grilles parfaites ! Présentation du Composant Grid 21 action{GridId}GridDefinitionModifier ➔ Ajout ➔ Suppression ➔ Déplacement Ex complet: https://github.com/friends-of-prestashop/customers
22. Le composant Grid - Modification de structure Grilles parfaites ! Présentation du Composant Grid 22
23. Le composant Grid - Modification de structure Grilles parfaites ! Présentation du Composant Grid 23
24. Prendre la main sur les données d’une Grille 24
25. Le composant Grid - Données Grilles parfaites ! Présentation du Composant Grid 25
26. Le composant Grid - Données Grilles parfaites ! Présentation du Composant Grid 26 Les données d’une grille sont retrouvées à partir de requêtes en base de données. Les classes en charge de les créer sont appelées des Query Builders.
27. Le composant Grid - Données Grilles parfaites ! Présentation du Composant Grid 27 Le système repose sur le QueryBuilder du projet open source Doctrine.
28. Le composant Grid - Données Grilles parfaites ! Présentation du Composant Grid 28
29. Le composant Grid - Données Grilles parfaites ! Présentation du Composant Grid 29
30. Le composant Grid - Données Grilles parfaites ! Présentation du Composant Grid 30 action{GridId}GridQueryBuilderModifier
31. Le composant Grid - Données Grilles parfaites ! Présentation du Composant Grid 31 action{GridId}GridQueryBuilderModifier ➔ Gestion dynamique ➔ Query Builder de Doctrine ➔ Requêtes loguées en mode debug
32. Le composant Grid - La méthode “faignante” Grilles parfaites ! Présentation du Composant Grid 32 action{GridId}GridDataModifier ✓Facile ✗Performant Ex complet: https://github.com/friends-of-prestashop/grid_demo
33. Prendre la main sur les vues d’une Grille 33
34. Le composant Grid - Vues Grilles parfaites ! Présentation du Composant Grid 34
35. Chaque élément de la Grille dispose de son propre template 35 Un tutoriel complet est disponible dans la documentation: https://devdocs.prestashop.com/1.7/development/components/grid/tutorials/customize-templates/#grid-actions-templating
36. Chaque type de colonne dispose de son propre template contextualisé 36
37. Le composant Grid - Vues contextualisées Scope Template Core @PrestaShop/Admin/Common/Grid/Content/{column_type}.html.twig Global modules/.../views/PrestaShop/Admin/Common/Grid/Content/{column_type}.html.twig Grille .../views/PrestaShop/Admin/Common/Grid/Content/{grid_id}_{column_type}.html.twig Colonne .../Admin/Common/Grid/Content/{grid_id}_{column_id}_{column_type}.html.twig 37 Grilles parfaites ! Présentation du Composant Grid Ex complet: https://github.com/friends-of-prestashop/grid_demo
38. Le composant Grid - Vues contextualisées 38 Grilles parfaites ! Présentation du Composant Grid
39. Le composant Grid - Vues contextualisées 39 Grilles parfaites ! Présentation du Composant Grid
40. Merci de votre écoute ! Des questions ?
41. Developer tools (1.7.5+) Surprise ! Introduction au projet communautaire Developer tools 41 https://github.com/friends-of-prestashop/developer_tools