I want to add the subtotals to first checkout step "shipping" into the sidebar.
In the checkout_index_index.xml
I can see the totals but I have no clue why it is not loading in the first checkout step.
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this communityI want to add the subtotals to first checkout step "shipping" into the sidebar.
In the checkout_index_index.xml
I can see the totals but I have no clue why it is not loading in the first checkout step.
All of these solutions imply that you need to copy the abstract-total.js
to your own theme, but this is not necessary. Even more so: it might introduce new problems as soon as a Magento update decides to update the original abstract-total.js
.
A better (more unobtrusive) solution to this is to make use of a RequireJs mixin. This way you can extend a JavaScript object provided by Magento and only add your own adjustments:
In view/frontend/requirejs-config.js
:
var config = {
config: {
mixins: {
'Magento_Checkout/js/view/summary/abstract-total': {
'Vendor_Module/js/abstract-total-mixin': true
}
}
}
};
In view/frontend/web/js/abstract-total-mixin.js
:
define([], function () {
"use strict";
return function (target) {
return target.extend({
/**
* @return {*}
*/
isFullMode: function () {
if (!this.getTotals()) {
return false;
}
return true;
}
});
}
});
Now you have the same results in an upgrade-safe way ;-)
I had a similar issue and this is the way i managed to get it working.
You can override the following file
app/code/Magento/Checkout/view/frontend/web/js/view/summary/abstract-total.js
and update isFullMode function to return
true
instead of
return stepNavigator.isProcessed('shipping');
isFullMode: function() {
if (!this.getTotals()) {
return false;
}
return true;
}
Full code of overriden abstract-total.js file
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
/*global define*/
define(
[
'uiComponent',
'Magento_Checkout/js/model/quote',
'Magento_Catalog/js/price-utils',
'Magento_Checkout/js/model/totals',
'Magento_Checkout/js/model/step-navigator'
],
function (Component, quote, priceUtils, totals, stepNavigator) {
"use strict";
return Component.extend({
getFormattedPrice: function (price) {
return priceUtils.formatPrice(price, quote.getPriceFormat());
},
getTotals: function() {
return totals.totals();
},
isFullMode: function() {
if (!this.getTotals()) {
return false;
}
return true;
}
});
}
);
Hope it helps
In addition to enabling the full mode
for the cart summary, you want to make sure its shipping price, taxes and grand total get refreshed when picking/changing shipping methods during that first step.
You can copy the following file to your theme (don't edit it directly):
module-checkout/view/frontend/web/js/view/summary/shipping.js
Add the Magento_Checkout/js/model/cart/estimate-service
to the list of dependencies like so:
define([
'jquery',
'Magento_Checkout/js/view/summary/abstract-total',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/cart/estimate-service'
], function ($, Component, quote, estimateService) {
'use strict';
//...
Maybe it is interesting to take a look at the Clean Checkout module which simplifies the checkout and also adds the subtotal to the shipping step.
Basically its not magento default functionality to enable total summary in shipping step.
So we have to change some of files.
Let's follow below steps:
Step:1 To enable summary override below file.
app/code/Magento/Checkout/view/frontend/web/js/view/summary/abstract-total.js
override isFullMode()
isFullMode: function() {
if (!this.getTotals()) {
return false;
}
// return stepNavigator.isProcessed('shipping');
return true;
}
Step:2 To change shipping price value on selection of the shipping method You can override the following file.
app/code/Magento/Checkout/view/frontend/web/js/view/summary/shipping.js
change getValue() function.
getValue: function() {
if (!this.isCalculated()) {
return this.notCalculatedMessage;
}
//var price = this.totals().shipping_amount; /* comment this line and add below two lines. */
var shippingMethod = quote.shippingMethod();
var price = shippingMethod.amount;
return this.getFormattedPrice(price);
}
It is working (y).