Twig: set active class to all previous steps

Commerce
#1

I would like to display a progress bar during the checkout process which uses an active class for each step that is active or already accomplished. I’m quite new to twig and the best I could do so far is adding or step.allowed to the condition that’s placing the class:

{% for stepKey, step in steps %}
    <li class="step {% if stepKey == currentKey or step.allowed %}active{% endif %}">
    [...]

Generally this works fine, although when guest checkout is enabled, this will cause the address step to already be active during the previous account step.

Is there a better way to solve this?

#2

Typed on mobile so please forgive any typos:

Before the loop:

{% set _isPrev = true %}

Inside the loop:

{% if stepKey == currentKey %}{% set _isPrev = false %}{% endif %}

To set the class:

{% if _isPrev %}active{% endif %}

2 Likes
#3

Thanks that works great! Just had to adjust the final class part, so it would still set the active class on the current step:
{% if stepKey == currentKey or _isPrev == true %}active{% endif %}

Thank you!

2 Likes