Para carregar um main.jsarquivo personalizado em todas as páginas (no modo RequireJS), é uma boa maneira:
1) Criar main.js
Criar main.jsdentro da pasta do tema
<theme_dir>/web/js/main.js
com este conteúdo:
define([
"jquery"
],
function($) {
"use strict";
// Here your custom code...
console.log('Hola');
});
Em resumo : declaramos dependências no início, por exemplo "jquery". Definimos como parâmetro da função o nome da variável para usar a dependência dentro da função, por exemplo "jquery" --> $. Colocamos todo o nosso código personalizado dentro function($) { ... }.
2) Declarar main.jscom um requirejs-config.jsarquivo
Crie um requirejs-config.jsarquivo dentro da pasta do tema:
<theme_dir>/requirejs-config.js
com este conteúdo:
var config = {
// When load 'requirejs' always load the following files also
deps: [
"js/main"
]
};
"js/main"é o caminho para o nosso costume main.js. A extensão ".js" não é necessária.
Nosso requirejs-config.jsserá fundido com outro requirejs-config.jsdefinido no Magento.
O RequireJS carregará nosso main.jsarquivo, em cada página, resolvendo dependências e carregando arquivos de maneira assíncrona.
Opcional: Incluindo biblioteca de terceiros
Essa é a maneira de incluir bibliotecas de terceiros.
1) Adicione a biblioteca em web/js:
<theme_dir>/web/js/vendor/jquery/slick.min.js
2) Abra requirejs-config.jse adicione este conteúdo:
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',
}
}
};
Parece mais complicado do que realmente é.
3) Adicione a dependência em main.js:
define([
'jquery',
'slick'
],
function($) {
// ...
});