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.