Craft Commerce: Steps Bar in Checkout

Question

I'm trying to use the Craft Commerce example template code to show a progress bar throughout the checkout process. It currently doesn't correctly display the % value of progress through the checkout. It is just blank.

The url for my checkout is page is: website.com/shop/test/checkout

To see if it was a styling issue I did a test and set a manual override on the span's width with 50% - the styling then comes into play.

Has anyone else encountered this issue? I don't want to assume anything but the equation to make it kick in doesn't seem to be working.

<div class="steps">
  <ul>
    {% for key, step in steps %}
      {% set class = '' %}
      {% if craft.request.requestUri|slice(1) == step.url %}
        {% set width = ((key + 1) * 100 / steps|length) - 20 %}
        {% set class = "sel" %}
        {% set currentStep = key %}
      {% endif %}

      {% if currentStep is not defined %}
        {% set class = "done" %}
      {% endif %}

      <li class="{{ class }}"><a href="{{ url( step.url ) }}">{{ step.label }}</a></li>
    {% endfor %}
  </ul>

  <div class="meter">
    <span style="width: {{ width }}%"></span>
  </div>
</div>

Answer 1

The Craft Commerce example template's include a file called meter.html to display the progress bar.

At the top of template there is an array of steps that is used to calculate the percentage as the user progresses through the checkout process.

In order to get your progress bar to show the correct percentage you will need to change the url's for each step to match your site's structure.

Something along the following lines will likely be what you need:

{% set steps = [
  {
    label: "Start Order",
    url: 'shop/test/checkout'
  },
  {
    label: "Address",
    url: 'shop/test/checkout/addresses'
  },
  {
    label: "Shipping",
    url: 'shop/test/checkout/shipping'
  },
  {
    label: "Payment",
    url: 'shop/test/checkout/payment'
  }
] %}

This will then make the following true for the current step and the width will be calculated.

{% if craft.request.requestUri|slice(1) == step.url %}
  {% set width = ((key + 1) * 100 / steps|length) - 20 %}
  {% set class = "sel" %}
  {% set currentStep = key %}
{% endif %}