<p>The Craft Commerce example template's include a file called <code>meter.html</code> to display the progress bar.</p>

<p>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.</p>

<p>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.</p>

<p>Something along the following lines will likely be what you need:</p>

<pre><code>{% 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'
  }
] %}
</code></pre>

<p>This will then make the following <code>true</code> for the current step and the width will be calculated.</p>

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

CC BY-SA 3.0
2016-06-28T09:19:41.437Z
This works but if craft is installed into the subfolder "shop" and commerce is "inkjet-flex" then the links will not take you to the correct page in the checkout - although the visual steps meter does work.
Dan Lee
CC BY-SA 3.0
2016-06-28T09:07:24.100Z
2016-06-28T10:35:20.247Z
2016-06-28T10:35:20.247Z
Luke Pearce
<p>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.</p>

<p>The url for my checkout is page is: <code>website.com/shop/test/checkout</code></p>

<p>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.</p>

<p>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.</p>

<pre><code>&lt;div class="steps"&gt;
  &lt;ul&gt;
    {% 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 %}

      &lt;li class="{{ class }}"&gt;&lt;a href="{{ url( step.url ) }}"&gt;{{ step.label }}&lt;/a&gt;&lt;/li&gt;
    {% endfor %}
  &lt;/ul&gt;

  &lt;div class="meter"&gt;
    &lt;span style="width: {{ width }}%"&gt;&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

CC BY-SA 3.0
2016-06-27T15:01:10.500Z
Are you using only the example templates in their original form? My guess is that you may have CSS rules being applied that overwrite the width property - it works as expected for me.
Luke Pearce
CC BY-SA 3.0
2016-06-27T15:25:07.310Z
Looking at the code - it doesn't look like a percentage is getting added to the width value.
Dan Lee
CC BY-SA 3.0
2016-06-27T16:33:01.493Z
Are you testing these templates by adding the `commerce` folder to your template directory and viewing `http://website.com/commerce`? If your url's don't match the url's in the `steps` array it won't work.
Luke Pearce
CC BY-SA 3.0
2016-06-28T08:57:22.487Z
Yep! Will post an answer.
Luke Pearce
<plugin-craftcommerce>
Craft Commerce: Steps Bar in Checkout
# Craft Commerce: Steps Bar in Checkout

(Asked by: username_0 on 2016-06-27)

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.

  
    {% 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 %}

      {{ step.label }}
    {% endfor %}

**Tags:** plugin-craftcommerce
> **Comments:**
> **username_1**: Are you using only the example templates in their original form? My guess is that you may have CSS rules being applied that overwrite the width property - it works as expected for me.  
> **username_0**: Looking at the code - it doesn't look like a percentage is getting added to the width value.  
> **username_1**: Are you testing these templates by adding the `commerce` folder to your template directory and viewing `http://website.com/commerce`? If your url's don't match the url's in the `steps` array it won't work.  
> **username_1**: Yep! Will post an answer.  

---

## 1 answers

### Answer by username_1 on 2016-06-28. Score: 2 | Accepted answer

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 %}

> **Comments:**
> **username_0**: This works but if craft is installed into the subfolder "shop" and commerce is "inkjet-flex" then the links will not take you to the correct page in the checkout - although the visual steps meter does work.  

---

