2

The checkout sidebar cart summary with the price is displayed on at payment step, I want to show them on the shipping step as well. is there any solution to do this?

Screenshots

Here I want to show:
enter image description here

This section:

1 Answer 1

10

Below step need to follow:

Step 1: create require config js files under the

Vendor/ModuleName/view/frontend/requirejs-config.js

var config = {
config: {
    mixins: {
        'Magento_Checkout/js/view/summary/abstract-total': {
            'Vendor_Modulename/js/view/summary/abstract-total-mixin': true
        },
        'Magento_Checkout/js/view/summary/shipping': {
            'Vendor_Modulename/js/view/summary/shipping-mixin': true
        },
    }
}};

Step 2: Create an abstract total js for showing order summary in step 1 as below

Vendor/ModuleName/view/frontend/web/js/view/summary/abstract-total-mixin

define(
[
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/cart/totals-processor/default'
],
function (stepNavigator, quote, totalsDefaultProvider) {
    "use strict";

    var estimateTotalsShipping = function () {
        totalsDefaultProvider.estimateTotals(quote.shippingAddress());
    };

    // this should be added to get correct totals
    quote.shippingMethod.subscribe(estimateTotalsShipping);

    return function (abstractTotal) {
        return abstractTotal.extend({
            isFullMode: function() {
                if (!this.getTotals() || stepNavigator.getActiveItemIndex() === 1) {
                    return false;
                }
                return true; //add this line to display forcefully summary in shipping step.
            }
        });
    }
});

Step 3: Create a file for showing shipping method in order summary total.

Vendor/ModuleName/view/frontend/web/js/view/summary/shipping-mixin

define([
   'jquery',
   'Magento_Checkout/js/view/summary/abstract-total',
   'Magento_Checkout/js/model/quote'
], function ($, Component, quote) {
    'use strict';
    return function (shipping) {
        return shipping.extend({
            getValue: function () {
                var price;

                if (!this.isCalculated()) {
                    return this.notCalculatedMessage;
                }
                //var price =  this.totals().shipping_amount; //comment this line

                var shippingMethod = quote.shippingMethod(); //add these both line
                var price =  shippingMethod.amount; // update data on change of the shipping method

                return this.getFormattedPrice(price);
            }
        });
    }});
9
  • i have already done this. i did not used mixin because i am working in custom theme.
    – sudo55
    Commented Apr 23, 2019 at 8:03
  • Mixin is used for needed parts to change that function Commented Apr 23, 2019 at 10:57
  • If you helpfull then approved answer. Commented Apr 23, 2019 at 10:57
  • 3
    Using this solution, the shipping charge is not added to the order total. The order total is displaying wrong value.
    – MGento
    Commented Jun 19, 2019 at 4:45
  • I added these js files in custom theme. Order summary is displayed on shipping step. However, its not displayed on payment step.
    – Sejal Shah
    Commented Oct 15, 2019 at 20:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.