当前位置: 首页>>技术解读>>正文


在Magento 2中扩展/覆盖JS

webfans 技术解读 , , , , 去评论

问题描述

由于Magento2使用RequireJS加载脚本,并且没有更多的皮肤文件夹,我遇到了一个问题:

如何用修改后的版本替换Magento的模块JS文件?

例如 – 属于Magento_Checkout扩展名的opc-checkout-method.js。据我所知,它没有在requirejs-config.js文件中定义。

我的扩展在Magento_Checkout之后加载,因此其requirejs-config.js数据附加在生成的requirejs-config文件的末尾。

或者我应该以其他方式做到这一点,而不是替换整个脚本?

最佳解决办法

没有更多皮肤文件夹,但您仍然可以使用主题。

作为一个概念证明,我用op-checkout-method.js和你这个例子。

前提条件:

  • 安装了Magento2-beta11

  • 默认主题有效(空白)。

  • pub/static文件夹中没有生成文件(删除pub /static /frontend文件夹)

操作:

  • op-checkout-method.js文件从其模块位置app/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.js复制到app/design/frontend/Magento/blank/Magento_Checkout/web/js/opc-checkout-method.js的空白主题

  • 编辑了克隆文件,并在mage.opcCheckoutMethod小部件的_create函数中添加了console.log('something')alert('something')

  • 清除浏览器缓存。

结果:

  • 结帐页面加载后,我会看到我的警报显示或控制台中记录的文本。

相关信息:

如果我从cli php dev/tools/Magento/Tools/View/deploy.php(发布静态资源的脚本)运行,我的新js文件将被放置在pub/static/frontend/Magento/blank/en_US/Magento_Checkout/js/opc-checkout-method.js

[编辑]

我找到了一种通过模块实现的方法。

[Namespace]/[Module]/view/frontend/requirejs-config.js中添加:

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/opc-checkout-method':'[Namespace]_[Module]/js/opc-checkout-method'
        }
    }
};

然后使用您的内容创建文件[Namespace]/[Module]/view/frontend/web/js/opc-checkout-method.js

出于测试目的,我克隆了原始文件,并在_create函数中再次添加了console.log

还记得为前端重新生成公共资源。

次佳解决办法

这是关于扩展/替换默认JS组件的官方文档:http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

欢迎反馈!

参考资料

本文由朵颐IT整理自网络, 文章地址: https://duoyit.com/article/2697.html,转载请务必附带本地址声明。