- Instead of you, I added the new custom step before and not after the Shipping Information step but I discovered the same behavior. Did you managed to solve it?
- It should be possible to use the
navigateTo(code, scrollToElement)
function of the Magento_Checkout/js/model/step-navigator
for this purpose.
- Actual the
next()
function of the step-navigator.js
is called in the setShippingInformation()
function of the Magento_Checkout/js/view/shipping.js
(which will be called by clicking the Next button).
- In order to override this function you can copy the whole
shipping.js
file to your custom module and add the following to your custom checkout_index_index.xml
.
checkout_index_index.xml
<item name="steps" 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>_<ModuleName>/js/view/shipping</item>
</item>
</item>
</item>
...
</item>
If this does work, I suggest you to not override the whole shipping.js
file, but extending it, like itself extends the Magento_Ui/js/form/form
(Component
). Then you should be able to just override the setShippingInformation()
function.
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
All of these solutions imply that you need to copy the
abstract-total.js
to your own theme, but this is not necessary. Even more so: it might introduce new problems as soon as a Magento update decides to update the originalabstract-total.js
.A better (more unobtrusive) solution to this is to make use of a RequireJs mixin. This way you can extend a JavaScript object provided by Magento and only add your own adjustments:
In
view/frontend/requirejs-config.js
:In
view/frontend/web/js/abstract-total-mixin.js
:Now you have the same results in an upgrade-safe way ;-)