Pour charger un main.jsfichier personnalisé sur toutes les pages (de la manière RequireJS), procédez comme suit:
1) créer main.js
Créer main.jsdans le dossier du thème
<theme_dir>/web/js/main.js
avec ce contenu:
define([
"jquery"
],
function($) {
"use strict";
// Here your custom code...
console.log('Hola');
});
En bref : nous déclarons les dépendances au début, par exemple "jquery". Nous définissons comme paramètre de fonction le nom de la variable pour utiliser la dépendance dans la fonction, par exemple "jquery" --> $. Nous mettons tout notre code personnalisé à l'intérieur function($) { ... }.
2) Déclarer main.jsavec un requirejs-config.jsfichier
Créez un requirejs-config.jsfichier dans le dossier du thème:
<theme_dir>/requirejs-config.js
avec ce contenu:
var config = {
// When load 'requirejs' always load the following files also
deps: [
"js/main"
]
};
"js/main"est le chemin de notre coutume main.js. L'extension ".js" n'est pas requise.
Notre requirejs-config.jssera fusionné avec d'autres requirejs-config.jsdéfinis dans Magento.
RequireJS charge notre main.jsfichier, sur chaque page, en résolvant les dépendances et en chargeant les fichiers de manière asynchrone.
Facultatif: bibliothèque tierce incluse
C'est le moyen d'inclure des bibliothèques tierces.
1) Ajouter la bibliothèque en web/js:
<theme_dir>/web/js/vendor/jquery/slick.min.js
2) Ouvrez requirejs-config.jset ajoutez ce contenu:
var config = {
deps: [
"js/main"
],
// Paths defines associations from library name (used to include the library,
// for example when using "define") and the library file path.
paths: {
'slick': 'js/vendor/jquery/slick.min',
},
// 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: {
'slick': {
deps: ['jquery'],
exports: 'jQuery.fn.slick',
}
}
};
Cela semble plus compliqué que ce que c'est réellement.
3) Ajoutez la dépendance dans main.js:
define([
'jquery',
'slick'
],
function($) {
// ...
});