Created
September 8, 2021 12:59
-
-
Save zorzv/65c8c7d674abaf9f15498e7a0605e572 to your computer and use it in GitHub Desktop.
Shopify Out for delivery with Line Properties
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% if fulfillment.item_count == item_count %} | |
{% capture email_title %}Your order is out for delivery{% endcapture %} | |
{% capture email_body %}Your order is out for delivery. Track your shipment to see the delivery status.{% endcapture %} | |
{% elsif fulfillment.item_count > 1 %} | |
{% if fulfillment_status == 'fulfilled' %} | |
{% capture email_title %}The last items in your order are out for delivery{% endcapture %} | |
{% capture email_body %}The last items in your order are out for delivery. Track your shipment to see the delivery status.{% endcapture %} | |
{% else %} | |
{% capture email_title %}Some items in your order are out for delivery{% endcapture %} | |
{% capture email_body %}Some items in your order are out for delivery. Track your shipment to see the delivery status.{% endcapture %} | |
{% endif %} | |
{% else %} | |
{% if fulfillment_status == 'fulfilled' %} | |
{% capture email_title %}The last item in your order is out for delivery{% endcapture %} | |
{% capture email_body %}The last item in your order is out for delivery. Track your shipment to see the delivery status.{% endcapture %} | |
{% else %} | |
{% capture email_title %}One item in your order is out for delivery{% endcapture %} | |
{% capture email_body %}One item in your order is out for delivery. Track your shipment to see the delivery status.{% endcapture %} | |
{% endif %} | |
{% endif %} | |
{% capture email_emphasis %}Estimated delivery date: <strong>{{fulfillment.estimated_delivery_at | date: format: 'date'}}</strong>{% endcapture %} | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>{{ email_title }}</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css"> | |
<style> | |
.button__cell { background: {{ shop.email_accent_color }}; } | |
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; } | |
</style> | |
</head> | |
<body> | |
<table class="body"> | |
<tr> | |
<td> | |
<table class="header row"> | |
<tr> | |
<td class="header__cell"> | |
<center> | |
<table class="container"> | |
<tr> | |
<td> | |
<table class="row"> | |
<tr> | |
<td class="shop-name__cell"> | |
{%- if shop.email_logo_url %} | |
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}"> | |
{%- else %} | |
<h1 class="shop-name__text"> | |
<a href="{{shop.url}}">{{ shop.name }}</a> | |
</h1> | |
{%- endif %} | |
</td> | |
<td class="order-number__cell"> | |
<span class="order-number__text"> | |
Order {{ order_name }} | |
</span> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</center> | |
</td> | |
</tr> | |
</table> | |
<table class="row content"> | |
<tr> | |
<td class="content__cell"> | |
<center> | |
<table class="container"> | |
<tr> | |
<td> | |
<h2>{{ email_title }}</h2> | |
<p>{{ email_body }}</p> | |
{% if fulfillment.estimated_delivery_at %} | |
<p>{{ email_emphasis }}</p> | |
{% endif %} | |
{% if order_status_url %} | |
<table class="row actions"> | |
<tr> | |
<td class="empty-line"> </td> | |
</tr> | |
<tr> | |
<td class="actions__cell"> | |
<table class="button main-action-cell"> | |
<tr> | |
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">Track my shipment</a></td> | |
</tr> | |
</table> | |
{% if shop.url %} | |
<table class="link secondary-action-cell"> | |
<tr> | |
<td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td> | |
</tr> | |
</table> | |
{% endif %} | |
</td> | |
</tr> | |
</table> | |
{% else %} | |
{% if shop.url %} | |
<table class="row actions"> | |
<tr> | |
<td class="actions__cell"> | |
<table class="button main-action-cell"> | |
<tr> | |
<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
{% endif %} | |
{% endif %} | |
{% if fulfillment.tracking_numbers.size > 0 %} | |
<p class="disclaimer__subtext"> | |
<br/> | |
{% if fulfillment.tracking_numbers.size == 1 and fulfillment.tracking_company and fulfillment.tracking_url %} | |
{{ fulfillment.tracking_company }} tracking number: <a href="{{ fulfillment.tracking_url }}">{{ fulfillment.tracking_numbers.first }}</a> | |
{% elsif fulfillment.tracking_numbers.size == 1 %} | |
Tracking number: {{ fulfillment.tracking_numbers.first }} | |
{% else %} | |
Tracking numbers:<br /> | |
{% for tracking_number in fulfillment.tracking_numbers %} | |
{{ tracking_number }}<br /> | |
{% endfor %} | |
{% endif %} | |
</p> | |
{% endif %} | |
</td> | |
</tr> | |
</table> | |
</center> | |
</td> | |
</tr> | |
</table> | |
<table class="row section"> | |
<tr> | |
<td class="section__cell"> | |
<center> | |
<table class="container"> | |
<tr> | |
<td> | |
<h3>Items in this shipment</h3> | |
</td> | |
</tr> | |
</table> | |
<table class="container"> | |
<tr> | |
<td> | |
<table class="row"> | |
{% for line in fulfillment.fulfillment_line_items %} | |
<tr class="order-list__item"> | |
<td class="order-list__item__cell"> | |
<table> | |
<td> | |
{% if line.line_item.image %} | |
<img src="{{ line.line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/> | |
{% endif %} | |
</td> | |
<td class="order-list__product-description-cell"> | |
{% if line.line_item.product.title %} | |
{% assign line_title = line.line_item.product.title %} | |
{% else %} | |
{% assign line_title = line.line_item.title %} | |
{% endif %} | |
{% if line.quantity < line.line_item.quantity %} | |
{% capture line_display %} {{ line.quantity }} of {{ line.line_item.quantity }} {% endcapture %} | |
{% else %} | |
{% assign line_display = line.line_item.quantity %} | |
{% endif %} | |
<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/> | |
{% if line.line_item.variant.title != 'Default Title' %} | |
<span class="order-list__item-variant">{{ line.line_item.variant.title }}</span><br/> | |
{% endif %} | |
{% for p in line.line_item.properties %}{% unless p.last == blank %} | |
<span class="order-list__item-personalised-box">{{ p.first }}: {{ p.last }}</span><br/> | |
{% endunless %}{% endfor %} | |
{% if line.line_item.selling_plan_allocation %} | |
<span class="order-list__item-variant">{{ line.line_item.selling_plan_allocation.selling_plan.name }}</span><br/> | |
{% endif %} | |
{% if line.line_item.refunded_quantity > 0 %} | |
<span class="order-list__item-refunded">Refunded</span> | |
{% endif %} | |
{% if line.line_item.discount_allocations %} | |
{% for discount_allocation in line.line_item.discount_allocations %} | |
{% if discount_allocation.discount_application.target_selection != 'all' %} | |
<span class="order-list__item-discount-allocation"> | |
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" /> | |
<span> | |
{{ discount_allocation.discount_application.title | upcase }} | |
(-{{ discount_allocation.amount | money }}) | |
</span> | |
</span> | |
{% endif %} | |
{% endfor %} | |
{% endif %} | |
</td> | |
</table> | |
</td> | |
</tr>{% endfor %} | |
</table> | |
</td> | |
</tr> | |
</table> | |
</center> | |
</td> | |
</tr> | |
</table> | |
<table class="row footer"> | |
<tr> | |
<td class="footer__cell"> | |
<center> | |
<table class="container"> | |
<tr> | |
<td> | |
<p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p> | |
</td> | |
</tr> | |
</table> | |
</center> | |
</td> | |
</tr> | |
</table> | |
<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" /> | |
</td> | |
</tr> | |
</table> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment