Moving the checkout progress bar in magento2

Question

Attempting to move the progressBar within magento's checkout to the header of the page. I thought something simple like creating a move element within checkout_index_index.xml would do the trick however this doesn't seem to work.

<move element="progressBar" destination="header.content" before="-"/>

Any help is appreciated.

Answer 1

I don't think you can move the progress bar this way. It is rendered in onepage.html using knockout:

<!-- ko foreach: getRegion('progressBar') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

You can move it around there, but I don't think you can move it to the top of the header. To do that you'll have to resort to some CSS hacking.

Answer 2

It's easy to do.

You need to create a new template view/frontend/templates/progress-bar.phtml with such a content:

<div data-bind="scope:'checkout'">
    <!-- ko foreach: getRegion('progressBar') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
</div>

Now you have to put it to your checkout_index_index.xml

<referenceContainer name="checkout.header.container">
    <block class="Magento\Framework\View\Element\Template" name="progress-bar" after="checkout.header.wrapper" template="Vendor_Module::progress-bar.phtml" />
</referenceContainer>

And the last step - you have to remove the progress bar displaying logic defined in vendor/magento/module-checkout/view/frontend/web/template/onepage.html. For doing this you need to copy the file to your module, remove the following code:

<!-- ko foreach: getRegion('progressBar') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

And define the template in checkout_index_index.xml for the checkout UI component. Change:

<item name="config" xsi:type="array">
    <item name="template" xsi:type="string">Magento_Checkout/onepage</item>
</item>

To:

<item name="config" xsi:type="array">
    <item name="template" xsi:type="string">Vendor_Module/onepage</item>
</item>

Answer 3

Igor's solution works, you can also do it in your theme in Magento_Checkout and use different file with different names. Please approve his answer as the solution.