Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-28T09:19:41.437Z
Answers.Text: 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.
Answers.UserDisplayName: Dan Lee
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-28T09:07:24.100Z
Answers.LastActivityDate: 2016-06-28T10:35:20.247Z
Answers.LastEditDate: 2016-06-28T10:35:20.247Z
Answers.UserDisplayName: Luke Pearce
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-06-27T15:01:10.500Z
Comments.Text: 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.
Comments.UserDisplayName: Luke Pearce
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-06-27T15:25:07.310Z
Comments.Text: Looking at the code - it doesn't look like a percentage is getting added to the width value.
Comments.UserDisplayName: Dan Lee
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-06-27T16:33:01.493Z
Comments.Text: 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.
Comments.UserDisplayName: Luke Pearce
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-06-28T08:57:22.487Z
Comments.Text: Yep! Will post an answer.
Comments.UserDisplayName: Luke Pearce
Tags: <plugin-craftcommerce>
Title: Craft Commerce: Steps Bar in Checkout
ThreadText: # 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.
  
  ```
  <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>
  
  ```
  
  **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.  
  
  ---
  
  