Solved the above issue. If you want to avoid the update and cancel button under the billing address and implement the update functionality when click on place order button, no need to go through the above way.
File path:
_vendor/magento/module-checkout/view/frontend/web/js/view/payment/default.js
First copy this file and place in your theme folder. Then, just replace this below code with the placeOrder function and hide the update and cancel button using css- display:none;
placeOrder: function (data, event)
{
if($('.billing-address-form:visible').length == 0)
{
$('.action-update').click();
var self = this;
if (event) {
event.preventDefault();
}
if (this.validate() && additionalValidators.validate()) {
this.isPlaceOrderActionAllowed(false);
this.getPlaceOrderDeferredObject()
.fail(
function () {
self.isPlaceOrderActionAllowed(true);
}
).done(
function () {
self.afterPlaceOrder();
if (self.redirectAfterPlaceOrder) {
redirectOnSuccessAction.execute();
}
}
);
return true;
}
return false;
}
else
{
var firstname = $("input[name=firstname]").val();
var lastname = $("input[name=lastname]").val();
var street = $("input[name='street[0]']").val();
var city = $("input[name=city]").val();
var regionid = $("input[name=region_id]").val();
var postcode = $("input[name=postcode]").val();
var countryid = $("input[name=country_id]").val();
var telephone = $("input[name=telephone]").val();
if((firstname == '') || (lastname == '') || (street = '') || (city == '') || (regionid = '') || (postcode = '') || (countryid == '') || (telephone = ''))
{
$('.action-update').click();
}
}
},
As Aaron pointed out the form is added in Magento/Checkout/Block/Checkout/LayoutProcessor.php
.
With this information I developed a module with an after plugin that hooks onto that processor:
app/code/<vendor>/<module>/Model/Checkout/LayoutProcessorPlugin.php
<?php
namespace <vendor>\ReorderBillingForm\Model\Checkout;
class LayoutProcessorPlugin
{
/**
* @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
* @param array $jsLayout
* @return array
*/
public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout
)
{
// get billing address form at billing step
$billingAddressForm = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form'];
// move address form to shipping step
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['billing-address-form'] = $billingAddressForm;
// remove form from billing step
unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form']);
return $jsLayout;
}
}
app/code/<vendor>/<module>/etc/module.xml
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="<vendor>_<module>" setup_version="1.0.0"/>
</config>
app/code/<vendor>/<module>/etc/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
<plugin name="reorder-billing-form"
type="<vendor>\<module>\Model\Checkout\LayoutProcessorPlugin" sortOrder="<yourOrder>"/>
</type>
</config>
app/code/<vendor>/<module>/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'<vendor>_<module>',
__DIR__
);
This successfully reorders the billing address form (and hopefully saves some headaches for other people). But there is still work needed on the javascript(?) that handles the billing address is the same as shipping address
mechanism. As this still works the "standard" way.
Additional info:
I saw that in the backend if you create a new order the layout is exactly as wanted. The billing form is "before" the shipping form and the logic is the other way around too.
If I can find the time I think it might be beneficial to look at the code there. Maybe it is possible to use it in frontend too.
Best Answer
You can remove Fax using by below code.
Add this code to in your theme checkout_index_index.xml file inside body tag.
Clear cache and check.