Question

我在发货和结算步骤之间添加了一个自定义结帐步骤，称为分拣步骤，客户可以选择发货日期时间并选择他们的首选商店进行取货，这将再次基于用户选择的邮政编码。这里的问题是我可以通过布局处理器添加单选按钮，但是所有步骤都可以看到，所以我想在HTML模板中添加它，但我不知道如何从Knockout获取数据。 JS？结帐自定义步骤：

以下是代码＆amp;使用的文件

==========================================
checkout_index_index.xml
==========================================



<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
      <referenceBlock name="checkout.root">
         <arguments>
            <argument name="jsLayout" xsi:type="array">
               <item name="components" xsi:type="array">
                  <item name="checkout" xsi:type="array">
                     <item name="children" xsi:type="array">
                        <item name="steps" xsi:type="array">
                           <item name="children" xsi:type="array">
                              <item name="pickup-store-step" xsi:type="array">
                                 <item name="component" xsi:type="string">uiComponent</item>
                                 <item name="sortOrder" xsi:type="string">2</item>
                                 <item name="children" xsi:type="array">
                                    <item name="alldetails" xsi:type="array">
                                       <item name="component" xsi:type="string">Namespace_Module/js/view/pickup-store-step</item>
                                       <item name="children" xsi:type="array">
                                          <item name="pickup_details" xsi:type="array">
                                             <item name="component" xsi:type="string">uiComponent</item>
                                             <item name="sortOrder" xsi:type="string">10</item>
                                             <item name="children" xsi:type="array" />
                                          </item>
                                          <item name="delivery_date" xsi:type="array">
                                             <item name="component" xsi:type="string">SR_DeliveryDate/js/view/delivery-date-block</item>
                                             <item name="sortOrder" xsi:type="string">20</item>
                                          </item>
                                       </item>
                                    </item>
                                 </item>
                              </item>
                           </item>
                        </item>
                     </item>
                  </item>
               </item>
            </argument>
         </arguments>
      </referenceBlock>
   </body>
</page>



==========================================
pickup-store-step.js
==========================================
define(
    [
    'jquery',
    'underscore',
    'uiComponent',
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/model/payment-service',
    'Magento_Checkout/js/model/payment/method-converter',
    'Magento_Checkout/js/action/get-payment-information',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'mage/translate',
    'Magento_Customer/js/model/customer'
    ],
    function (
        $,
        _,
        Component,
        ko,
        quote,
        stepNavigator,
        paymentService,
        methodConverter,
        getPaymentInformation,
        checkoutDataResolver,
        $t,
        customer
    ) {
        'use strict';
        /**
        * check-login - is the name of the component's .html template
        */
        return Component.extend({
            defaults: {
                template: 'Namespace_Module/pickup-store-step'
            },

            //add here your logic to display step,
            isVisible: ko.observable(quote.isVirtual()),
            quoteIsVirtual: quote.isVirtual(),
            isLogedIn: customer.isLoggedIn(),
            //step code will be used as step content id in the component template
            stepCode: 'pickup',
            //step title value
            stepTitle: 'Pickup Details',

            /**
            *
            * @returns {*}
            */
            initialize: function () {
                this._super();
                stepNavigator.registerStep(
                    this.stepCode,
                    null,
                    this.stepTitle,
                    this.isVisible,
                    _.bind(this.navigate, this),
                    15
                );

                return this;
            },

            navigate: function () {
                var self = this;

                getPaymentInformation().done(function () {
                    self.isVisible(true);
                });
            },

            /**
            * @returns void
            */
            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    }
);

==========================================
pickup-store-step.html
==========================================

<li data-bind="fadeVisible: isVisible, attr: { id: stepCode }">
<div class="step-title" data-bind="i18n: stepTitle" data-role="title"></div>

    <div id="checkout-step-title"
         class="step-content"
         data-role="content">
        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">

            <label class="label">Delivery Date</label>
            <div class="control">
                <input class="input-text" type="text" data-bind="datetimepicker: true"  name="delivery_date" id="delivery_date" readonly="true"/>
            </div>

            <label class="label">Comment</label>
            <div class="control">
                <textarea name="delivery_comment" id="delivery_comment"></textarea>
            </div>

            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>


==========================================
LayoutProcessorPlugin.php
==========================================
public function afterProcess(
            \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
            array  $jsLayout
        ) {
            $postcode = $this->_checkoutSession->getQuote()->getShippingAddress()->getPostcode();
            $args = array("postcode"=>$postcode);
            $stores = $this->findbakery->getNearByBakeryByCookie($args);
            $additionalOptions = [];
            $count = count($stores);
            $count = ($count > 5) ? 5 : $count ;
            for ($i = 0; $i < $count; $i++) 
            {
                if($i == 0)
                {
                    $additionalOptions[] = array(
                        'label' => $stores[$i]["store_name"],
                        'value' => $stores[$i]["gmapstrlocator_id"],
                        'checked' => "checked",
                    );
                }
                else
                {
                    $additionalOptions[] = array(
                        'label' => $stores[$i]["store_name"],
                        'value' => $stores[$i]["gmapstrlocator_id"],
                    );                    
                }
            }
            $jsLayout['components']['checkout']['children']['steps']['children']['pickup-store-step']['children']['pickup_store'] = [
                    'component' => 'Magento_Ui/js/form/element/checkbox-set',
                    'config' => [
                        'template' => 'ui/form/element/checkbox-set',
                        'options' => $additionalOptions,
                        'multiple' => false,
                        'id' => 'pickup_store'
                    ],
                    'label' => 'Pickup Store',
                    'provider' => 'checkoutProvider',
                    'visible' => true,
                    'validation' => [],
                    'sortOrder' => 200,
                    'id' => 'pickup_store'
                ];

            return $jsLayout;
        }

如何在自定义结帐步骤中添加动态单选按钮？

0 个答案: