0

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

https://prnt.sc/pqmuly

Thank in advance.

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 ::

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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