How to change default shipping method on button click (ajax call) on checkout page?
Magento 1.8 – Change Default Shipping Method on Button Click (AJAX)
ajaxcheckoutmagento-1.8php-5.4shipping-methods
Related Solutions
I used this method just so I could change the css on the <select> element but it makes it easier to "filter" countries and what not as well, which could help you.
Go to /app/design/frontend/THEME_NAME/default/template/checkout/cart/shipping.phtml
Try replacing:
<?php echo Mage::getBlockSingleton('directory/data')->getCountryHtmlSelect($this->getEstimateCountryId()) ?>
With this:
<?php $_countries = Mage::getResourceModel('directory/country_collection')->loadByStore()->toOptionArray(false) ?>
<?php if (count($_countries) > 0): ?>
<select name="country_id" id="country" class="validate-select">
<option value="GB">United Kingdom</option>
<?php foreach($_countries as $_country): ?>
if($_country['value']=="GB")
{
continue
}
else
{
<option value="<?php echo $_country['value'] ?>">
<?php echo $_country['label'] ?>
</option>
}
<?php endforeach; ?>
</select>
<?php endif; ?>
Follow below steps:
Vendor: Vendor
ModuleName: CheckoutStep
1) Override checkout_index_index.xml in your module and define your own component in shipping step
app/code/Vendor/CheckoutStep/view/frontend/layout/checkout_index_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="component" xsi:type="string">Vendor_CheckoutStep/js/view/custom-shipping</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
2) Create custom-shipping.js app/code/Vendor/CheckoutStep/view/frontend/js/view/custom-shipping.js and define your own shipping template
define(
[
'jquery',
'ko',
'Magento_Checkout/js/view/shipping'
],
function(
$,
ko,
Component
) {
'use strict';
return Component.extend({
defaults: {
template: 'Vendor_CheckoutStep/shipping'
},
initialize: function () {
var self = this;
this._super();
}
});
}
);
3) Copy shipping.html
From
vendor/magento/module-checkout/view/frontend/web/template/shipping.html
To
app/code/Vendor/CheckoutStep/view/frontend/web/template/shipping.html
Remove html code inside form(id="co-shipping-method-form") except actions-toolbar as it use for continue button. So your shipping.html file will be
<!--Shipping method template-->
<li id="opc-shipping_method"
class="checkout-shipping-method"
data-bind="fadeVisible: visible(), blockLoader: isLoading"
role="presentation">
<div class="checkout-shipping-method">
<div id="checkout-step-shipping_method"
class="step-content"
data-role="content"
role="tabpanel"
aria-hidden="false">
<form id="co-shipping-method-form"
class="form methods-shipping"
if="rates().length"
submit="setShippingInformation"
novalidate="novalidate">
<div class="actions-toolbar" id="shipping-method-buttons-container">
<div class="primary">
<button data-role="opc-continue" type="submit" class="button action continue primary">
<span translate="'Next'" />
</button>
</div>
</div>
</form>
</div>
</div>
</li>
4) Shipping method block removed from the checkout step with the above 3 steps. Now, We must need to assign one specific shipping method because Magento must need to assign one specific shipping method.
Now use mixin for 'Magento_Checkout/js/model/checkout-data-resolver.js' to override resolveShippingRates function.
Assign shipping method by passing ratesData[0] in selectShippingMethodAction()
So overridden resolveShippingRates function should look like this:
resolveShippingRates: function (ratesData) {
var selectedShippingRate = checkoutData.getSelectedShippingRate(),
availableRate = false;
if (ratesData.length === 1) {
//set shipping rate if we have only one available shipping rate
selectShippingMethodAction(ratesData[0]);
return;
}
if (ratesData.length > 1) {
selectShippingMethodAction(ratesData[0]);
return;
}
//Existing code
},
we can auto assign shipping method like ratesData[0], ratesData[1],ratesData[2] as per our requirement
Notes:
Follow this answer if you want to disable the particular shipping method
Follow this answer for use mixin for
checkout-data-resolver.js
Best Answer
You can do this from both PHP or JavaScript
If you go the PHP way, you need to edit the
app/design/frontend/[package]/[theme]/template/checkout/onepage/shipping_method/available.phtmlfile, and around line 47 you have an if statementif($_rate->getCode()===$this->getAddressShippingMethod())when this condition returns true, it will set the corresponding method as selected. So you can update the if statement, and check other condition as well
If you want to go the JavaScript way, you need to edit the
skin/frontend/base/default/js/onepagecheckout.jsfile