Magento 2にjQueryライブラリを追加する

サードパーティの開発者はどのようにしてjQueryライブラリをMagento 2に追加できますか？

Magento 2のフロントエンドテーマにはjQueryのバージョンが含まれていますが、jQueryオブジェクトはグローバル名前空間ですぐには使用できません。これは、Magento 2がRequireJSを使用してjQueryをプルし、RequireJSが必要になるまでモジュールファイルをロードしないためです。

これは、jQueryプラグインの問題を示しています。通常、このようなHTMLのプラグインを含めます

<script type="text/javascript" src="http://magento-1-9-2-2.dev/js/commercebug/jquery-ui-1.8.custom/js/jquery.cookie.js"></script>

ただし、これはMagento 2では不可能jquery.cookie.jsです。ファイルはグローバルjQueryオブジェクトを使用してjQueryプラグインを定義するため、Magento 2ではjQuery is not definedエラーで失敗します。

フロントエンドの開発者は、Magento 2のフロントエンドアプリケーションに標準のjqueryプラグインライブラリをどのように含めるべきですか？

requirejs-config.js Companyname \ Modulename \ view \ frontend \ requirejs-config.js addを作成します

var config = {
   map: {
       '*': {
           bannerslider: 'Companyname_Modulename/js/flexslider',
       }
   }
};

モジュールCompanyname \ Modulename \ view \ frontend \ web \ js \ flexslider.jsのJsファイル
次の構文を使用してjquery libを追加します。

<script type="text/javascript">
require(['jquery','bannerslider'],function($){
    $(window).load(function() {
        $('.flexslider-8').flexslider({
            animation: "fade",
            controlNav: "thumbnails",
            slideshowSpeed: 2000,
            minItems: 2,
            maxItems: 4
        });
    });
});
</script>

二番目の例

<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert('jquery working');
        });
    });
</script>

Magento Docsを引用します。

サードパーティプラグインへの依存関係を構築するには、次の構成ファイルでシムを指定します。

requirejs-config.jsで：

var config = {
  "shim": {
     "3-rd-party-plugin": ["jquery"]
    }
  };

次に、テーマまたはモジュールにサードパーティのプラグインコードを含めます。「web / js / 3-rd-party-plugin.js」は次のようになります。

!(function($){
  // plugin code
  // where $ == jQuery
})(jQuery);

プラグインの作成者が更新したとき、またはcdnを使用したときにjsファイルを置き換えるだけで、プラグインファイルを変更する必要がないため、このソリューションは有利です。

最適なことは、Magento 2 モジュールまたはテーマを使用して、そのようなプラグイン/ライブラリを含めることです。これは推奨される方法であり、ベストプラクティスです。

方法1>テーマ：javascript / jqueryライブラリがテーマに関連している場合（システムのルックアンドフィールを変更するため）。

• カスタムコンポーネントのソースファイルを次の場所のいずれかに配置します
  [theme_dir] / web / js /
• requirejs-config.jsファイルを[theme_dir]に配置します
  

方法2>モジュール：javascript / jqueryライブラリが特定のビジネス機能に関連しているか、Magento機能を処理している場合。モジュール内に配置する必要があります。

• カスタムコンポーネントのソースファイルを次の場所のいずれかに配置します
  [module_dir] / view / frontend / web / js /

• あなたの場所requirejs-config.jsのの中のファイルを
  [module_dir] /ビュー/フロントエンド/

Magento 2では、デフォルトのMagentoコンポーネントおよびウィジェットのソースコードを変更しないことを強くお勧めします。すべてのカスタマイズは、カスタムモジュールまたはテーマに実装する必要があります。

アラン、jQuery UIウィジェットファクトリには特別なケースがあります。AMDと互換性を持たせるには、次のリンクを確認してください。

http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/