How to create a reorder button in Shopify's Liquid

reorder-button.html

{% for order in customer.orders %}

  {% assign reorder_url = "" %}
    {% for line_item in order.line_items %}
      {% capture reorder_url %}{{ reorder_url | append: line_item.variant_id | append: ':' | append: line_item.quantity | append: ',' }}{% endcapture %}
  {% endfor %}

  <a href="{{ '/cart/' | append: reorder_url }}" class="button tiny">reorder</a>
{% endfor %}

Great!

Thanks a lot @magician11.

Currently, all the customer order URL's are given in a specific order page. It would be better to show only 1 order URL in an order page.
Please see the screenshot attached.

I'm not a coder. It would be amazing if you could update this for this scenario.
Thanks in advance.

Thanks a lot @magician11.

Currently, all the customer order URL's are given in a specific order page. It would be better to show only 1 order URL in an order page.
Please see the screenshot attached.

I'm not a coder. It would be amazing if you could update this for this scenario.
Thanks in advance.

@behhh I had a look, and it will most likely have to do with how your customers/account.liquid is structured. For example, you might need to update the code to add an extra column to a table row for each order. Like for example...

If you're still stuck since you're not a coder, get in touch and you're welcome to hire me to fix it up for you.

Made a fork with better code: https://gist.github.com/ADTC/63158892fb0dbf02180d2edd0baa9ca9

@rose-abc you need to have that key in your language files. For English, it may be en.default.json and for other languages, it will be xx.json where xx is the ISO code for the language.

Otherwise you can also replace {{ 'customer.orders.reorder' | t }} with a fixed text like Reorder. Note: If you do this, it won't change even if your site changes language.

Similarly, you need to apply the correct class for the button as well, in the code class="btn btn--filled". Look at the classes used in the existing buttons.

General warning: Don't copy-paste code from the internet without understanding what it does. In some cases, you could do irreversible damage.

@magician11 I would suggest the following edits to avoid whitespace in the url. Adding the strip property, some hypen into the capture and appending the cart url from the start worked much better for me, and stopped many errors.

{% for order in customer.orders %}

  {% assign _cart = "/cart/" %}
  {% assign reorder_url = "" %}

  {% for line_item in order.line_items %}
    {%- capture reorder_url -%}
      {{ reorder_url | append: _cart | append: line_item.variant_id | append: ':' | append: line_item.quantity | append: ',' | strip }}
    {%- endcapture -%}
  {% endfor %}

  <a href="{{ reorder_url | strip }}" class="button tiny">{{ 'customer.orders.reorder' | t }}</a>
{% endfor %}

This is a great help!
Thanks