1

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.

3

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.

0

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>

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.