Edit Shipping Method To Select Option Type Magento 2

You want an impressive checkout page. Today I will show you how to edit the shipping method to display the type of select option.

 

Step 1:

Create requirejs-config.js under /app/code/Magepow/ShippingDropdown/view/frontend/web/js/view

 

File: /app/code/Magepow/ShippingDropdown/view/frontend/web/js/view/requirejs-config.js

var config = {
    "map": {
        "*": {
            "Magento_Checkout/js/view/shipping": "Magepow_ShippingDropdown/js/view/shipping"
        }
    }
};

Step 2:

copy

/vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js

To

/app/code/Magepow/ShippingDropdown/view/frontend/web/js/view/

 

Now update shipping.js as below

File: /app/code/Magepow/ShippingDropdown/view/frontend/web/js/view/shipping.js

define([
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/address-converter',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/model/shipping-rates-validator',
    'Magento_Checkout/js/model/shipping-address/form-popup-state',
    'Magento_Checkout/js/model/shipping-service',
    'Magento_Checkout/js/action/select-shipping-method',
    'Magento_Checkout/js/model/shipping-rate-registry',
    'Magento_Checkout/js/action/set-shipping-information',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Ui/js/modal/modal',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'Magento_Checkout/js/checkout-data',
    'uiRegistry',
    'mage/translate',
    'Magento_Catalog/js/price-utils',
    'Magento_Checkout/js/model/shipping-rate-service'    
], function (
    $,
    _,
    Component,
    ko,
    customer,
    addressList,
    addressConverter,
    quote,
    createShippingAddress,
    selectShippingAddress,
    shippingRatesValidator,
    formPopUpState,
    shippingService,
    selectShippingMethodAction,
    rateRegistry,
    setShippingInformationAction,
    stepNavigator,
    modal,
    checkoutDataResolver,
    checkoutData,
    registry,
    $t,
    priceUtils
) {
    'use strict';
    var popUp = null;
    return Component.extend({
        defaults: {
            shippingMethodListTemplate: 'Magepow_ShippingDropdown/shipping-address/shipping-method-list',
        },
        shippingSelectionChanged: function(newvalue){
             var self = this;
            var shippingRatescollection =  self.rates();
            var selectedVal =  $("#myshipping-list").val();
            if(selectedVal!=='' ){
                var arrcarierCode =  selectedVal.split("_");
                var selectedCarrierCode =  arrcarierCode[0]
                var selectedMethodCode =  arrcarierCode[1];
                $.each(shippingRatescollection,function( index, shippingMethod ) {
                     if(shippingMethod.carrier_code==selectedCarrierCode && shippingMethod.method_code==selectedMethodCode){
                         self.selectShippingMethod(shippingMethod);
                     }
                });
            }
        },
    });
});

Step 3:

Now create the component template file shipping-method-list.html under /app/code/Magepow/ShippingDropdown/view/frontend/web/template/shipping-address

 

File : /app/code/Magepow/ShippingDropdown/view/frontend/web/template/shipping-address/shipping-method-list.html

<div id="checkout-shipping-method-load">
     <select name="myshipping-list" id="myshipping-list" data-bind="options: rates() ,
               optionsCaption: 'Please select a rate...',
               optionsText: function(item) {
                   return element.getFormattedPrice(item.price_incl_tax)+ '&nbsp;&nbsp;&nbsp;' + item.method_title  + '&nbsp;&nbsp;&nbsp;'  + item.carrier_title
               },
               optionsValue:function(item) {  

               return item.carrier_code + '_' + item.method_code;
               },    
               ko-value: function(item) {  

               return item.carrier_code + '_' + item.method_code;
               },
               value:isSelected,    
               event:{ change:shippingSelectionChanged }">
      </select>
</div>

Step 4:

Now install the custom module and refresh Magento cache

 

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento cache:flush

 

That it's. Hope this article will help you in some way.