If Free Shipping Replace Text with Free instead of $0.00 in Magento 2

Question

I am trying to customize the shopping cart page, If customer select Free Shipping Shipping Method needs to replace Free instead of $0.00. For this stuff, I followed steps.

Customized the root/vendor/magento/module-checkout/view/frontend/web/template/cart/totals/shipping.html, but it's not affecting.

Can you please suggest me how to do this.

Answer 1

Finally, I solved my self.

requirejs-config.js

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

var config = {
    map: {
        '*': {
            'Magento_Tax/js/view/checkout/summary/shipping':'Namespace_Modulename/js/view/checkout/summary/shipping',
            'Magento_Tax/template/checkout/cart/totals/shipping':'Namespace_Modulename/template/checkout/cart/totals/shipping'
        }
    }
};

shipping.js

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/*jshint browser:true jquery:true*/
/*global alert*/
define(
    [
        'jquery',
        'Magento_Checkout/js/view/summary/shipping',
        'Magento_Checkout/js/model/quote'
    ],
    function ($, Component, quote) {
        var displayMode = window.checkoutConfig.reviewShippingDisplayMode;
        return Component.extend({
            defaults: {
                displayMode: displayMode,
                template: 'VLCSolutions_FreeShippingTxt/checkout/summary/shipping'
            },
           /* Added my functions */
           isFreeShipping:function(){
                var carrierCode = quote.shippingMethod().carrier_code;
                if(carrierCode == "customerpickup"){
                    return true;
                }else{
                    return false;
                }
            },
            getText:function(){
                return "Free";
            }
        });
    }
);

shipping.html

<!-- Added custom functions with core function -->
    <!-- ko if: isFreeShipping() -->
    <tr class="totals shipping excl">
        <th class="mark" scope="row">
            <span class="label" data-bind="i18n: title"></span>
            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
        </th>
        <td class="amount">
            <span  class="price" style="color:red;font-weight:bold;font-size:16px;" data-bind="text: getText(), attr: {'data-th': title}"></span>
        </td>
    </tr>
    <!-- /ko -->
    <!-- ko ifnot: isFreeShipping() -->
    <tr class="totals shipping excl">
        <th class="mark" scope="row">
            <span class="label" data-bind="i18n: title"></span>
            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
        </th>
        <td class="amount">
            <span class="price" data-bind="text: getValue(), attr: {'data-th': title}"></span>
        </td>
    </tr>
    <!-- /ko -->

It's worked for me. If anyone has better answer update this or post new answer.

Answer 2

You should not change the root/vendor files. Try to create a module/theme to change the required file: http://devdocs.magento.com/guides/v2.2/architecture/archi_perspectives/components/modules/mod_intro.html

When i tried to change that area i had to overried the file root/vendor/magento/module-tax/view/frontend/web/template/checkout/cart/totals/shipping.html

Answer 3

More simple.

requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/summary/shipping': {
                'Namespace_Modulename/js/checkout-shipping-mixin': true
            }
        }
    }
};

\Namespace\Modulename\view\frontend\web\js\checkout-shipping-mixin.js

define([], function () {
    var mixin = {

        /**
         * @return {*}
         */
        getValue: function () {
            var price;

            if (!this.isCalculated()) {
                return this.notCalculatedMessage;
            }
            price = this.totals()['shipping_amount'];

            if (price === 0) {
                return 'free';
            }

            return this.getFormattedPrice(price);
        }
    };

    return function (shipping) {
        return shipping.extend(mixin);
    };
});