Knockout Js magento 2 на странице оформления заказа - PullRequest
Новая
       68

Knockout Js magento 2 на странице оформления заказа

0 голосов
/ 26 апреля 2020

У меня есть создать шаблон. 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"  width="120" height="150" alt="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 ( ) "используется в теге l oop для тега input => после нажатия (отмечен) вызовет функцию" selectItem ". Но сейчас функция selectItem всегда вызывается при загрузке страницы, и это не то, что я намеревался. Я просто хочу, чтобы он вызывался после нажатия на ввод. Пожалуйста, помогите мне. Спасибо

1 Ответ

0 голосов
/ 30 апреля 2020

В данный момент вы выполняете функцию в 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 Свойство selection может быть вычислено по производной от itemChecked.

Это избавит от зависимости jQuery в вашем коде и начнет делать все это в более реактивном стиле KO, но для этого вам понадобится необходимо переместить часть кода из $parent в виртуальную машину продукта.

...