Magento 2 Hide Shipping Price on Checkout with Mixin

Question

I have added a mixin for checkout shipping.js:

requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/shipping': {
                'Vendor_Modulename/js/view/checkout/shipping': true
            }
        }
    }
 };

shipping.js

define([
    'jquery',
    'uiComponent'
], function ($, Component) {
    'use strict';
    var mixin = {
        defaults: {
            shippingMethodListTemplate: 'Vendor_Modulename/checkout/shipping-address/shipping-method-list',
            shippingMethodItemTemplate: 'Vendor_Modulename/checkout/shipping-address/shipping-method-item'
        },

        canShowShippingPrice: function () {

            console.log("CAN SHOW SHIPPING:", false);
            return false;
        }
    };

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

And in my override template: shipping-method-list.html

<div id="checkout-shipping-method-load">
    <table class="table-checkout-shipping-method">
        <thead>
        <tr class="row">
            <th class="col col-method" translate="'Select Method'"></th>
            <!-- ko if: canShowShippingPrice() --><th class="col col-price" translate="'Price'"></th><!-- /ko -->
            <th class="col col-method" translate="'Method Title'"></th>
            <th class="col col-carrier" translate="'Carrier Title'"></th>
        </tr>
        </thead>
        <tbody>
            <!-- ko foreach: { data: rates(), as: 'method'} -->
                <!--ko template: { name: element.shippingMethodItemTemplate} --><!-- /ko -->
            <!-- /ko -->
        </tbody>
    </table>
</div>

shipping-method-item.html

<tr class="row"
    click="element.selectShippingMethod">
    <td class="col col-method">
        <input type="radio"
               class="radio"
               ifnot="method.error_message"
               ko-checked="element.isSelected"
               ko-value="method.carrier_code + '_' + method.method_code"
               attr="'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code,
                    'checked': element.rates().length == 1 || element.isSelected" />
    </td>
    <!-- ko if: canShowShippingPrice() -->
        <td class="col col-price">
            <each args="element.getRegion('price')" render="" />
        </td>
    <!-- /ko -->
    <td class="col col-method"
        attr="'id': 'label_method_' + method.method_code + '_' + method.carrier_code"
        text="method.method_title" />
    <td class="col col-carrier"
        attr="'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code"
        text="method.carrier_title" />
</tr>
<tr class="row row-error"
    if="method.error_message">
    <td class="col col-error" colspan="4">
        <div role="alert" class="message error">
            <div text="method.error_message"></div>
        </div>
        <span class="no-display">
            <input type="radio"
                   attr="'value' : method.method_code, 'id': 's_method_' + method.method_code" />
        </span>
    </td>
</tr>

However, my function "canShowShippingPrice()" is always undefined. How can I use knockout to call this function inside the shippingMethod templates?

Answer 1

This seems to have worked by using the function as "element.canShowShippingPrice".