How to Create mixin for Checkout Shipping information js and for summary Shipping js and change getShippingMethodTitle method

How to Create mixin  for Checkout Shipping   information js and for   summary Shipping js and  change  getShippingMethodTitle  method

Create a basic module, see the post

 

Create

 

app/code/Armmage/Custom/view/frontend/requirejs-config.js

 

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/summary/shipping': {
                'Armmage_Custom/js/view/summary/shipping-mixin': true
            },
            'Magento_Checkout/js/view/shipping-information': {
                'Armmage_Custom/js/view/summary/shipping-information-mixin': true
            },
        }
    }
};

 

 

 

create The files

 

app/code/Armmage/Custom/view/frontend/web/js/view/summary/shipping-information-mixin.js

 

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

 define([
    'jquery',
    'uiComponent',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/model/sidebar'
], function ($, Component, quote, stepNavigator, sidebarModel) {
    'use strict';

    var mixin = {
      
         /**
         * @return {String}
         */
          getShippingMethodTitle: function () {
            var shippingMethod = quote.shippingMethod();
        
            return shippingMethod ? shippingMethod['carrier_title'] + ' - ' + shippingMethod['method_title'] + ' some title' : '';
        },
    };

    /**
     * Override default getShippingMethodTitle
     */
    return function (OriginShipping) {
        return OriginShipping.extend(mixin);
    };
});

 

app/code/Armmage/Custom/view/frontend/web/js/view/summary/shipping-mixin.js

 

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

 define([
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote',
], function (wrapper, quote) {
    'use strict';

    var mixin = {
      
        /**
         * @return {*}
         */
         getShippingMethodTitle: function () {
            var shippingMethod = '',
                shippingMethodTitle = '';

            if (!this.isCalculated()) {
                return '';
            }
            shippingMethod = quote.shippingMethod();

            if (typeof shippingMethod['method_title'] !== 'undefined') {
                shippingMethodTitle = ' - ' + shippingMethod['method_title'];
            }
         
          return shippingMethod ?
          shippingMethod['carrier_title'] + shippingMethodTitle + 'some other title' :
          shippingMethod['carrier_title'];
        },
    };

    /**
     * Override default getShippingMethodTitle
     */
    return function (OriginShipping) {
        return OriginShipping.extend(mixin);
    };
});


Ready to elevate your e-commerce business?

Let's talk about your business goals. Contact us now to see how we can help achieve them.

 
Copyright © 2021-present ArmMage Inc. All rights reserved.