回答:
モジュールフォルダー構造の作成:
app / code / [Vendor] / [ModuleName]
app / code / [Vendor] / [ModuleName] / etc
app / code / [Vendor] / [ModuleName] / view / frontend / layout
モジュールファイルの作成:
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>
モジュールの有効化(SSHからmagentoルート):
php -f bin/magento module:enable --clear-static-content [Vendor]_[ModuleName]
php -f bin/magento setup:upgrade
静的リソースを展開します(SSHからmagentoルート):
php bin/magento setup:static-content:deploy
RequireJSは、誰かがそのJavaScriptモジュールを依存関係として使用するまで、JavaScriptモジュールのソースファイルをロードしません。アラン・ストームごと
(使用例)CMSページ:
<script type="text/javascript">
requirejs(['jquery', 'jquery.bootstrap'], function (jQuery, jQueryBootstrap) {
jQuery('.carousel').carousel();
});
</script>
xsi:noNamespaceSchemaLocation
時代遅れ、または間違っています。現在、それurn:magento:framework:Module/etc/module.xsd
はそれを柔軟にするはずです。
default.xml
は実際には必要ないと思います。Magento 2はすべてのページのどこにでもRequireJSをすでにロードしているため、RequireJSを明示的に自分で追加する必要はありません。
ブートストラップJSファイルを追加するには、Magento 2.2.4で次の手順を実行しました。
ステップ1: JSファイルを次の場所に配置します。
app/design/frontend/{Vendorname}/{Themename}/Magento_Theme/web/js/bootstrap.bundle.min.js
手順2:このファイルに次のスクリプトを追加しますapp/design/frontend/{Vendorname}/{Themename}/Magento_Theme/requirejs-config.js
。
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
var config = {
paths: {
'bootstrap':'Magento_Theme/js/bootstrap.bundle.min',
} ,
shim: {
'bootstrap': {
'deps': ['jquery']
}
}
};
ステップ3:テンプレートファイルまたはカスタムJSファイル(script
タグなし)に次のスクリプトを追加します。
<script type="text/javascript">
require([ 'jquery', 'jquery/ui', 'bootstrap'], function($){
// core js, jquery, jquery-ui, bootstrap codes go here
});
</script>
ステップ4: Magentoルートフォルダーに移動し、以下のコマンドを実行します。
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
xsi:noNamespaceSchemaLocation
値が表示されるのはおかしいと思いますがdefault.xml
。これはMagentoのすべてのモジュール性に反し、そのようなパスを定義するように思えます。しかし、私はそれをウェブ全体で見るので、物事が機能する方法でなければなりません。