Magento 2.1 – Remove Sidebar in Checkout Custom Step

checkoutmagento-2.1

I have created a new custom step in the checkout and I want to hide the sidebar in this custom step.

Note: I only want to hide the sidebar in my custom step, not in other steps.

enter image description here

Does anyone know how I can achieve this?

Thanks

Best Answer

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');
}
Related Topic