Checkout: remove sidebar ONLY in step 1

Question

I am rearranging the checkout.

I am getting rid of the sidebar concept as it hides the products behind a link and only allows very little space for the products.

My current store will have A LOT of products per quote and also a lot of information needs to be displayed. Too little space in this tiny sidebar. Therefore I want to return to the "old-school" way of displaying all the products before purchasing at the end of the last step only.

While I keep the container/region "sidebar" it will be a simple div taking up the entire width of the available space.

So far so good but how do I tell Magento to hide the sidebar on all steps except the last one? Currently, it is displayed on every step.

CSS is not an option since the DOM does not change from step to step.

Answer 1

I have managed to work by following steps:

1. Add the following line to your CSS file:

   .opc-summary-wrapper{display:none;}

2. Goto following directory

   vendor/magento/module-checkout/view/frontend/web/js/model

And open the file step-navigator.js

3. Copy this file to your working theme directory.

4. Edit the function getActiveItemIndex in step-navigator.js You will get 0,1 etc when console.log(activeIndex);

5. You will get 1 on Payment method step. You can put one condition there for display block by the following code:

   if (activeIndex == 1) {
     $('.opc-summary-wrapper').show();
   } else {
     $('.opc-summary-wrapper').hide();
   }