Magento 2.3 – Pass Custom Input Field Data to Sidebar Summary

custom-fieldmagento2.3.0order-summaryshipping-methods

I have created a custom input field attribute which will show up once a specific custom Shipping method is selected.
I have it working already. And now I want the data from the custom input field to be passed on the Summary Order in the sidebar together(below) with the selected custom Shipping Method.

I have a look into these Reference 1 and Reference but what I want is to pass the custom input field data just below the selected custom Shipping Method.

Note: Data of the custom input field has been saved to the database already.

Best Answer

app/code/SR/MagentoStackExchange/view/frontend/requirejs-config.js


var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/shipping': {
                'SR_MagentoStackExchange/js/mixin/shipping-mixin': true
            },
            'Magento_Checkout/js/view/shipping-information': {
                'SR_MagentoStackExchange/js/mixin/shipping-information-mixin': true
            }
        }
    }
};

app/code/SR/MagentoStackExchange/view/frontend/web/js/mixin/shipping-mixin.js

Here you need to add your custom message to shipping method object. So change shippingMethod.custom_text = 'Custom Message'; your way.


define([
    'jquery',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/select-shipping-method'
], function ($, quote, selectShippingMethodAction) {
    'use strict';

    return function (target) {
        return target.extend({

            /**
             * Set shipping information handler
             */
            setShippingInformation: function () {
                var shippingMethod = quote.shippingMethod();
                // add your custom message here
                shippingMethod.custom_text = 'Custom Message';
                selectShippingMethodAction(shippingMethod);
                this._super();
            }
        });
    }
});

app/code/SR/MagentoStackExchange/view/frontend/web/js/mixin/shipping-information-mixin.js


define([
    'Magento_Checkout/js/model/quote'
], function (quote) {
    'use strict';

    return function (target) {
        return target.extend({
            defaults: {
                template: 'SR_MagentoStackExchange/shipping-information'
            },
            getCustomText: function () {
                var shippingMethod = quote.shippingMethod();
                return shippingMethod ? shippingMethod['custom_text'] : '';
            }
        });
    }
});

app/code/SR/MagentoStackExchange/view/frontend/web/template/shipping-information.html


<!-- ko if: (isVisible()) -->
<div class="shipping-information">
    <div class="ship-to">
        <div class="shipping-information-title">
            <span data-bind="i18n: 'Ship To:'"></span>
            <button class="action action-edit" data-bind="click: back">
                <span data-bind="i18n: 'edit'"></span>
            </button>
        </div>
        <div class="shipping-information-content">
            <!-- ko foreach: getRegion('ship-to') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
    </div>
    <div class="ship-via">
        <div class="shipping-information-title">
            <span data-bind="i18n: 'Shipping Method:'"></span>
            <button class="action action-edit" data-bind="click: backToShippingMethod">
                <span data-bind="i18n: 'edit'"></span>
            </button>
        </div>
        <div class="shipping-information-content">
            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
        </div>
        <div class="shipping-information-content">
            <span class="value" data-bind="text: getCustomText()"></span>
        </div>
    </div>
</div>
<!--/ko-->
Related Topic