0

I have added a new step in one-page checkout after the shipping step. I need to fetch the data from the shipping form and bind it to the new form. The code for above is as following.

age-verify-view.js

define(
        [
            'ko',
            'uiComponent',
            'underscore',
            'Magento_Checkout/js/model/quote',
            'Magento_Checkout/js/model/step-navigator'
        ],
        function (
                ko,
                Component,
                _,
                quote,
                stepNavigator
                ) {
            'use strict';
            return Component.extend({
                defaults: {
                    template: 'Ktpl_LexisNexis/age-verify-view'
                },

                //add here your logic to display step,
                isVisible: ko.observable(false),

                /**
                 *
                 * @returns {*}
                 */
                initialize: function () {
                    this._super();
                    // register your step
                    stepNavigator.registerStep(
                            'verify_age',
                            null,
                            'Verify Age',
                            this.isVisible,
                            _.bind(this.navigate, this),
                            15
                            );

                    return this;
                },

                /**
                 * The navigate() method is responsible for navigation between checkout step
                 * during checkout.
                 */
                navigate: function () {
                    this.isVisible(true);
                },

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

age-verify-form.js

define([
    'jquery',
    'ko',
    'uiComponent',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/checkout-data',
    'Magento_Customer/js/customer-data',
    'Ktpl_LexisNexis/js/action/VerifyAction'
], function ($, ko, Component, quote, checkoutData, customerData, verifyAction) {
    'use strict';
    var isLoading = ko.observable(false);
    var isVarified = ko.observable(false);
    var dob = ko.observable(new Date());
    var countryData = ko.observable(customerData.get('directory-data'));
    var shippingAddress = ko.observable(quote.shippingAddress());
    return Component.extend({
        defaults: {
            template: 'Ktpl_LexisNexis/age-verify-form'
        },
        isLoading: isLoading,
        isVerified: isVarified,
        dob: dob,
        countryData : countryData(),
        shippingAddress: shippingAddress,

        //  address: address(),
        /**
         * 
         * @returns {undefined}
         */
        verify: function () {
            var form = '#age-verify-form',
                    formDataArray = $(form).serializeArray(),
                    verifyFormData = {};
            if (this.validate(form)) {
                formDataArray.forEach(function (entry) {
                    verifyFormData[entry.name] = entry.value;
                });
                isLoading(true);
                verifyAction(verifyFormData,isLoading,isVarified);
            }
        },
        /**
         * 
         * @returns {undefined}
         */
        cancel: function () {
            if (this.validate()) {
                isLoading(true);
            }
        },
        /**
         * 
         * @param {type} form
         * @returns {Boolean}
         */
        validate: function (form) {
            return $(form).validation() && $(form).validation('isValid');
        }
    });
});

age-verify-view.html

<!--The 'step_code' value from the .js file should be used-->
<li id="step_code" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Verify Age'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">
        <div id="age-verify" class="age-verify-form">
            <!-- ko foreach: getRegion('age-verify-form') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
            <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>

age-veirfy-form.html

<div class="age-verify-option-content" data-role="content">
    <form class="form age-verify-form"  id="age-verify-form" novalidate="novalidate">
        <div class="fieldset address" id="co-age-verify" data-bind="blockLoader: isLoading">
            <pre data-bind="text: shippingAddress()"></pre>
            <div class="field">
                <label class="label" for="firstname">
                    <span data-bind="i18n: 'First Name'">First Name</span>
                </label>
                <div class="control">
                    <input class="input-text" 
                           type="text"
                           name="firstname"
                           id="firstname"
                           title="First Name"
                           data-validate="{'required-entry':true}"
                           data-bind="attr:{placeholder: $t('First Name')} "/>
                </div>
            </div>
            <div class="field">
                <label class="label" for="lastname">
                    <span data-bind="i18n: 'Last Name'">Last Name</span>
                </label>
                <div class="control">
                    <input class="input-text" 
                           type="text"
                           name="lastname"
                           id="lastname"
                           title="Last Name"
                           data-validate="{'required-entry':true}"
                           data-bind="attr:{placeholder: $t('Last Name')} "/>
                </div>
            </div>
            <div class="field">
                <label class="label" for="dob">
                    <span data-bind="i18n: 'Date of Birth'">Date of Birth</span>
                </label>
                <div class="control">
                    <input type="text"
                           name="dob"
                           id="dob"
                           title="Date of Birth"
                           data-validate="{'required-entry':true}"
                           data-bind="value: dob,datepicker: dob,datePickeroptions: {
                                        dateFormat: 'dd/M/yy',
                                        changeMonth: true,
                                        changeYear: true,
                                        maxDate: new Date(),
                                        datePickerPlaceholder: 'dd/M/yy' 
                                       }" />
                </div>
            </div>
            <div class="field">
                <label class="label" for="street-1">
                    <span data-bind="i18n: 'Address'">Address</span>
                </label>
                <div class="control">
                    <input type="text"
                           name="street[0]"
                           id="street-1"
                           title="Street Address"
                           data-validate="{'required-entry':true}"
                           data-bind="attr:{placeholder: $t('Street Address')}"/>
                </div>
            </div>
            <div class="field">
                <label class="label" for="street-2">
                    <span data-bind="i18n: 'Address (Line 2)'">Address (Line 2)</span>
                </label>
                <div class="control">
                    <input type="text"
                           name="street[1]"
                           id="street-2"
                           title="Address (Line 2)"
                           data-bind="attr:{placeholder: $t('Address (Line 2)')}"/>
                </div>
            </div>
            <div class="field">
                <label class="label" for="city">
                    <span data-bind="i18n: 'City'">City</span>
                </label>
                <div class="control">
                    <input type="text"
                           name="city"
                           id="city"
                           title="City"
                           data-bind="attr:{placeholder: $t('City')}"/>
                </div>
            </div>
            <div class="field">
                <label class="label" for="state">
                    <span data-bind="i18n: 'State'">State</span>
                </label>
                <div class="control">
                    <input type="text"
                           name="state"
                           id="state"
                           title="State"
                           data-bind="attr:{placeholder: $t('State')}"/>
                </div>
            </div>
            <div class="field">
                <label class="label" for="postcode">
                    <span data-bind="i18n: 'Zip/Postal Code'">Zip/Postal Code</span>
                </label>
                <div class="control">
                    <input type="text"
                           name="postcode"
                           id="postcode"
                           title="Zip/Postal Code"
                           data-bind="attr:{placeholder: $t('Zip/Postal Code')}"/>
                </div>
            </div>
            <div class="field">
                <label class="label" for="country">
                    <span data-bind="i18n: 'Country'">Country</span>
                </label>
                <div class="control">
                    <input type="text"
                           name="country"
                           id="country"
                           title="Country"
                           data-bind="attr:{placeholder: $t('Country')}"/>
                </div>
            </div>
            <div class="actions-toolbar">
               <div class="primary">
                  <!-- ko ifnot: isVerified() -->
                  <button class="action action-apply" type="submit" data-bind="'value': $t('Verify Age'), click: verify">
                     <span><!-- ko i18n: 'Verify Age'--><!-- /ko --></span>
                  </button>
                  <!-- /ko -->
                  <!-- ko if: isVerified() -->
                  <button class="action action-cancel" type="submit" data-bind="'value': $t('Cancel Verify'), click: cancel">
                     <span><!-- ko i18n: 'Cancel Verify'--><!-- /ko --></span>
                  </button>
                  <!-- /ko -->
               </div>
            </div>
        </div>
    </form>
</div>

As can be seen, i have used quote.shippingAddress() as a ko.observable, but when the shipping address is already there and selected from the list rather then filling the form, it returns null, how can we make sure that we always have the shippingAddress available in the age-verify-form.js?

Also i am not sure how to bind the data from ko.observable(quote.shippingAddress()) in the html file for the form.

Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.