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?

3 Answers 3

20

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

1
1

Knockoutjs context debugger

Do not work anymore with Chrome ver 92 you can simply select the element and inspect it and after that run in the console drawer :

require('ko').contextFor($0);

And it will output the KO context

1

Context Knockout Hover is the way to go after they removed the other Knockout extension from Chrome marketplace.

Sample: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.