Enable Order Summary in Magento 2 Checkout Shipping Step
Enable Order Summary in Magento 2 Checkout Shipping Step
By default, Magento 2 hides the order summary in the shipping step of checkout, only displaying it during the payment step. This can be inconvenient for customers who want to review their totals, discounts, and shipping costs earlier in the process.
Table Of Content
Enable Order Summary in Magento 2 Checkout Shipping Step
By default, Magento 2 displays the order summary—including totals, subtotals, discounts, and shipping charges—only during the payment step of checkout. To enhance user experience, you might want to show this summary during the shipping step as well. Here's how you can achieve this:
Steps to Display Order Summary in Shipping Step
To use this event, you'll need to create an observer in your custom module. Here's how:
Create a requirejs-config.js File>:
In your custom module, define a mixin to extend Magento's abstract-total.js.
- Path:
app/code/Vendor/Module/view/frontend/requirejs-config.js - Content:
var config = {
config: {
mixins: {
'Magento_Checkout/js/view/summary/abstract-total': {
'Vendor_Module/js/view/summary/abstract-total-mixin': true
}
}
}
};
Create the Mixin JavaScript File
This file modifies the isFullMode function to ensure the order summary appears during the shipping step.
- Path:
app/code/Vendor/Module/view/frontend/web/js/view/summary/abstract-total-mixin.js - Content:
define([], function () {
'use strict';
return function (Component) {
return Component.extend({
isFullMode: function () {
return this.getTotals() ? true : false;
}
});
};
});
Adjust Shipping Summary Display
To ensure the shipping amount updates correctly when selecting different shipping methods, override the shipping.js file.
- Path:
app/code/Vendor/Module/view/frontend/web/js/view/summary/shipping-mixin.js - Content:
define([
'Magento_Checkout/js/model/quote'
], function (quote) {
'use strict';
return function (Component) {
return Component.extend({
getValue: function () {
if (!this.isCalculated()) {
return this.notCalculatedMessage;
}
var shippingMethod = quote.shippingMethod();
var price = shippingMethod ? shippingMethod.amount : 0;
return this.getFormattedPrice(price);
}
});
};
});
Update requirejs-config.js to Include Shipping Mixin
Ensure the shipping mixin is recognized by updating your requirejs-config.js file.
- Content:
var config = {
config: {
mixins: {
'Magento_Checkout/js/view/summary/abstract-total': {
'Vendor_Module/js/view/summary/abstract-total-mixin': true
},
'Magento_Checkout/js/view/summary/shipping': {
'Vendor_Module/js/view/summary/shipping-mixin': true
}
}
}
};
Clear Cache and Deploy Static Content
After making these changes, clear Magento's cache and deploy static content to apply the updates.
- Commands:
php bin/magento cache:clean
php bin/magento setup:static-content:deploy
By following these steps, the order summary will be visible during the shipping step of the checkout process, providing customers with a comprehensive view of their order before proceeding to payment.
Tip
To enhance your eCommerce store’s performance with Magento, focus on optimizing site speed by utilizing Emmo themes and extensions. These tools are designed for efficiency, ensuring your website loads quickly and provides a smooth user experience. Start leveraging Emmo's powerful solutions today to boost customer satisfaction and drive sales!
FAQs
Why Is the Order Summary Not Visible in the Shipping Step of Checkout?
By default, Magento 2 hides the order summary in the shipping step. It only appears during the payment step. To show it earlier, you need to modify the checkout configuration.
How Can I Enable the Order Summary in the Shipping Step?
You need to create a mixin for abstract-total.js and define it in a requirejs-config.js file inside your custom module.
What File Should I Modify to Display the Order Summary?
You need to modify abstract-total.js by adding a mixin in requirejs-config.js and placing the logic inside abstract-total-mixins.js.
How Do I Define the Mixin in requirejs-config.js?
var config = {
config: {
mixins: {
'Magento_Checkout/js/view/summary/abstract-total': {
'Vendor_Module/js/view/summary/abstract-total-mixins': true
}
}
}
};
Replace Vendor_Module with your actual module name and place this file inside app/code/Vendor/Module/view/frontend.
What Is the Purpose of the isFullMode() Function?
The isFullMode() function determines whether the order summary is displayed. If totals are not available, it returns false.
Where Should I Place the Mixin File?
Place the mixin file inside app/code/Vendor/Module/view/frontend/web/js/view/summary/abstract-total-mixins.js. This file will modify the order summary visibility.
How Do I Clear Cache After Making These Changes?
Run the following commands to clear and refresh Magento's cache:
php bin/magento cache:clean
php bin/magento cache:flush
After clearing the cache, check the checkout page to confirm the order summary appears in the shipping step.
What Are the Benefits of Displaying Order Summary in the Shipping Step?
It improves user experience by allowing customers to review their order totals, including discounts and shipping charges, before proceeding to payment.
