2

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

  • Well i dont want to dig the code now. Doing it from your html would be the best solution. But a faster solution would be just make it display:none on your setp. Thats very easy. – Kingshuk Deb May 12 '17 at 11:53
  • @KingshukDeb display:none not working because sidebar block is same for all step. Also checkout step and sidebar are diffrent block. – Prince Patel May 12 '17 at 12:41
  • 1
    Hey it should be something like if you are on your custom step...through jquery check if any particular class or id available (that should be only on your step as it has some html i guess). If that class available then set the sidebar to display:none. I know both are other blocks. But both has to be on same phtml page..right? It has to be. – Kingshuk Deb May 12 '17 at 12:43
  • @KingshukDeb we can do by custom jQuery but this is not proper way for checkout module. – Prince Patel May 12 '17 at 12:45
  • @KingshukDeb. As rakesh jesadiya remove sidebar only one step is not possible. display:none is only solution for this task. Thank You for your help. – Prince Patel May 12 '17 at 17:45
2

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');
}
  • please let me know if you have issue. – Rakesh Jesadiya May 12 '17 at 13:24
  • Yes It's working fine. Thank You Rakesh Jesadiya... – Prince Patel May 12 '17 at 13:39
1

You can remove sidebar by add below code to override checkout_index_index.xml to in your theme

Add code below code just after <item name="sidebar" xsi:type="array"> tag

 <item name="componentDisabled" xsi:type="boolean">true</item>

Clean cache and check.

  • I want to remove only from my custom step not for all step. – Prince Patel May 12 '17 at 12:56
1

You can add below code to override checkout_index_index.xml

<item name="sidebar" xsi:type="array">
         <item name="config" xsi:type="array">
             <item name="componentDisabled" xsi:type="boolean">true</item>
        </item>
</item>  

Clean cache and check.

0

There is no left sidebar, it's just one page checkout (all in one). You can find Mageplaza One Step Checkout.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.