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?

Discuss your business objectives with us. Get in touch today to explore ways we can assist in reaching them.

Copyright © 2024 ArmMage LLC. All rights reserved.