1

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>
  • 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 Jun 27 '16 at 15:01
  • Looking at the code - it doesn't look like a percentage is getting added to the width value. – Dan Lee Jun 27 '16 at 15:25
  • 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 Jun 27 '16 at 16:33
  • Yep! Will post an answer. – Luke Pearce Jun 28 '16 at 8:57
2

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 %}
| improve this answer | |
  • 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 Jun 28 '16 at 9:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.