结帐页面上的淘汰赛 Js magento 2
Posted
技术标签:
【中文标题】结帐页面上的淘汰赛 Js magento 2【英文标题】:Knockout Js magento 2 on checkout page 【发布时间】:2020-08-10 00:39:35 【问题描述】:我已经创建了模板 .html
<div data-bind="foreach: productOverGift, visible: expanded" class="free-gift-oder75">
<div class="product-over-info">
<input type="radio" class="product-information" name="productId" data-bind="attr: value: id, id:'product_over_'+id, click: $parent.selectItem(id, sku)"/>
<image data-bind="attr: src: image" class="product-image" style="width: 50px; height: 50px"/>
<span data-bind="text: name"></span>
</div>
</div>
并创建文件js
define(
[
'jquery',
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/model/quote',
'mage/url',
'mage/storage',
'Magento_Checkout/js/action/get-totals',
'mage/translate',
'Magento_Ui/js/model/messageList',
'Magento_Checkout/js/model/full-screen-loader'
],
function (
$,
ko,
Component,
_,
stepNavigator,
customer,
quote,
urlBuilder,
storage,
getTotal,
$t,
messageList,
startLoader
)
'use strict';
/**
* check-login - is the name of the component's .html template
*/
return Component.extend(
defaults:
template: 'Custom_Checkout/promotion'
,
//add here your logic to display step,
isVisible: ko.observable(true),
isLogedIn: customer.isLoggedIn(),
//step code will be used as step content id in the component template
stepCode: 'promotion-step',
//step title value
stepTitle: 'Logging Status',
productOverGift: ko.observableArray([]),
freeGiftWithPurchase: ko.observableArray([]),
productImageSelected: ko.observable(""),
productNameSelected: ko.observable(""),
idProductSelected: ko.observable(""),
quoteId: ko.observable(""),
isChecked: ko.observable(true),
skuProductSelected: ko.observable(""),
messageError: ko.observable(""),
message: ko.observable(""),
expanded: ko.observable(true),
arrowClass: ko.observable('fa fa-angle-double-up'),
arrowTitle: ko.observable($t('Shrink')),
dataShippingPnr: ko.observable(""),
dataShippingFullName: ko.observable(""),
dataShippingEmail: ko.observable(""),
dataSegmentDisplay: ko.observable(""),
isCheckedOver: ko.observable(true),
isDeleted: false,
/**
*
* @returns *
*/
initialize: function ()
this._super();
//register your step
stepNavigator.registerStep(
this.stepCode,
//step alias
null,
this.stepTitle,
//observable property with logic when display step or hide step
this.isVisible,
_.bind(this.navigate, this),
/**
* sort order value
* 'sort order value' < 10: step displays before shipping step;
* 10 < 'sort order value' < 20 : step displays between shipping and payment step
* 'sort order value' > 20 : step displays after payment step
*/
15
);
return this;
,
/**
* select radio
* @param id
* @param quoteId
* @param sku
*/
selectItem: function (id, sku)
var self = this;
var listProduct = this.productOverGift();
var itemChecked = $('#product_over_' + id).is(":checked");
if (itemChecked)
if (listProduct.length > 0)
listProduct.forEach(function (item, i)
if (item.id === id)
self.productImageSelected(item.image);
self.productNameSelected(item.name);
self.idProductSelected(item.id);
self.skuProductSelected(item.sku);
);
// self.deleteItemInCart(oldProductSku, this.quoteId());
// self.saveProductToOrder(id, this.quoteId(), sku);
,
);
);
我有一个函数“selectItem()”在循环中用于输入 => 单击(选中)标记后将调用“selectItem”函数。但是现在“selectItem”函数总是在页面加载时被调用,这不是我想要的。我只想在单击输入后调用它。 请帮我。 谢谢
【问题讨论】:
【参考方案1】:目前,您正在 HTML 中执行该函数,而不是将其引用绑定到点击处理程序。这会在页面加载时执行:
click: $parent.selectItem(id, sku)
相反,您应该将对函数的引用绑定到点击处理程序:
click: $parent.selectItem
访问id
和sku
属性的方法有很多种,但最简单的方法可能是意识到传递给点击处理程序的第一个参数是forEach: productOverGift
中的当前模型。所以重写你的selectItem
函数的签名,看起来像这样:
selectItem: function (data)
let id = data.id
let sku = data.sku
...
这应该让它为你工作。但是,您可能想考虑查看 checked
绑定。这可以帮助您整理代码并以更类似于 KO 的方式进行操作,但这不是必需的。如果您有兴趣解决这个问题,那么您可以将收音机的值直接绑定到 itemChecked
属性,并使用观察者来运行您的 selectItem 代码:
produceViewModel.itemChecked.subscribe(function(newValue)
if (newValue)
// select product image here, etc
);
或者productImage
选择属性可以是从itemChecked
派生的计算结果。
这将摆脱您代码中的 jQuery 依赖,并开始以更具反应性的 KO 风格来完成这一切,但要做到这一点,您需要将一些代码从您的 $parent
中移出并移到产品中虚拟机。
【讨论】:
没问题。如果这对您有用,您可以将答案标记为已接受吗?只是它可以帮助其他 SO 用户,无论是提问还是回答,都知道该问题有一个有效的答案。以上是关于结帐页面上的淘汰赛 Js magento 2的主要内容,如果未能解决你的问题,请参考以下文章
Magento - 在结帐页面注册,然后通过 PayPal 付款