List SKU on Customers "My Orders" Page.

Solved
Highlighted
New Member
2 0 0

I've created an example table on how it should look for a reference towards the subject.

 

chrome_2ZSeJaWgb7.png

As you can see by that screenshot you're currently in the "My Account" section of the website where it shows you past orders.

My customers order digital PDF files from my website and so they can easily find what PDF's they have purchased and currently the only way for them to find out what ones they have ordered is by clicking each individual order number and writing/remembering them.

 

What I'm trying (and failing) to do is alter the liquid file on the "My Account" screen to not just call the order details but I want to add the orders SKU codes that are included with that order as seen above.

 

I'm using the Debut theme if this helps, I'm not that familiar with liquid so I'm not fully understanding how it's being called but what I have noticed is that when you click the order number it takes you to the order page with all the information including SKU code but I can't find anywhere on that liquid file where it pulls that information from and I think that would be the way of pulling the information to the "My Account" page to display the SKU code for the orders.

 

I hope this makes sense, I have no idea how to explain this haha.

 

Thanks for any help.

 

0 Likes
Highlighted

Success.

Excursionist
21 5 7

Hello there, 

 

it is possible to access the orders object in liquid using this:

(ref: https://help.shopify.com/en/themes/liquid/objects/customer#customer-orders  ) 

{% for order in customer.orders %}
  {{ order.id }}
{% endfor %}

Then once you have the order object you can access the line_items in the order:

https://help.shopify.com/en/themes/liquid/objects/order#order-line_items

 

Then you would loop through the line-items and display the sku. 

Putting this all together would require some custom coding and testing before deploying but i managed to put this quickly together to point you in the right direction: (backup your theme before editing the code! this code has NOT been tested yet)

 

Go to your Themes -> Action -> Edit Code -> find the template under templates/customers/account.liquid and add this code wherever you want to display it:

<table style="width: 1%;" border="1">
<tbody>
<tr>
  <td>Order</td>
  <td>SKU</td>
  <td>Date</td>
  <td>Payment Status</td>
  <td>Fulfillment Status</td>
  <td>Total</td>
</tr>

{% for order in customer.orders %}
<tr>
  <td>{{ order.id }}</td>
  <td>
  {% for line_item in order.line_items %}
    {{ line_item.sku }};
  {% endfor %}
  </td>
  <td>{{ order.created_at | date: "%a, %b %d, %y" }}</td>
  <td>{{ order.financial_status_label }}</td>
  <td>{{ order.fulfillment_status_label }}</td>
  <td>{{ order.total_net_amount | money }}</td>
</tr>
{% endfor %}


</tbody>
</table>

Hope this helps.

1 Like
Highlighted
New Member
2 0 0

This is fantastic, thank you! 

 

This worked perfectly in calling the orders, and the SKU codes.

 

I've made some alterations to the code to remove some code that I felt wasn't needed and added some code to enhance it to how I would like it and came up with this:m2MIxR8Zow.png

 

So on desktop and tablet, everything looks great. I didn't realise though on my phone (Samsung Note 10+) the website before and after the change didn't allow me to scroll through the table to see it all, it stopped at the Payment Status. That's not all, when you click on an order it displays it very badly but I assume that's the theme itself because it was like it before I made the changes right? 

 

My last question, after altering this code (I have backed up the original), now it's displaying like this would there be any security risks like displaying other customers data? 

 

Thanks so much for your help in this!

 

0 Likes
Highlighted

Success.

Excursionist
21 5 7

Hello, 

 

glad to hear it works. 

 

Maybe try to set a style for the table like for example:

table {
  overflow: visible;
}

Or read up on the responsive tables (ref: https://codepen.io/martinwolf/pen/apbWNX/

 

When you click on the order you could style or adjust the /customers/order.liquid template. 

 

The code i suggested does not alter anything else it only shows the orders made by the customer, so there should not be any security issues because it can only display the orders made by the customer itself. 

 

If this helped you out, feel free to mark the answer above as the solution.

 

 

0 Likes