require-config.js
カスタムテーマでの使用方法は知っていますがmyfile.js
、すべてのページでカスタムJavaScriptファイル()を使用したいと思います。追加する必要があるディレクトリrequire-config.js
とその使用方法を教えてください。
Magentoの公式ページは参照しないでください。
require-config.js
カスタムテーマでの使用方法は知っていますがmyfile.js
、すべてのページでカスタムJavaScriptファイル()を使用したいと思います。追加する必要があるディレクトリrequire-config.js
とその使用方法を教えてください。
Magentoの公式ページは参照しないでください。
回答:
requirejs-config.js
JavaScriptリソースマッピングの作成に使用します。すべての必要な構成は次の場所にありpub/static/_requirejs
ます。
私の知る限り、Require Jsを介してカスタムスクリプトをロードする正しい方法:テンプレートを使用してスクリプトを呼び出します。Magento\Framework\View\Element\Template
ブロッククラスで新しいテンプレートを作成します。
すべてのページにjsファイルをロードしたいが、新しいモジュールを作成したくない場合は、ブロックでMagentoテーマモジュールを参照するbefore.body.end
必要after.body.start container
がありdefault.xml
ます。
app / design / frontend / Vendor / Theme / Magento_Theme / layout / default.xml
<?xml version="1.0"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceContainer name="after.body.start">
<block class="Magento\Framework\View\Element\Template" name="custom.js" template="Magento_Theme::custom_js.phtml"/>
</referenceContainer>
</page>
app / design / frontend / Vendor / Theme / requirejs-config.js
var config = {
map: {
'*': {
customScript:'Magento_Theme/js/customscript'
}
}
};
app / design / frontend / Vendor / Theme / Magento_Theme / web / js / customscript.js
define('jquery', function($) {
//Your code here
//alert('Here');
}(jQuery)
);
テンプレートはスクリプトを呼び出します:app / design / frontend / Vendor / Theme / Magento_Theme / templates / custom_js.phtml
<script>// <![CDATA[
require([
'jquery',
'customScript'
], function ($, script) {
//Your code here
//alert('Here');
});
// ]]>
</script>
Magentoキャッシュをクリアし、静的コンテンツのデプロイを実行します。 php bin/magento setup:static-content:deploy
\app\design\frontend\Enim\blank\Magento_CatalogWidget\templates\product\widget\content\grid.phtml
、requirejs-config.jsとThemeフォルダー(app / design / frontend / Vendor / Theme / requirejs-config.js)にスクリプトがあります。これでいい?問題は、スクリプトを複数の異なる場所から呼び出すことです。
templates\product\widget\content\grid.phtml
は、テンプレートが呼び出されたときにのみ影響します。
custom_js.phtml
含まれるコードの実行後に実行される関数が通常のコールバックとして扱われると思いますcustomscript.js
か?またはcustomscript.js
、関数内から宣言されたコードを実行する必要がありcustom_js.phtml
ますか?
after.body.start
に変更する必要があると私がなぜ疑問に思っていますbefore.body.end
か?
Requirejs-configファイル: app / code / Vendor / Module / view / frontend / requirejs-config.js
var config = {
paths: {
'myfile': "Vendor_Modulename/js/myfile"
},
shim: {
'myfile': {
deps: ['jquery']
}
}
}
あなたのjsファイルは次の場所にあるはずです:app / code / Vendor / Module / view / frontend / web / js / myfile.js
これで、以下の方法でテンプレートファイルのどこでも使用できます。
<srcipt>
require(["jquery","myfile"],function($,myfile){
$(document).ready(function(){
//call your js here...
})
})
</script>
を使用した簡単なバージョンがありdeps
ます。requirejs-config.jsの依存関係は、requirejs自体をロードするときに(ショップ内のどこにでも)ファイルをロードします。requirejs-config.jsの例を次に示します。
var config = {
// When load 'requirejs' always load the following files also
deps: [
'common-js'
],
// Library file path.
paths: {
'common-js': 'js/Your-File-Name'
},
// The rest of your config file ...
Magento devの優れた実践であるKhoaの推奨策の代替アプローチとして、次のようにJavaScriptを.phtmlファイルに貼り付けることができます。
<srcipt>
require(["jquery"],function($){
$(document).ready(function(){
your script here...
})
});
</script>
次に、Khoaの回答に記載されているように、default.xmlからphtmlファイルをリンクしますが、before.body.endに追加することをお勧めします。そして、次のようにcopyright.phtml内からJSスクリプトを呼び出します。
<script>
jQuery(document).ready(function($) {
..call your script here ..
});
</script>
copyright.phtmlは、チェックアウトなどのフッターが省略されているページでも、すべてのページに読み込まれます。