Tagtwig

[Foundation] Démarrez vos développements front-end avec un starter kit incluant le moteur de templates Twig (Twig.js) et le framework JavaScript Vue.js

Source: Foundation’s ZURB stack including Twig (Twig.js) template engine and Vue.js progressive JS framework by Frank LANG on GitHub.

Vue.js et Foundation 6 for Sites

Icônes SVG

Icônes SVG avec Twig

Icônes SVG avec Vue.js

[Change cross commerce] Surcharger un template issu d’un module standard dans un thème personnalisé

Attention : doc en cours de rédaction …

Surcharger le template qui affiche la liste de produits

Arborescence standard : où trouve-t’on les templates standards ?

Deux types de fichiers concernés : les directives Angular JS et les blocs

Arborescence d’un thème personnalisé : où consigner nos surcharges des templates standards ?

blocks-templates.json : déclarer l’existence d’une surcharge de template pour la rendre exploitable en backoffice.

Le fichier json permet également de passer un certain nombre de paramètres.

admin.json : créer une locale pour identifier votre nouveau template en backoffice.

Nomenclature

La surcharge d’un template se trouvant nativement dans le répertoire Plugins/Modules/[nom_du_vendor]/[nom_du_module]/Assets/Twig/Blocks/ se fera obligatoirement dans le répertoire App/Themes/[nom_du_vendor]/[nom_de_votre_plugin]/Assets/Twig/[nom_du_vendor]_[nom_de_votre_plugin]/Blocks/.

Ainsi, pour notre exemple de liste produits, le template product-list.twig se trouvant nativement dans le répertoire Plugins/Modules/Rbs/Catalog/Assets/Twig/Blocks/ se fera obligatoirement dans le répertoire App/Themes/Project/[nom_de_votre_plugin]/Assets/Twig/Project_[nom_de_votre_plugin]/Blocks/.

Attention : l’unique emplacement censé regrouper les surcharges de l’ensemble des templates des répertoires Twig/Blocks/ de tous les modules de Change Cross Commerce pouvant se retrouver rapidement saturé de fichiers, il est conseillé pour optimiser la lisibilité de préfixer les libellés de vos fichiers surchargés.

Ainsi, la surcharge du fichier standard product-list.twig pourrait se nommer rbs-catalog-product-list.twig pour [nom_du_vendor]-[nom_du_plugin]-[nom_du_template_standard].twig.

Utilisation de {% extends %} : rbs-catalog-product-list.twig

Utilisation de {% use %} : product-list-directives.twig

rbs-order-order-detail.twig

On n’utilise ni {% extends %}, ni {% use %} dans ce cas là :

Remarque : Les surcharges de fichiers issus des répertoires Blocks/ peuvent contenir des directives Angular issues des fichiers [libellé]-directives.twig. Ceci évite de surcharger un fichier supplémentaire.

© 2020 devfrontend.info

Theme by Anders NorénUp ↑