0

I made my custom delivery method programmatically. It also appears in the Magento 2 admin config section. It is a multi-select field with values of days of the week. In my js file below:

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator',
        'Magento_Customer/js/model/customer'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator,
        customer
    ) {
        'use strict';
        /**
         * check-login - is the name of the component's .html template
         */
        return Component.extend({
            defaults: {
                template: 'A4_CustomDelivery/check-login'
            },

            //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: 'isLogedCheck',
            //step title value
            stepTitle: 'Delivery Date & Time',

            /**
             *
             * @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;
            },

            /**
             * The navigate() method is responsible for navigation between the checkout step
             * during checkout. You can add custom logic, for example, some conditions
             * for switching to your custom step
             */
            navigate: function () {

            },

            /**
             * @returns void
             */
            navigateToNextStep: function () {
                var customDate = window.checkoutConfig.a4date;
                var customTime = window.checkoutConfig.a4time;

                console.log(customDate);
                console.log(customTime);
                
                stepNavigator.next();
            }
        });
    }
);

When I use console.log to check its value, it returns those selected items successfully but I want to use its value in the option tag in an HTML file below:

<!--Use 'stepCode' as id attribute-->
<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">
        <p>The customer is <span data-bind="if: !isLogedIn">not</span> Logged-in</p>


        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
            <label for="deliverydate">Delivery Date:</label>
            <input type="date"
                   id="deliverydate"
                   name="deliverydate"
                   min="2022-08-10"
                   max="2050-08-31">
            <label for="appt">Select a time:</label>
            <input type="time" id="appt" name="appt">
            
            <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>

I want to make a select HTML field with option values obtained from window.checkoutConfig.a4date in this file. These are the values

Array(3) [ "Tuesday", "Friday", "Saturday" ] checkout-login-step.js:80:25

How can I achieve that?

1 Answer 1

0

Add these 2 lines in html file.

<select data-bind="event:{ change: getDate}, options: availableDates, selectedOptions: chosenDate"></select>
<select data-bind="event:{ change: getTime}, options: availableTimes, selectedOptions: chosenTime"></select>

and get values from the function window.checkoutConfig.<YOUR_VALUE> as follows:

let date = window.checkoutConfig.a4date;
    let dateValues = date.toString().split(",");
    if (dateValues[0] === '') {
        dateValues = [];
        dateValues.push('Tuesday');
}

let time = window.checkoutConfig.a4time;
    let timeValues = time.toString().split(",");
    if (timeValues[0] === '') {
        timeValues = [];
        timeValues.push('13:00-16:00');
    }

Finally, use these values in the functions created.

chosenDate : ko.observableArray([dateValues[0]]),
    availableDates : ko.observableArray(
        (dateValues)
    ),
    getDate:function (data, event) {
       //console.log(this.chosenDate());
    },

chosenTime : ko.observableArray([timeValues[0]]),
    availableTimes : ko.observableArray(
        (timeValues)
    ),
    getTime:function (data, event) {
       //console.log(this.chosenTime());
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.