1

I want merge email fields, shipping address, shipping methods and payment methods in one custom step. I added step and email fields to it without any problems, but my custom address renderer don't shows in my custom step. I trying renderer as advised in magento docs https://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_address.html but it still don't work. Here is my files: Newtime/Mymodule/view/frontend/layout/checkout_index_index.xml

<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">
                                            <!-- The new step you add -->
                                            <item name="my-new-step" xsi:type="array">
                                                <item name="component" xsi:type="string">Newtime_Mymodule/js/view/my-step-view</item>
                                                <item name="sortOrder" xsi:type="string">1</item>
                                                <item name="children" xsi:type="array">
                                                    <item name="customer-email" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item>
                                                        <item name="displayArea" xsi:type="string">customer-email</item>
                                                        <item name="tooltip" xsi:type="array">
                                                            <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item>
                                                        </item>
                                                        <item name="children" xsi:type="array">
                                                            <item name="before-login-form" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="displayArea" xsi:type="string">before-login-form</item>
                                                                <item name="children" xsi:type="array">
                                                                    <!-- before login form fields -->
                                                                </item>
                                                            </item>
                                                            <item name="additional-login-form-fields" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="displayArea" xsi:type="string">additional-login-form-fields</item>
                                                                <item name="children" xsi:type="array">
                                                                    <!-- additional login form fields -->
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                     <!-- Declare the component that registers the shipping address and rates processors -->
                                                    <item name="custom-address-provider" xsi:type="array">                                                      
                                                        <item name="component" xsi:type="string">Newtime_Mymodule/js/view/shipping-address-renderer-reg</item>
                                                    </item>
                                                    <!-- Declare the component that renders the shipping address -->
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="rendererTemplates" xsi:type="array">
                                                                <item name="newtimeShippingAddress" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Newtime_Mymodule/js/view/shipping-address-renderer</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>                                                 
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

Newtime/Mymodule/view/frontend/web/js/view/shipping-address-renderer-reg.js

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/shipping-rate-service',
        'Newtime_Mymodule/js/model/shipping-address-rate',
        'Magento_Checkout/js/model/shipping-save-processor',
        'Newtime_Mymodule/js/model/shipping-address-save'
    ],
    function (
        Component,
        shippingRateService,
        customShippingRateProcessor,
        shippingSaveProcessor,
        customShippingSaveProcessor
    ) {
        'use strict';
        /** Register rate processor */
        shippingRateService.registerProcessor('newtimeShippingAddress', customShippingRateProcessor);       
        ///** Register save shipping address processor */
        shippingSaveProcessor.registerProcessor('newtimeShippingAddress', customShippingSaveProcessor);     
        /** Add view logic here if needed */
        return Component.extend({});
    }
);

Newtime/Mymodule/view/frontend/web/js/model/shipping-address-rate.js

define(
    [
        'Magento_Checkout/js/model/resource-url-manager',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/shipping-service',
        'Magento_Checkout/js/model/shipping-rate-registry',
        'mage/storage',
        'Magento_Checkout/js/model/error-processor',
        // additional dependencies
    ],
    function (quote, shippingService, rateRegistry, storage, errorProcessor, resourceUrlManager) {
        'use strict';
        return {
            getRates: function(address) {
                var cache = rateRegistry.get(address.getKey());
                if (cache) {
                    shippingService.setShippingRates(cache);
                } else {
                    shippingService.isLoading(true);
                    storage.post(
                        resourceUrlManager.getUrlForEstimationShippingMethodsByAddressId(),
                        JSON.stringify({
                            addressId: address.customerAddressId
                        }),
                        false
                    ).done(
                        function (result) {
                            rateRegistry.set(address.getKey(), result);
                            shippingService.setShippingRates(result);
                        }
                    ).fail(
                        function (response) {
                            shippingService.setShippingRates([]);
                            errorProcessor.process(response);
                        }
                    ).always(
                        function () {
                            shippingService.isLoading(false);
                        }
                    );
                }
            }
        };
    }
);

Newtime/Mymodule/view/frontend/web/js/model/shipping-address-save.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/resource-url-manager',
    'mage/storage',
    'Magento_Checkout/js/model/payment-service',
    'Magento_Checkout/js/model/payment/method-converter',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/full-screen-loader',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/model/shipping-save-processor/payload-extender'
], function (
    ko,
    quote,
    resourceUrlManager,
    storage,
    paymentService,
    methodConverter,
    errorProcessor,
    fullScreenLoader,
    selectBillingAddressAction,
    payloadExtender
) {
    'use strict';

    return {
        /**
         * @return {jQuery.Deferred}
         */
        saveShippingInformation: function () {
            var payload;

            if (!quote.billingAddress()) {
                selectBillingAddressAction(quote.shippingAddress());
            }

            payload = {
                addressInformation: {
                    'shipping_address': quote.shippingAddress(),
                    'billing_address': quote.billingAddress(),
                    'shipping_method_code': quote.shippingMethod()['method_code'],
                    'shipping_carrier_code': quote.shippingMethod()['carrier_code']
                }
            };

            payloadExtender(payload);

            fullScreenLoader.startLoader();

            return storage.post(
                resourceUrlManager.getUrlForSetShippingInformation(quote),
                JSON.stringify(payload)
            ).done(
                function (response) {
                    quote.setTotals(response.totals);
                    paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
                    fullScreenLoader.stopLoader();
                }
            ).fail(
                function (response) {
                    errorProcessor.process(response);
                    fullScreenLoader.stopLoader();
                }
            );
        }
    };
});

Newtime/Mymodule/view/frontend/web/js/view/shipping-address-renderer.js

define([
    'ko',
    'uiComponent',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/model/quote'
], function(ko, Component, selectShippingAddressAction, quote) {
    'use strict';
    return Component.extend({
        defaults: {
            template: 'Newtime_Mymodule/shipping-address-template'
        },

        initProperties: function () {           
            this._super();
            this.isSelected = ko.computed(function() {
                var isSelected = false;
                var shippingAddress = quote.shippingAddress();
                if (shippingAddress) {
                    isSelected = shippingAddress.getKey() == this.address().getKey();
                }
                return isSelected;
            }, this);

            return this;
        },

        /** Set selected customer shipping address  */
        selectAddress: function() {
            selectShippingAddressAction(this.address());
        },

        /** additional logic required for this renderer  **/

    });
});

Now my checkout step looks like that: enter image description here

What am i doing wrong?

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.