Customizing the progress bar

The block loki-checkout.progressbar allows customers to navigate in between steps. This page describes a couple of modifications that could be made to its PHTML template.

Customizing the separator

Each step in the progress bar is separated with a block loki-checkout.progressbar.separator that calls upon a more generic block loki-checkout.utils.separator that displays a chevron-right.svg. First of all, the icon could simply be overridden by your theme by copying this file to your theme under the file LokiCheckout_Core/web/images/chevron-right.svg. Second, you could override the PHTML template of either file as well.

The separators could also be skipped altogether by setting the skip_separator argument to true:

<referenceBlock name="loki-checkout.progressbar">
    <arguments>
        <argument name="skip_separator" xsi:type="boolean">true</argument>
    </arguments>
</referenceBlock>

Using icons instead of labels

By default, labels are displayed for each step. However, instead of using labels, you might also want to use icons. There is ready-made icon.phtml template to facilitate this:

<referenceBlock name="loki-checkout.progressbar.step.inner" template="LokiCheckout_Core::checkout/progressbar/step/icon.phtml">
    <arguments>
        <argument name="inactive_class" xsi:type="string">opacity-40</argument>
    </arguments>
</referenceBlock>

Each icon could be configured with an active_class and inactive_class.

Adding something before or after the steps

The PHTML template LokiCheckout_Core::checkout/progressbar.phtml reveals two containers to be used for adding more content: loki-checkout.progressbar.before and loki-checkout.progressbar.after. One example here is to add a Home icon to the progress bar:

<referenceContainer name="loki-checkout.progressbar.before">
    <block
        name="loki-checkout.progressbar.home" as="home"
        template="LokiCheckout_Core::checkout/progressbar/home.phtml"/>
</referenceContainer>