Magento 2.3 How to pass custom input field data to the sidebar Summary

Question

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.

Answer 1

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-->

Answer 2

You can use the extension attribute feature and store it to the quote table and can get the value of the attribute in the sidebar.

To know more about extension attribute use the below link

How to use extension_attributes in Magento2