Magento 2 : shipping method in dropdown view in frontend

Question

On Checking out,I have a lot of shipping methods listed. Any solution, how to customize it into a drop-down?

Thank in advance.

Answer 1

you may try to create a custom module and override Magento_Checkout/js/view/shipping.js component and its template

I assume you will create a custom module name Company_ShippingDropdown

After creating the custom module follow the steps below

step 1)

Create requirejs-config.js under YOUR-MAGENTO-ROOT/app/code/Company/ShippingDropdown/view/frontend/web/js/view

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

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

    }
};

step 2)

copy

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

To

YOUR-MAGENTO-ROOT/app/code/Company/ShippingDropdown/view/frontend/web/js/view/

Now update shipping.js as below

File: /app/code/Company/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: 'Company_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);
                         }

                    });

            }

        },        
     ------------------------------------------      
     -----------------------------------------      
     ------------------------------------------   



    });
});

I have done few changes to the shipping.js file

1. inject one new js component (i.e
   'Magento_Catalog/js/price-utils')

2. change the shippingMethodListTemplate to
   'Company_ShippingDropdown/shipping-address/shipping-method-list'

3. Create one new function 'shippingSelectionChanged'

step 3)

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

File : app/code/Company/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

:: Here is a working demo of shipping method dropdown ::