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

ajaxjavascriptknockoutjsmagento2shipping

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.

\app\design\frontend\company\porto_base_child\Magento_Checkout\web\template\shipping-address\shipping-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>

Best Answer

So as I asked how to get the pre-selected shipping method whenever on page load and shipping method when customer selects another radio button. My first step was to create a function in shipping-mixin which I was already referencing in my local folder. Then calling that function using knockout js in html worked for me. There are lots of other ways which can be used to get shipping and add checkbox based on shipping method. Again I cannot say that the way I did is the most appropriate way. Though I would be more than happy to know if there is any other way to do it. Thanks. Also I know that I did'nt mention anything about adding checkbox in the question that's because that was the most easy part once I got the shipping method. Finding the right file and making changes was a challenge

\app\design\frontend\company\porto_base_child\Magento_Checkout\requirejs-config.js

var config = {
    config: {
        mixins: {
                   'Magento_Checkout/js/view/shipping': {
                'Magento_Checkout/js/view/shipping-mixin': true
            }
          }
          }           
        };

\app\design\frontend\company\porto_base_child\Magento_Checkout\web\js\view\shipping-mixin.js

define(
    [
        'jquery',
        'Magento_Checkout/js/checkout-data',
        'Magento_Checkout/js/model/shipping-address/form-popup-state',
        'Magento_Customer/js/model/address-list',
        'Magento_Checkout/js/model/quote'
    ], function ($, checkoutData, formPopUpState, addressList,quote) {
    'use strict';

var mixin = {
ups_or_fedex: function(){
            if (checkoutData.getSelectedShippingRate().indexOf("fedex") !== -1 || checkoutData.getSelectedShippingRate().indexOf("ups") !== -1){
            if(document.getElementById("ups_or_fedex_div").style.display=="none"){
                document.getElementById("ups_or_fedex_div").style.display="block";
            }
            if(document.getElementById("ups_or_fedex").checked == false){
                $("#shipping-method-buttons-container :submit").attr("disabled", true);
            }
            else if(document.getElementById("ups_or_fedex").checked == true){
                $("#shipping-method-buttons-container :submit").attr("disabled", false);
            }
            return true;
        }
            else{
                document.getElementById("ups_or_fedex_div").style.display="none";
                if(document.getElementById("ups_or_fedex").checked == false || document.getElementById("ups_or_fedex").checked == true){
                    $("#shipping-method-buttons-container :submit").attr("disabled", false);
                }
            }
        }
       };
      return function(target){
           return target.extend(mixin);
      };
    });

\app\design\frontend\company\porto_base_child\Magento_Checkout\web\template\shipping.html

<div id="ups_or_fedex_div">
                    <input type="checkbox" id="ups_or_fedex" name="ups_or_fedex" onclick="ups_or_fedex_func()">
                    <label for="ups_or_fedex">If you are delivering to a residential using FedEx or UPS we are not responsible for any loss or damages.Hit the checkbox to proceed further</label><br>
                </div>
                <div class="actions-toolbar" id="shipping-method-buttons-container">
                    <div class="primary">
                        <button data-role="opc-continue" type="submit" class="button action continue primary">
                            <span translate="'Next'" />
                        </button>
                    </div>
                </div>
                <!--ko if:(ups_or_fedex()) --><!--/ko-->
Related Topic