Astuce testée, fonctionnelle!
Créer le fichier: /<Vendor>/<theme>/web/js/border.js
:
1 2 3 4 5 6 7 |
define([ 'jquery' ], function($){ return function (givenElement, givenColor) { $(givenElement).css('border', '12px solid ' + givenColor); } }); |
Créer le fichier: /<Vendor>/<theme>/requirejs-config.js
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var config = { map: { '*': { 'jsBorder': 'js/border' } }, // Shim: when you're loading your dependencies, requirejs loads them all // concurrently. You need to set up a shim to tell requirejs that the library // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends // on jQuery). shim: { 'jsBorder': { deps: ['jquery'] } } }; |
Dans n’importe quel fichier *.phtml
:
1 2 3 4 5 |
<script type="text/javascript"> requirejs(['jquery', 'jsBorder'], function( $, jsBorder ) { jsBorder('body', 'navy'); }); </script> |
Attention, commande à exécuter avant de rafraîchir la fenêtre du navigateur: $ php bin/magento cache:clean; rm -rf pub/static/*; rm -rf var/view_preprocessed/*
.