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