Shipping Method Dropdown and Set Default Shipping Method on Cart Page

[sanganagouda]

Hi

In magento2 how to make shipping method radio buttons in cart to dropdown in cart.

[Damian Culotta]

Hi @sanganagouda,

Can you show an example of the customziation you are looking for?

[sanganagouda]

yes please find attached image 

[Damian Culotta]

Hi @sanganagouda,

The template you're looking for is:

vendor/magento/module-checkout/view/frontend/web/template/cart/shipping-rates.html

Maybe you can override the file within your theme?

[sanganagouda]

No its not working as required, after changing in shipping-reates.html code of 

<input
type="radio"
class="radio"
data-bind="click: $parents[1].selectVirtualMethod,
attr: {
value: carrier_code + '_' + method_code,
id: carrier_code + '_' + method_code,
name: 'estimate_method' + $parentContext.$index()
}
"/>

to 

<select
data-bind="
options: $parents[1].selectShippingMethod,
optionsText:attr: {for: 's_method_' + method_code},
value: $parents[1].selectedShippingMethod,
attr: {
value: carrier_code + '_' + method_code,
id: 's_method_' + method_code
}
">
</select>

but it showing dropdown for each method like 

so not able to set option values to select 

[Vinh Le]

Hi @sanganagouda  and guys

In order to implement this requirement, we can follow up on the following steps:

1. Copy file: Magento_Checkout/web/template/cart/shipping-rates.html and then change input[type="radio"] to select

<form id="co-shipping-method-form" data-bind="blockLoader: isLoading, visible: isVisible()">
    <p class="field note" data-bind="visible: (!isLoading() && shippingRates().length <= 0)">
        <!-- ko text: $t('Sorry, no quotes are available for this order at this time')--><!-- /ko -->
    </p>
    <fieldset class="fieldset rate" data-bind="visible: (shippingRates().length > 0)">
        <div class="field">
            <select name="mg-shipping-method-list" id="mg-shipping-method-list" data-bind="options: shippingRates() ,
            optionsCaption: 'Please select a rate...',
            optionsText: function(item) {
                return item.carrier_title + ' - ' + item.method_title + ' : ' +element.getFormattedPrice(item.price_incl_tax)
                },
            optionsValue:function(item) {

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

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

2. Declare a mixin in file app/code/[Vendor]/Themes/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/cart/shipping-rates': {
                '[Vendor]_[Module]/js/view/cart/shipping-rates-mixin': true
            }
        },
    }
};

3. Create a mixin file app/code/[Vendor]/[Module]/view/frontend/web/js/view/cart/shipping-rates-mixin.js

define([
    'jquery',
    'ko',
    'underscore',
    'uiComponent',
    'Magento_Checkout/js/model/shipping-service',
    'Magento_Catalog/js/price-utils',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/select-shipping-method',
    'Magento_Checkout/js/checkout-data'
], function ($,ko, _, Component, shippingService, priceUtils, quote, selectShippingMethodAction, checkoutData) {
    "use strict";

    return function (target) {
        return target.extend({
            /**
             * Add method for shipping method dropdown
             * @param newvalue
             */
            shippingSelectionChanged: function(newvalue){
                var self = this;
                var shippingRatescollection =  self.shippingRates();
                var selectedVal =  $("#mg-shipping-method-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);
                        }
                    });
                }
            },
        });
    }
});