Magento 2.3.5按钮点击触发myClick报function not defined错误如何解决
问题根因
Magento 2 结账页面基于Knockout.js框架构建,你修改的default.html属于Knockout模板:
- 模板内的原生
onclick绑定只能访问window全局作用域下的函数,你定义的myClick如果未挂载到window对象上,就会报未定义错误 - 你同时在按钮上声明了Knockout的
click="selectAddress"绑定和原生onclick,会存在逻辑执行冲突隐患
解决方案
临时测试方案
仅用于快速验证函数调用逻辑,不推荐正式环境使用:
将你的自定义函数挂载到window全局对象即可:
window.myClick = function(){ console.log("aa"); window.location.reload(); }
正式开发方案(符合Magento 2开发规范,适合后续扩展业务逻辑)
不需要用原生onclick,直接扩展对应ViewModel添加自定义方法即可:
- 在你的自定义模块下新建
view/frontend/requirejs-config.js,声明组件混写:
var config = { config: { mixins: { 'Magento_Checkout/js/view/shipping-address/list': { '你的模块标识/js/mixin/shipping-address-list-mixin': true } } } };
- 新建混写文件
view/frontend/web/js/mixin/shipping-address-list-mixin.js,添加自定义逻辑:
define([], function () { 'use strict'; return function (ShippingAddressList) { return ShippingAddressList.extend({ // 自定义选地址方法 customSelectAddress: function (address) { // 调用原生选地址逻辑,保证原有功能正常 this.selectAddress(address); // 此处可添加你的自定义业务逻辑 console.log("自定义逻辑执行"); // 无需 reload 即可刷新税费和结账摘要的内置实现 require([ 'Magento_Checkout/js/model/quote', 'Magento_Checkout/js/model/shipping-service' ], function(quote, shippingService) { shippingService.isLoading(true); quote.shippingAddress(address); shippingService.isLoading(false); }); } }); }; });
- 修改
default.html内的按钮绑定,删除原生onclick,替换为自定义Knockout绑定:
<button type="button" click="customSelectAddress" class="action action-select-shipping-item"> <span translate="'Ship Here'"></span> </button>
修改完成后执行bin/magento setup:static-content:deploy部署静态资源即可生效。
内容的提问来源于stack exchange,提问作者Francisco Fernandes
相关产品推荐
相关产品推荐

