0

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.

enter image description here

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.

1

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

  • Thanks for your answer. I have used to get the value of shipping method and it's shipping amount by using below code <script type="text/javascript"> require(['jquery'],function($){ $(document).ready(function() { $('input:radio[class=radio]').change(function() { alert(this.value); console.log($('#free_shipping_text').text()); console.log($('#free_shipping').text()); }); }); }); </script> but it's not working. Please suggest me. – Bojjaiah Mar 7 '18 at 10:38
0

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.

0

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);
    };
});

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.