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.
Remove sidebar for only one step is not posibble you have to use custom js int your theme.
In your case, you have to hide summary block for first step using below code in your custom step js file.
add parent class so we can hide sidebar block
initialize: function () {
this._super();
// register your step
stepNavigator.registerStep(
'customerstep',
null,
$t('customer'),
//observable property with logic when display step or hide step
this.isVisible,
_.bind(this.navigate, this),
30
);
$('#checkout').addClass('customer-step');
return this;
}
add css
.customer-step .opc-sidebar
{
display:none;
}
Now you have to override step-navigator.js file into your theme.
in step-navigator.js file,
go to next() function
next: function()
add line $('#checkout').removeClass('customer-step'); inside this condition,
if (steps().length > activeIndex + 1) {
$('#checkout').removeClass('customer-step');
}
Best Answer
Create a custom module:
We need to use our custom component and template.
Vendor/Module/view/frontend/layout/checkout_index_index.xml
Vendor/Module/view/frontend/web/js/view/summary.js
Our custom script should extend from the original summary script and we need to check the shipping step is processed or not.
Vendor/Module/view/frontend/web/template/summary.html
Try to clear your Magento cache and see the result.