Custom "New Order" email for staff

Highlighted
New Member
4 0 0

Hi there!

 

I am trying to edit my staff notification emails so that the orders will show up as a simple table. I have edited the code, but if the order has more than 2 items the table messes up.:

table_html.PNG

Any idea why? Here's the code:

<p>Hello {{ shop_name }},</p>
<p></p>
<p>
{% assign current_datetime = date | date: "%b %d %I:%M%p" %}
{% if customer.name %}
{{ customer.name }} placed a new order with your store, {{ current_datetime }}:
{% else %}
Someone placed a new order with your store, {{ current_datetime }}:
{% endif %}
</p>
<p></p>
<ul>
<table>
<tr>
<th>Item</th>
<th>Sku</th>
<th>Part Number</th>
<th>Qty</th>
<th>Subtotal</th>
</tr>
</table>
<table>
<tr>
{% for line in subtotal_line_items %}
<td><img src="{{ line | img_url: 'thumb' }}" /></td>
<td>{{ line.title }}</td>
<td>{{ line.sku }}</td>
<td>{{ line.quantity }}</td>
<td>{{ line.price | money }}</td>
</tr>
{% endfor %}
</table>

</ul>
<a href="https://{{ shop.permanent_domain }}/admin/orders/{{ id }}">View order {{ order_name }}</a>
{% if fulfillment_aborted %}
<p>The above order was not automatically fulfilled because it was flagged as suspicious.</p>
{% endif %}
<p></p><br>
{% if has_high_risks? %}
<p><b>Security check:</b></p>
<p>This order has a risk of being fraudulent. Review the order in your store's admin and contact the customer to verify their information.</p>
<p></p>
{% endif %}
{% if gateway %}
<p><b>Payment processing method:</b></p>
<p>{{ gateway }}</p>
<p></p>
{% endif %}
{% if requires_shipping and shipping_address %}
<p><b>Delivery method:</b></p>
{% for shipping_method in shipping_methods %}
<p>{{ shipping_method.title }}</p>
{% endfor %}
<p></p>
<p><b>Shipping address:</b></p>
<p>{{ shipping_address.name }}</p>
<p>{{ shipping_address.street }}</p>
<p>{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}</p>
<p>{{ shipping_address.country }}</p>
<p>{{ shipping_address.phone }}{% endif %}</p>
<p></p>

{% if shopify_shipping_enabled %}
<p>Save time and money by <a href="{{ fulfillment_url }}">fulfilling with Shopify Shipping</a></p>
<p></p>
{% endif %}

Any help you can provide will be greatly appreciated. 

Thanks!

0 Likes
Highlighted

Hi @amanns 

Without testing it. You put the for loop inside the <tr>, <tr> stands for table row. So you're essentially putting all the data<td> within 1 row obviously if the row doesn't fit it starts a new line. But they are all apart of the same <tr>

Try putting the <tr> within the for loop. also why do you have 2 tables for the header and the products themselves? spend an hour learning about HTML tables

https://www.w3schools.com/html/html_tables.asp

Learn what <th>, <tr> and <td> does.

Essentially withn the table, the headers would be in a <th>, each <tr> has the <td> data.

<tr>
<th>Item</th>
<th>Sku</th>
<th>Part Number</th>
<th>Qty</th>
<th>Subtotal</th>
</tr>
</table>
<table>
<tr>
{% for line in subtotal_line_items %}
<td><img src="{{ line | img_url: 'thumb' }}" /></td>
<td>{{ line.title }}</td>
<td>{{ line.sku }}</td>
<td>{{ line.quantity }}</td>
<td>{{ line.price | money }}</td>
</tr>
{% endfor %}
</table>

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes