I have a custom module which will overrride vendor\magento\module-checkout\view\frontend\web\template\shipping-address\shipping-method-item.html, here is the code

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<tbody collapsible="as: '$collapsible_' + method.method_code">
<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>
    <td class="col col-price">
        <each args="element.getRegion('price')" render="" />
    </td>
    <td class="col col-method"
        attr="'id': 'label_method_' + method.method_code + '_' + method.carrier_code"
        text="method.method_title" style="background-color:yellow" />
    <td class="col col-carrier"
        attr="'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code"
        text="method.carrier_title" />
    <!-- Column with collapsible trigger  -->
    <td class="col">
        <a toggleCollapsible="'$collapsible_' + method.method_code">
            <span data-bind="i18n: 'Info'"></span>
        </a>
    </td>
</tr>
<!-- Row for shipping method description -->
<!-- ko if: method.method_code=="come_to_collect" -->
<tr class="row" data-bind="visible: MyChoiceValue() == 'True'" visible="$context['$collapsible_' + method.method_code].opened">

    <td class="col" colspan="5" i18n="'Some description.'">
        <div data-bind="text: ko.toJSON(method.method_code)"></div>    
            <div id="pick_up_name">
                <strong><?php echo __('Pick_up_name') ?></strong>
                <span class="price"><input type="text" name="pick_up_name"></span>
            </div>
    </td>
</tr>
<!-- /ko -->

<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>
</tbody>

<script>
    require([
        'jquery',
        'mage/mage',
        'Magento_Catalog/product/view/validation',
        'Magento_Catalog/js/catalog-add-to-cart'
    ], function ($) {
        'use strict';

        alert('abc');
    });
</script>

I want to add some javascript in above page but not successfull, anyone how to do that?

  • What's a custom plugin? – Khoa TruongDinh Dec 7 at 3:41
  • custom module .. – hkguile Dec 7 at 3:42
  • i can't use javascript in this html even simple alert('abc'); – hkguile Dec 7 at 4:16
  • why not add the js outside of the ko template, such as a phtml file? – subroutines Dec 7 at 5:07
  • @subroutines how and where? – hkguile Dec 7 at 5:10

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.