You can display Order Summary like Order total, subtotal, discount, and shipping charges on the first step (Shipping step) Of checkout page.
By Default, Order Summary in Shipping step is Disabled and it will be loaded through the abstract-total.js file of Checkout module.
You need to create mixins for abstract-total.js file to show order summary in the shipping step.
isFullMode() function is responsible for show/hide Order summary on first step of checkout page.
You need to create mixins for js file, Create requirejs-config.js file to define mixins definition,
Path: app/code/Jesadiya/Checkout/view/frontend/requirejs-config.js
var config = {
config: {
mixins: {
/**
* Mixins for rendering order summary in the shipping step of checkout.
*/
'Magento_Checkout/js/view/summary/abstract-total': {
'Jesadiya_Checkout/js/view/summary/abstract-total-mixins': true
}
}
}
};
Where Jesadiya is Packagename and Checkout is your module name under the app/code.
path:
app/code/Jesadiya/Checkout/view/frontend/web/js/view/summary/abstract-total-mixins.js
/**
* Abstract Total Mixin
*/
define([], function () {
'use strict';
/**
* Mixin for abstract-total UI Component.
*/
var mixin = {
/**
* Show Order Summary in the Shipping Step of Checkout SideBar
*
* @return {boolean}
*/
isFullMode: function () {
if (!this.getTotals()) {
return false;
}
return true;
}
};
return function (target) {
return target.extend(mixin);
};
});
Now Clear the cache and Check the first step of the Checkout page, you can see Order Summary Sidebar in Right side of Shipping step of the Checkout page.