Lecture 5 minutes

Sylius a dernièrement publié sa version 2. Au programme de la Sylius v2 : un support des hooks twig, et l’utilisation des Components et LiveComponents twig.

Les hooks twig

Sur Sylius v1, les templates étaient affichés de différentes manières. Ils pouvaient être importés directement via les fonctions include ou render. Sinon, une grille de contenu pouvait être définie avec les sylius_template_events. Depuis la version 2, l’utilisation des templates passe principalement par les hooks twig. Un fonctionnement similaire aux sylius_template_events, avec quelques améliorations.

Fonctionnement des hooks

Déclarations des hooks

Organisation des fichiers

Les hooks sont définis dans le dossier app/twig_hooks/ et répartis dans différents fichiers suivant les pages concernées. Par exemple :

• vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/base.yaml concerne le layout de toutes les pages
• vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/product/show.yaml concerne le contenu de la page de détail produit
• vendor/sylius/sylius/src/Sylius/Bundle/ShopBundle/Resources/config/app/twig_hooks/shared/error.yaml concerne l’affichage des messages d’erreur

Définition et affichage des hooks

Un fichier yaml de définition de hook aura une structure comme suit :

sylius_twig_hook:

hooks:

‘namespace.du.hook’:

hookable_1:

template: ‘chemin/du/template1.html.twig’
priority: 100

hookable_2:

template: ‘chemin/du/template2.html.twig’
priority: 0

‘namespace.du.hook.hookable_2’:

hookable_2a:

template: ‘chemin/du/template2a.html.twig’
priority: 0

Puis, dans le template de la page, le hook pourra être appelé de cette manière :
{% hook “namespace.du.hook” %}
Ce qui appellera les hookables par ordre de priorité descendante.

On voit dans l’exemple qu’un hook “namespace.du.hook.hookable_2” existe. Il pourrait être appelé depuis le template template2.html.twig de cette façon :
{% hook “hookable_2” %}

En effet, un hookable_2 possède son hook courant (‘namespace.du.hook’) dans son contexte. Il s’en sert comme préfixe pour appeler ses hooks.

Avantages des hooks

La syntaxe de déclaration des hooks peut paraître complexe à première vue, mais elle a différents avantages.

On peut ajouter du contenu dans sa page sans réécrire le template complet. Il suffit d’ajouter son élément dans le hook voulu, avec la priorité qui nous convient. Et il sera ajouté tout seul.
On peut préparer des hooks pour différentes conditions. Par exemple avoir un hook spécifique pour les produits mis en avant, et un autre pour les produits classiques.
Les informations de contexte redescendent toutes seules vers les hookables. On n’a pas besoin de transmettre les informations dès qu’on appelle un hook.
Cela permet d’avoir des templates courts et spécifiques. KISS (Keep It Simple and Stupid). Si on regarde les templates utilisés dans la fiche produit, aucun ne fait plus de 30 lignes. Chacun a une fonction spécifique et se contente de cela. Comme ça, on limite l’impact des modifications que l'on pourrait apporter en réécrivant un template.
On peut utiliser les Components et LiveComponents twig. Vous ne connaissez pas les Components twig ? Ça tombe bien, c’est la prochaine partie de cet article!

Les Components twig

Components

Les Components twig permettent d’associer un objet php à un template twig. Cela permet de simplifier l’accès et la transformation de certaines données, et donc de les réutiliser autant que l’on veut.
Par exemple, le composant Sylius\Bundle\ShopBundle\Twig\Component\Product\PriceComponent prend en paramètre un variant, et transmet au template les informations de price, originalPrice et de discount. On peut donc le réutiliser dans la fiche produit, les listes de produit, ou même le panier.

Twig met aussi à disposition des Test Helpers qui permettent de faire des tests unitaires php. On peut ainsi simuler l’affichage d’un composant et vérifier qu’il contient bien les informations voulues. Par exemple vérifier qu’un prix barré est affiché ou non.

LiveComponents

Les LiveComponents sont des composants, mais rechargeables dynamiquement. Par exemple le Sylius\Bundle\ShopBundle\Twig\Component\Product\SummaryComponent prend en paramètre un variant, déclaré comme “LiveProp”. Si jamais ce variant est modifié, tout le template sera mis à jour dynamiquement. Si l’utilisateur sélectionne une option sur un produit, alors les informations de prix, stock, disponibilité et autre seront rechargées directement.
Ces LiveComponents sont particulièrement utiles dans les formulaires. Cela évite de devoir écrire des fichiers javascripts sur mesure. Tout est prêt dès le départ.

De la même manière que pour les Components twig classiques, les LiveComponents ont aussi une librairie de Test Helpers. En plus de vérifier l’affichage, il propose des méthodes pour mettre à jour les informations. On peut vérifier qu’une action entraîne les réactions voulues. Par exemple, modifier la quantité d’un produit mettra à jour le prix total.

Pour conclure sur Sylius v2

La version 2 de Sylius propose de nouvelles fonctionnalités qui permettent de rendre ses pages dynamiques. Plus besoin de coder manuellement des fonctionnalités qui sont souvent demandées. Cela demande un temps pour s’y familiariser, mais permet de gagner du temps sur le long terme. Et de mettre en place des expériences d’utilisation sur mesure pour chaque site.

Vous souhaitez plus d'infos sur Sylius V2 ? Contactez nos experts !
Contactez nos experts !