Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Grilles parfaites ! Introduction au Composant Grid de PrestaShop

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 :-)

C9bef243216af3ddcf5c62bfeed46c68?s=128

Mickaël Andrieu

June 04, 2019
Tweet

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