1

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

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/js/view/summary/abstract-total-mixin

define(
[
    'uiComponent',
    'Magento_Checkout/js/model/step-navigator'
],
function (Component, stepNavigator) {
    "use strict";
    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/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);
            }
        });
    }});
  • i have already done this. i did not used mixin because i am working in custom theme. – i_ali55 Apr 23 at 8:03
  • Mixin is used for needed parts to change that function – Kamlesh Solanki Apr 23 at 10:57
  • If you helpfull then approved answer. – Kamlesh Solanki Apr 23 at 10:57
  • Using this solution, the shipping charge is not added to the order total. The order total is displaying wrong value. – MGento Jun 19 at 4:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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