Criar estrutura de pastas do módulo:
app / code / [Vendor] / [ModuleName]
app / code / [Vendor] / [ModuleName] / etc
app / code / [Vendor] / [ModuleName] / view / frontend / layout
Crie arquivos de módulo:
app / code / [Vendor] / [ModuleName] / registration.php
app / code / [Vendor] / [ModuleName] / etc / module.xml
app / code / [Vendor] / [ModuleName] / view / frontend / requirejs-config.js
app / code / [Vendor] / [ModuleName] / view / frontend / layout / default.xml
app / code / [Vendor] / [ModuleName] / view / frontend / layout / default_head_blocks.xml
registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'[Vendor]_[ModuleName]',
__DIR__
);
module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<module name="[Vendor]_[ModuleName]" setup_version="0.0.1"/>
</config>
requirejs-config.js
var config = {
paths: {
"jquery.bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min"
},
shim: {
'jquery.bootstrap': {
'deps': ['jquery']
}
}
};
default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<referenceBlock name="head">
<block class="Magento\Theme\Block\Html\Head\Script" name="requirejs" before="-">
<arguments>
<!-- RequireJs library enabled -->
<argument name="file" xsi:type="string">requirejs/require.js</argument>
</arguments>
</block>
<!-- Special block with necessary config is added on the page -->
<block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config" after="requirejs"/>
</referenceBlock>
</page>
default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<head>
<css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" src_type="url"/>
<css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" src_type="url"/>
</head>
</page>
Ativar módulo (SSH para raiz magento):
php -f bin/magento module:enable --clear-static-content [Vendor]_[ModuleName]
php -f bin/magento setup:upgrade
Implante recursos estáticos (SSH para raiz magento):
php bin/magento setup:static-content:deploy
O RequireJS não carregará nenhum arquivo de origem do módulo javascript até que alguém use esse módulo javascript como uma dependência. por Alan Storm
(exemplo de uso) na página do CMS:
<script type="text/javascript">
requirejs(['jquery', 'jquery.bootstrap'], function (jQuery, jQueryBootstrap) {
jQuery('.carousel').carousel();
});
</script>
Relacionado: Adicionando CSS a uma página do CMS usando o XML de atualização de layout
xsi:noNamespaceSchemaLocation
valor emdefault.xml
. Parece-me que isso vai contra toda a modularidade no Magento, para definir um caminho como esse. Mas eu vejo isso em toda a web, então deve ser assim que as coisas funcionam.xsi:noNamespaceSchemaLocation
está desatualizado, ou mesmo errado. Atualmente deve ser ourn:magento:framework:Module/etc/module.xsd
que o torna flexível.default.xml
é realmente necessária. O Magento 2 já carrega o RequireJS em todos os lugares em todas as páginas, portanto não há necessidade de adicionar o RequireJS explicitamente.Para adicionar o arquivo JS de autoinicialização, segui as seguintes etapas no Magento 2.2.4.
Etapa 1: coloque o arquivo JS no seguinte local.
Etapa 2: adicione os seguintes scripts neste arquivo
app/design/frontend/{Vendorname}/{Themename}/Magento_Theme/requirejs-config.js
.Etapa 3: adicione os seguintes scripts nos arquivos de modelo ou em seus arquivos JS personalizados (sem
script
tag).Etapa 4: Vá para a pasta raiz do Magento e execute o comando abaixo.
fonte