Skip to content

How to get already selected Shipping method and shipping Carrier using ajax in Checkout page Magento 2?

enter image description hereBasically I am trying to get the pre-selected shipping method and shipping carrier on the page load. Also it should capture the shipping method and shipping carrier as soon as the customer selects another radio button. So my question is how can I get shipping method as per above conditions? I have been referring to the code below. It would be really helpful in my learning if anyone can give any suggestion or advice. I am really excited to understand this concept of how shipping methods works. Thanks .Though I am trying my best to figure out the solution and will keep updating if I come across anything relevant.

appdesignfrontendcompanyporto_base_childMagento_Checkoutwebtemplateshipping-addressshipping-method-item.html

<tr class="row"
        click="element.selectShippingMethod" onmousemove="changeTooltipPosition(event)" onmouseenter="showTooltip(event)" onmouseleave="hideTooltip(event)">
        <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-time-transit">
            <!-- ko if: method.extension_attributes.company_rate_data.time_transit -->
                <!-- ko text: method.extension_attributes.company_rate_data.time_transit --><!-- /ko -->
                <!-- ko i18n: 'day(s)' --><!-- /ko -->
            <!-- /ko -->
        </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" />
        <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>