7

Here is the code in \vendor\magento\module-checkout\view\frontend\web\template\shipping-address\custom-method-item-template.html

<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 -->
<tr class="row" visible="$context['$collapsible_' + method.method_code].opened">
    <td class="col" colspan="5" i18n="'Some description.'">12312</td>
</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>
</tbody>

I want to show method.method_code either console.log or alert, how can i do that?

14

Debugging

<div data-bind="text: ko.computed(function() { debugger; })"></div>

Print Data

<div data-bind="text: ko.toJSON(method.method_code)"></div>

Docs from Magento: https://devdocs.magento.com/guides/v2.4/ui_comp_guide/troubleshoot/ui_comp_troubleshoot_js.html

| improve this answer | |
7

There is one another great tool available for debugging knockout js data in chrome browser.

Knockoutjs context debugger

https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof?hl=en

Add Knockoutjs context debugger in chrome browser. You can see a new tab added Knockout context at the right panel in Elements tab where you can check knockout data of selected element.

Check Screenshot:

enter image description here

| improve this answer | |
  • 1
    It's quite helpful. – Khoa TruongDinh Dec 6 '18 at 1:32
  • Thanks for sharing! Gonna need this tool :) – MazeStricks Sep 8 at 2:20

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.