Astuce testée, fonctionnelle!. Dans mon exemple, nous allons chercher à mettre en place le composant Modal de Bootstrap 3.
LESS/CSS
Ajouter les sources CSS de Bootstrap 3 dans: /<Vendor>/<theme>/web/css/vendor/bootstrap/. Il faut embarquer:
- le fichier
/less/variables.less - le fichier
/less/mixins.less - le fichier
/less/modals.less - et TOUT LE DOSSIER
/less/mixins/
…et pas le fichier /dist/css/bootstrap.css.
Ne pas oublier d’importer les fichiers LESS nécessaires dans une feuille de style source de votre thème (je l’ai fait dans /web/css/source/_theme.less, même si à priori ce fichier ne serait là que pour surcharger des valeurs de variables dèjà précédemment définiers dans un thème parent de Magento 2):
|
1 2 3 4 5 6 |
// Core variables and mixins @import "../vendor/bootstrap/less/variables.less"; @import "../vendor/bootstrap/less/mixins.less"; // Components w/ JavaScript @import "../vendor/bootstrap/less/modals.less"; |
JS
Ajouter les sources JS de Bootstrap 3 dans: /<Vendor>/<theme>/web/js/vendor/bootstrap/. Attention: sachant que nous allons nous concentrer uniquement sur le composant Modal, il faut utiliser le fichier /js/modal.js (et pas le fichier /dist/js/bootstrap.js).
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 20 21 22 23 24 |
var config = { // Paths defines associations from library name (used to include the library, // for example when using "define") and the library file path. paths: { 'bsModal': 'js/vendor/bootstrap/modal' }, // 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). // Exports: if the library is not AMD aware, you need to tell requirejs what // to look for so it knows the script has loaded correctly. You can do this with an // "exports" entry in your shim. The value must be a variable defined within // the library. shim: { 'bsModal': { deps: ['jquery'], exports: 'jQuery.fn.modal' } } }; |
Dans n’importe quel fichier *.phtml, placez le code HTML de votre modale Bootstrap. Si vos balises comportent les attributs qui vont bien vous n’aurez pas besoin de déclarer votre modale via JS. Dans le cas contraire, dans le fichier *.phtml qui contient le markup HTML de votre modale:
|
1 2 3 4 5 |
<script type="text/javascript"> requirejs(['jquery', 'bsModal'], function( $, bsModal ){ $('#myModal').modal(); }); </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/*.