结帐页面上的淘汰赛 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

访问idsku 属性的方法有很多种,但最简单的方法可能是意识到传递给点击处理程序的第一个参数是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 付款

如何将 CVV 字段添加到 Magento 结帐页面

Magento 2在结帐页面phtml中发送到支付网关之前获取订单ID?

Magento 2 如何使用淘汰赛 JS 自动填充文本字段

结帐 magento 1.5 中的小计和总计加倍

magento 将结帐付款重定向到第三方网关