cancel
Showing results for 
Search instead for 
Did you mean: 

Shipping Method Dropdown and Set Default Shipping Method on Cart Page

Shipping Method Dropdown and Set Default Shipping Method on Cart Page

Hi

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

 

5 REPLIES 5

Re: Shipping Method Dropdown and Set Default Shipping Method on Cart Page

Hi @sanganagouda,

 

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

Re: Shipping Method Dropdown and Set Default Shipping Method on Cart Page

yes please find attached image 

 

shipping_method.png

Re: Shipping Method Dropdown and Set Default Shipping Method on Cart Page

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?

Re: Shipping Method Dropdown and Set Default Shipping Method on Cart Page

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 

Capture.PNG

so not able to set option values to select 

Re: Shipping Method Dropdown and Set Default Shipping Method on Cart Page

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);
                        }
                    });
                }
            },
        });
    }
});