Q:

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

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.

A:

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.

