添加自定義主題爲基礎的JavaScript到Magento 2.0

我試圖從magento.stackexchance找到答案，但沒有得到任何答覆，所以我想我在這裏嘗試。添加自定義主題爲基礎的JavaScript到Magento 2.0

我有Magento 1的經驗，並且在那裏添加一個自定義JavaScript文件非常直接和合乎邏輯。但是當涉及到Magento 2時，我無法弄清楚如何添加一個新的js文件，在那裏我會放一些影響頁面不同位置的代碼片段。例如，我想修改主頁上的「上次查看的項目」塊，並在那裏使用jQuery。然後也許另一個腳本可以在某處動態地改變一些CSS（例如）。我覺得在單個文件中做這件事非常舒服，就像我以前在Magento 1中所做的一樣。Magento的官方文檔也沒有幫助我，因爲它沒有提供足夠清晰的信息。我想這與requireJS有關，但有另一種方法嗎？如果不是，那麼有人可以解釋一下比Magento官方文檔更清楚一點嗎？ PS。嘗試添加我的custom.js文件頭阻塞槽xml，但後來我沒有得到訪問jQuery。

謝謝！

來源

2017-01-24 raulicious

在Magento2中，如果我的記憶爲我服務，則最後查看的項目將使用黑骨骼js進行處理。所以，如果你包含了一個常用的jQuery插件，並把一個onReady事件，它將無法正常工作，因爲黑客尚未生成HTML Magento2中的Javascript是相當複雜的，有需要js，有黑色的js和那裏是所有Magento2的東西。

首先您需要創建一個新的magento2小部件。這裏是一個例子：

define([ 
    'jquery', 
    'mage/translate', 
], function($, $t) { 
    "use strict"; 

    $.widget('myVendor.myWidgetName', { 

    options: { 
     buttonSelector: ['button[special]'], 
    }, 

    _create: function() { 
     this._bindClick(); 
    }, 

    _bindClick : function() { 
     var events = {}; 
     $.each(this.options.buttonSelector, function (index, value) { 
      events['click ' + value] = '_doMyStuff'; 
     }); 
     this._on(events); 
    }, 

    _doMyStuff : function (e) { 
     var self = this; 
     var element = $(e.currentTarget); 

     // DO your stuff here 
    }, 
    }); 


    return $.myVendor.myWidgetName; 
});

那麼這裏發生了什麼？ define函數是requireJs，我只需要jquery和magento的翻譯系統。如果還有一個widget，你需要使用lastViewed部件，以便要求js可以按照正確的順序加載內容。

這裏要說明的是define部分是requireJs，$ .widget部分是特定於magento的部分。

您還需要在requirejs配置文件中添加下面的行以讓知道需要在哪裏找到您的小部件。

var config = { 
    map: { 
     '*': { 
      myWidgetName:  'myVendor_myModule/js/my-widget-name', 
     } 
    } 
};

最後，我們將包括通過增加休耕代碼模板文件中的小部件：

<script type="text/x-magento-init"> 
    { 
     "body": { 
      "myWidgetName": [buttonSelector:'whatever'] 
     } 
    } 
</script>

來源

2017-01-24 08:33:35

這似乎太複雜..會嘗試，但選項很快。但現在我將Magento Blank主題中的theme.js複製到了我自己的主題中，並且令人驚訝的是它的工作原理就是這樣。我甚至可以用這種方式使用jQuery。（我的主題繼承了Magento Blank） – raulicious

添加自定義主題爲基礎的JavaScript到Magento 2.0

回答

相關問題