require-config.jsを使用して、すべてのページで必要なファイルをロードします


9

require-config.jsカスタムテーマでの使用方法は知っていますがmyfile.js、すべてのページでカスタムJavaScriptファイル()を使用したいと思います。追加する必要があるディレクトリrequire-config.jsとその使用方法を教えてください。

Magentoの公式ページは参照しないでください。


layout xml headタグ内でjsを直接呼び出すことができ、各ページにjsが含まれます。
Rakesh Jesadiya 16

お返事ありがとうございます。しかし、Magento 1のようにrequire-configを使用してファイルをロードしたい場合はどうなりますか?
Anitr、16

また、magento 2でサポートされているため、module-themeフォルダーのlayout / default_head_block.xmlファイルをチェックできます
Rakesh Jesadiya

はい、知っています。しかし、私はrequire-config.jsを正しい方法で使用したいと思います。
Anitr、16

回答:


17

requirejs-config.jsJavaScriptリソースマッピングの作成に使用します。すべての必要な構成は次の場所にあり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)にスクリプトがあります。これでいい?問題は、スクリプトを複数の異なる場所から呼び出すことです。
Anitr

スクリプトtempla‌​tes\product\widget\c‌​ontent\grid.phtmlは、テンプレートが呼び出されたときにのみ影響します。
Khoa TruongDinh 2016

はい、大丈夫です-問題はその問題にあります:magento.stackexchange.com/questions/149019/…、この問題がrequirejs呼び出しに何らかの形で関連しているのではないかと思っています。
Anitr

@KhoaTruongDinh私はこれに少し混乱しています。私はまだ適切にテストしていませんが、にcustom_js.phtml含まれるコードの実行後に実行される関数が通常のコールバックとして扱われると思いますcustomscript.jsか?またはcustomscript.js、関数内から宣言されたコードを実行する必要がありcustom_js.phtmlますか?
ジョシュア洪水

1
@KhoaTruongDinhまた、Ivetaの回答であなたの名前をafter.body.startに変更する必要があると私がなぜ疑問に思っていますbefore.body.endか?
ジョシュア洪水

5

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>

それは正解です。しかし、モジュールに依存せずに、テーマフォルダーでそれを使用する方法を誰かが知っているかどうか尋ねました-1つのモジュールだけでなく、ページ全体にロードする必要があります。
Anitr 2016

テーマフォルダーでも使用できます。上記のスクリプトを呼び出すだけで、jsを使用できます
Rakesh Jesadiya

問題がある場合はお知らせください
Rakesh Jesadiya

うまくいきました。しかし、それでもまだ、私はいくつかの他の事に問題が生じています:magento.stackexchange.com/questions/149019/...
Anitr

こんにちは、最初のステップファイルの配置場所を教えてください。
Priya

2

を使用した簡単なバージョンがあり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 ...

1

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は、チェックアウトなどのフッターが省略されているページでも、すべてのページに読み込まれます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.