Um eine benutzerdefinierte main.jsDatei auf alle Seiten zu laden (auf die RequireJS-Weise), ist dies ein guter Weg:
1) Erstellen main.js
Erstellen Sie main.jsinnerhalb des Themenordners
<theme_dir>/web/js/main.js
mit diesem Inhalt:
define([
"jquery"
],
function($) {
"use strict";
// Here your custom code...
console.log('Hola');
});
Kurz : Wir deklarieren zu Beginn Abhängigkeiten, z "jquery". Wir definieren als Funktionsparameter den Variablennamen für die Verwendung der Abhängigkeit innerhalb der Funktion, z "jquery" --> $. Wir setzen all unseren benutzerdefinierten Code ein function($) { ... }.
2) main.jsMit einer requirejs-config.jsDatei deklarieren
Erstellen Sie eine requirejs-config.jsDatei im Themenordner:
<theme_dir>/requirejs-config.js
mit diesem Inhalt:
var config = {
// When load 'requirejs' always load the following files also
deps: [
"js/main"
]
};
"js/main"ist der Weg zu unserem Brauch main.js. Die Erweiterung ".js" ist nicht erforderlich.
Unsere requirejs-config.jswerden mit anderen requirejs-config.jsin Magento definierten zusammengeführt.
RequireJS unsere lädt main.jsDatei, auf jeder Seite, Abhängigkeiten aufzulösen und das Laden von Dateien in einem Asynchron - Weg.
Optional: Einschließlich Bibliothek eines Drittanbieters
Auf diese Weise können Bibliotheken von Drittanbietern eingebunden werden.
1) Fügen Sie die Bibliothek hinzu in web/js:
<theme_dir>/web/js/vendor/jquery/slick.min.js
2) Öffne requirejs-config.jsund füge diesen Inhalt hinzu:
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',
}
}
};
Es sieht komplizierter aus als das, was es eigentlich ist.
3) Fügen Sie die Abhängigkeit hinzu in main.js:
define([
'jquery',
'slick'
],
function($) {
// ...
});