Le bloc-notes professionnel d'un développeur front-end senior
Source: Set twig variable to json file as an include.
Fichier _data/test.json:
|
1 |
{ "name":"John", "age":30, "car":null } |
Fichier template.twig:
|
1 2 3 4 5 6 7 |
{% set json %} {% include "_data/test.json" %} {% endset %} [...] <h1>{{ json }}</h1> |
Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0). Source principale: TWIG + WEBPACK sur dgrigg.com (version PDF).
Les fichiers assets source à placer à la racine de votre projet (Pimcore dans mon cas).
Exécuter les commandes de récupération et de sauvegarde des paquets twig-html-loader et html-webpack-plugin:
|
1 2 3 |
yarn add twig-html-loader --save yarn add html-webpack-plugin --save yarn add fs --save |
webpack.config.js:
|
1 2 3 4 |
const Encore = require('@symfony/webpack-encore'); [...] const HtmlWebpackPlugin = require('html-webpack-plugin'); const fs = require('fs'); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// create a list of twig files to generate // filter out anything that starts with an underscore or is not a twig file function walk(dir) { let results = []; const list = fs.readdirSync(dir); list.forEach(file => { file = `${dir}/${file}`; const stat = fs.statSync(file); if (stat && stat.isDirectory() && path.basename(file).indexOf('_') !== 0) { /* Recurse into a subdirectory */ results = results.concat(walk(file)); } else if ( stat && !stat.isDirectory() && path.extname(file) === '.twig' && path.basename(file).indexOf('_') !== 0 ) { /* Is a file */ results.push(file); } }); return results; } //start looking in the main twig folder const files = walk('./assets/twig'); // generate html plugins to export const htmlPlugins = files.map( file => // Create new HTMLWebpackPlugin with options Encore.addPlugin(new HtmlWebpackPlugin({ filename: '../html/' + file.replace('./assets/twig/', '').replace('.twig', '.html'), template: path.resolve(__dirname, file), publicPath: '../build/', hash: true, })) ); |
|
1 2 3 4 5 6 7 8 |
Encore [...] .addLoader({ test: /\.twig$/, type: 'asset/source', loader: 'twig-html-loader' }) ; |
Résultat:
Fichiers source:
Fichiers destination:
ATTENTION: Testé fonctionnel (moyennant mes ajustements ci-dessous) sur les bases de la demo officielle de Pimcore qui tournait, au moment de mes tests, sous Pimcore v6.8.10. Source: msenkpiel.de – Using Symfony Webpack-Encore-Bundle with Pimcore et version PDF pour la postérité.
Attention à bien vérifier les deux fichiers suivants par rapport à ce qui est indiqué dans le billet de blog de référence. J’ai eu une erreur Could not find the entrypoints file from Webpack: the file « /var/www/html/web/build/entrypoints.json » does not exist. en respectant à la lettre ce qui est indiqué. En modifiant les deux fichiers ci-dessous conformément à ce que je décris, ça a fonctionné.
/pimcore-demo/webpack.config.js. Attention au paramètre .setOutputPath() pour lequel il faut mettre 'web/build' (et non pas 'public/build'.
Attention, si vous utilisez le skeleton officiel de Pimcore le paramètre .setOutputPath('public/build') sera peut-être valide (pas testé)…
|
1 2 3 4 5 6 7 |
Encore // directory where compiled assets will be stored .setOutputPath('web/build/') // public path used by the web server to access the output path .setPublicPath('/build') // only needed for CDN's or sub-directory deploy //.setManifestKeyPrefix('build/') |
/pimcore-demo/app/config/config.yml
|
1 2 3 4 5 6 7 |
#### SYMFONY OVERRIDES framework: assets: json_manifest_path: '%kernel.project_dir%/web/build/manifest.json' webpack_encore: output_path: '%kernel.project_dir%/web/build' |
Remarque: nous avons /pimcore-demo/config/packages/assets/assets.yaml qui contient aussi une référence au dossier public/. Je ne l’ai pas modifié lors de mon test.
|
1 2 3 |
framework: assets: json_manifest_path: '%kernel.project_dir%/public/build/manifest.json' |
Attention: veiller à bien positionner l’appel à la source JS juste avant la fermeture du tag </body>. Sinon on peut avoir des problèmes à l’exécution de certains JS, comme par exemple avec l’exemple d’intégration du framework UIkit avec Webpack ou j’obtenais une erreur cannot read property appendChild of undefined.
|
1 2 3 4 |
{% block javascripts %} {{ encore_entry_script_tags('app') }} {% endblock %} </body> |
Source: Foundation’s ZURB stack including Twig (Twig.js) template engine and Vue.js progressive JS framework by Frank LANG on GitHub.
Attention : doc en cours de rédaction …
Surcharger le template qui affiche la liste de produits
|
1 2 3 4 5 6 7 8 9 10 |
Plugins |_ Modules |_ Rbs |_ Catalog |_ Assets |_ Twig |_ Blocks |_ product-list.twig |_ product-list-directives.twig |_ product-list-item.twig |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
App |_ Themes |_ Project |_ [nom_de_votre_plugin] |_ Assets |_ I18n |_ fr_FR |_ admin.json |_ Twig |_ Project_[nom_de_votre_plugin] |_ Blocks |_ rbs-catalog-product-list.twig |_ Rbs_Catalog |_ product-list-directives.twig |_ product-list-item.twig |_ blocks-templates.json |
Le fichier json permet également de passer un certain nombre de paramètres.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "Rbs_Catalog_ProductList": { "templates": { "Project_Kidiliz:rbs-catalog-product-list.twig": { "label": "t.project.kidiliz.admin.template_rbs_catalog_product_list", "parameters": { "itemsPerLine": { "type": "Integer", "defaultValue": 3, "label": "m.rbs.catalog.admin.product_list_items_per_line" }, "showOrdering": { "type": "Boolean", "defaultValue": true, "label": "m.rbs.catalog.admin.product_list_show_ordering" } } } } } |
|
1 2 3 4 5 6 7 8 |
{ "label": { "message": "[nom_de_votre_theme]" }, "template_rbs_catalog_product_list": { "message": "Liste produits" } } |
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.
|
1 |
{% extends 'Rbs_Catalog/Blocks/product-list.twig' %} |
|
1 |
{% use '@Rbs_Base/Rbs_Catalog/product-list-directives.twig' %} |
On n’utilise ni {% extends %}, ni {% use %} dans ce cas là :
|
1 2 3 4 5 6 7 |
{% block rbsOrderOrderDetailUse %} {% use 'Rbs_Generic/icon-templates.twig' %} {% use 'Rbs_Order/order-templates.twig' %} {% use 'Rbs_Productreturn/return-templates.twig' %} {% endblock rbsOrderOrderDetailUse %} [ Vos ré-écritures de code ... ] |
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.