添加自定义主题为基础的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

回答

相关问题