Orders
<div data-section-id="{{ section.id }}" class="customer--root">
<div class="customer--wrapper">
<h1 data-item="section-heading">{{ 'customer.order.page_title' | t: name: order.name }} <span class="note order_date"> — {{ order.created_at | time_tag: format: 'date' }} </span></h1>
<div class="account--breadcrumb-container">{% render 'breadcrumbs' %}</div>
{% if order.cancelled %}
<div class="flash notice" id="order_cancelled">
<h5 id="order_cancelled_title">{{ 'customer.order.cancelled' | t }} <span class="note">{{ order.cancelled_at | time_tag: format: 'date' }}</span></h5>
<span class="note">{{ order.cancel_reason }}</span></div>
{% endif %}
<div class="columns" id="order_payment">
<h2 data-item="block-heading">{{ 'customer.order.billing_address' | t }}</h2>
<p><span class="note">{{ 'customer.order.payment_status' | t }}:</span> <span class="status_{{ order.financial_status }}"> {%- liquid assign trans_paid = 'customer.order.paid' | t assign trans_pending = 'customer.order.pending' | t assign trans_authorized = 'customer.order.authorized' | t assign trans_abandoned = 'customer.order.abandoned' | t assign trans_refunded = 'customer.order.refunded' | t assign trans_voided = 'customer.order.voided' | t -%} <em> {{ order.financial_status | replace: 'paid', trans_paid | replace: 'pending', trans_pending | replace: 'authorized', trans_authorized | replace: 'abandoned', trans_abandoned | replace: 'refunded', trans_refunded | replace: 'voided', trans_voided }} </em></span></p>
<div class="address--view" date-item="paragraph">
<p>{{ order.billing_address.name }}</p>
<p>{{ order.billing_address.company }}</p>
<p>{{ order.billing_address.street }}</p>
<p>{{ order.billing_address.city }}, {{ order.billing_address.province }}</p>
<p>{{ order.billing_address.country }} {{ order.billing_address.zip }}</p>
<p>{{ order.billing_address.phone }}</p>
</div>
</div>
{% if order.shipping_address %}
<div class="columns" id="order_shipping">
<h2 data-item="block-heading">{{ 'customer.order.shipping_address' | t }}</h2>
<p><span class="note">{{ 'customer.order.fulfillment_status' | t }}:</span> <span class="status_{{ order.fulfillment_status }}"> <em> {% assign trans_fulfilled = 'customer.order.fulfilled' | t %} {% assign trans_unfulfilled = 'customer.order.unfulfilled' | t %} {% assign trans_partial = 'customer.order.unfulfilled' | t %} {{ order.fulfillment_status | replace: 'unfulfilled', trans_unfulfilled | replace: 'fulfilled', trans_fulfilled | replace: 'partial', trans_partial }} </em></span></p>
<div class="address--view">
<p>{{ order.shipping_address.name }}</p>
<p>{{ order.shipping_address.company }}</p>
<p>{{ order.shipping_address.street }}</p>
<p>{{ order.shipping_address.city }}, {{ order.shipping_address.province }}</p>
<p>{{ order.shipping_address.country }} {{ order.shipping_address.zip }}</p>
<p>{{ order.shipping_address.phone }}</p>
</div>
</div>
{% endif %} {% for line_item in order.line_items %} {% endfor %} {%- if order.cart_level_discount_applications != blank -%} {%- for discount_application in order.cart_level_discount_applications -%} {%- endfor -%} {%- endif -%} {% for shipping_method in order.shipping_methods %} {% endfor %} {% for tax_line in order.tax_lines %} {% endfor %}
<table class="order--table responsive" id="order_details">
<thead>
<tr data-item="accent-text">
<th>{{ 'customer.order.item' | t }}</th>
<th>{{ 'customer.order.sku' | t }}</th>
<th>{{ 'customer.order.price' | t }}</th>
<th>{{ 'customer.order.quantity' | t }}</th>
<th class="order--heading--total">{{ 'customer.order.total' | t }}</th>
</tr>
</thead>
<tbody>
<tr id="{{ line_item.id }}">
<td data-label="{{ 'customer.order.item' | t }}" data-item="paragraph" class="order--item--title">{{ line_item.title | link_to: line_item.product.url }} {% if line_item.selling_plan_allocation %}
<div data-item="small-text" class="order--selling-plan">{{ line_item.selling_plan_allocation.selling_plan.name }}</div>
{% endif %} {% if line_item.fulfillment %}
<div class="note">{% assign date = line_item.fulfillment.created_at | time_tag: format: 'date' %} {{ 'customer.order.fulfilled_at' | t: date: date }}<br> {{ 'customer.order.tracking_company' | t }}: {{ line_item.fulfillment.tracking_company }} <br> {% if line_item.fulfillment.tracking_number %} {{ 'customer.order.tracking_number' | t }}: {{ line_item.fulfillment.tracking_number }} <br> {% endif %} {% if line_item.fulfillment.tracking_url %} <a href="{{%20line_item.fulfillment.tracking_url%20}}"> {{ 'customer.order.track_shipment' | t }} </a> {% endif %}</div>
{% endif %}</td>
<td data-label="{{ 'customer.order.sku' | t }}" class="order--item--sku">
<div data-item="accent-text">{{ line_item.sku }}</div>
</td>
<td data-label="{{ 'customer.order.price' | t }}" data-item="accent-text" class="order--item--price">{% if line_item.original_line_price > line_item.final_line_price %}
<div data-item="light-accent-text"><s class="money">{{ line_item.original_price | money }}</s></div>
{% endif %}
<div data-item="accent-text" class="money">{{ line_item.final_price | money }}</div>
<div data-item="light-accent-text" class="order--item--unit-price-container">{% if line_item.unit_price_measurement %} {{- line_item.unit_price | money -}}/ {%- if line_item.unit_price_measurement.reference_value != 1 -%} {{- line_item.unit_price_measurement.reference_value -}} {%- endif -%} {{ line_item.unit_price_measurement.reference_unit }} {% endif %}</div>
{% if line_item.line_level_discount_allocations.size > 0 %}
<div data-item="light-accent-text">{% for discount_allocation in line_item.line_level_discount_allocations %} {{ discount_allocation.discount_application.title }} (-<span class="money">{{ discount_allocation.amount | money }}</span>) {% endfor %}</div>
{% endif %}</td>
<td data-label="{{ 'customer.order.quantity' | t }}" data-item="accent-text" class="order--item--quantity">{{ line_item.quantity }}</td>
<td data-label="{{ 'customer.order.total' | t }}" data-item="accent-text" class="order--item--total">{% if line_item.original_line_price > line_item.final_line_price %}
<div data-item="light-accent-text"><s class="money">{{ line_item.original_line_price | money }}</s></div>
{% endif %}
<div class="money">{{ line_item.quantity | times: line_item.final_price | money }}</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr class="order--summary">
<td>{{ 'customer.order.subtotal' | t }}</td>
<td colspan="3"></td>
<td data-item="accent-text" class="order--item--total money">{{ order.line_items_subtotal_price | money }}</td>
</tr>
<tr>
<td colspan="4">
<div class="order--discount--label">{{ 'customer.order.discount' | t }}</div>
<div data-item="light-accent-text">{{ discount_application.title }}</div>
</td>
<td data-item="light-accent-text" class="order--discount">-<span class="money">{{ discount_application.total_allocated_amount | money }}</span></td>
</tr>
<tr>
<td>{{ shipping_method.title }}:</td>
<td colspan="3"></td>
<td data-item="accent-text" class="order--item--total money">{{ shipping_method.price | money }}</td>
</tr>
<tr>
<td>{{ tax_line.title }} {{ tax_line.rate | times: 100 }}%:</td>
<td colspan="3"></td>
<td data-item="accent-text" class="order--item--total money">{{ tax_line.price | money }}</td>
</tr>
<tr>
<td>{{ 'customer.order.total' | t }}</td>
<td colspan="3"></td>
<td data-item="accent-text" class="order--item--total money">{{ order.total_price | money }} {{ order.currency }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="customer--wrapper">
<h1 data-item="section-heading">{{ 'customer.order.page_title' | t: name: order.name }} <span class="note order_date"> — {{ order.created_at | time_tag: format: 'date' }} </span></h1>
<div class="account--breadcrumb-container">{% render 'breadcrumbs' %}</div>
{% if order.cancelled %}
<div class="flash notice" id="order_cancelled">
<h5 id="order_cancelled_title">{{ 'customer.order.cancelled' | t }} <span class="note">{{ order.cancelled_at | time_tag: format: 'date' }}</span></h5>
<span class="note">{{ order.cancel_reason }}</span></div>
{% endif %}
<div class="columns" id="order_payment">
<h2 data-item="block-heading">{{ 'customer.order.billing_address' | t }}</h2>
<p><span class="note">{{ 'customer.order.payment_status' | t }}:</span> <span class="status_{{ order.financial_status }}"> {%- liquid assign trans_paid = 'customer.order.paid' | t assign trans_pending = 'customer.order.pending' | t assign trans_authorized = 'customer.order.authorized' | t assign trans_abandoned = 'customer.order.abandoned' | t assign trans_refunded = 'customer.order.refunded' | t assign trans_voided = 'customer.order.voided' | t -%} <em> {{ order.financial_status | replace: 'paid', trans_paid | replace: 'pending', trans_pending | replace: 'authorized', trans_authorized | replace: 'abandoned', trans_abandoned | replace: 'refunded', trans_refunded | replace: 'voided', trans_voided }} </em></span></p>
<div class="address--view" date-item="paragraph">
<p>{{ order.billing_address.name }}</p>
<p>{{ order.billing_address.company }}</p>
<p>{{ order.billing_address.street }}</p>
<p>{{ order.billing_address.city }}, {{ order.billing_address.province }}</p>
<p>{{ order.billing_address.country }} {{ order.billing_address.zip }}</p>
<p>{{ order.billing_address.phone }}</p>
</div>
</div>
{% if order.shipping_address %}
<div class="columns" id="order_shipping">
<h2 data-item="block-heading">{{ 'customer.order.shipping_address' | t }}</h2>
<p><span class="note">{{ 'customer.order.fulfillment_status' | t }}:</span> <span class="status_{{ order.fulfillment_status }}"> <em> {% assign trans_fulfilled = 'customer.order.fulfilled' | t %} {% assign trans_unfulfilled = 'customer.order.unfulfilled' | t %} {% assign trans_partial = 'customer.order.unfulfilled' | t %} {{ order.fulfillment_status | replace: 'unfulfilled', trans_unfulfilled | replace: 'fulfilled', trans_fulfilled | replace: 'partial', trans_partial }} </em></span></p>
<div class="address--view">
<p>{{ order.shipping_address.name }}</p>
<p>{{ order.shipping_address.company }}</p>
<p>{{ order.shipping_address.street }}</p>
<p>{{ order.shipping_address.city }}, {{ order.shipping_address.province }}</p>
<p>{{ order.shipping_address.country }} {{ order.shipping_address.zip }}</p>
<p>{{ order.shipping_address.phone }}</p>
</div>
</div>
{% endif %} {% for line_item in order.line_items %} {% endfor %} {%- if order.cart_level_discount_applications != blank -%} {%- for discount_application in order.cart_level_discount_applications -%} {%- endfor -%} {%- endif -%} {% for shipping_method in order.shipping_methods %} {% endfor %} {% for tax_line in order.tax_lines %} {% endfor %}
<table class="order--table responsive" id="order_details">
<thead>
<tr data-item="accent-text">
<th>{{ 'customer.order.item' | t }}</th>
<th>{{ 'customer.order.sku' | t }}</th>
<th>{{ 'customer.order.price' | t }}</th>
<th>{{ 'customer.order.quantity' | t }}</th>
<th class="order--heading--total">{{ 'customer.order.total' | t }}</th>
</tr>
</thead>
<tbody>
<tr id="{{ line_item.id }}">
<td data-label="{{ 'customer.order.item' | t }}" data-item="paragraph" class="order--item--title">{{ line_item.title | link_to: line_item.product.url }} {% if line_item.selling_plan_allocation %}
<div data-item="small-text" class="order--selling-plan">{{ line_item.selling_plan_allocation.selling_plan.name }}</div>
{% endif %} {% if line_item.fulfillment %}
<div class="note">{% assign date = line_item.fulfillment.created_at | time_tag: format: 'date' %} {{ 'customer.order.fulfilled_at' | t: date: date }}<br> {{ 'customer.order.tracking_company' | t }}: {{ line_item.fulfillment.tracking_company }} <br> {% if line_item.fulfillment.tracking_number %} {{ 'customer.order.tracking_number' | t }}: {{ line_item.fulfillment.tracking_number }} <br> {% endif %} {% if line_item.fulfillment.tracking_url %} <a href="{{%20line_item.fulfillment.tracking_url%20}}"> {{ 'customer.order.track_shipment' | t }} </a> {% endif %}</div>
{% endif %}</td>
<td data-label="{{ 'customer.order.sku' | t }}" class="order--item--sku">
<div data-item="accent-text">{{ line_item.sku }}</div>
</td>
<td data-label="{{ 'customer.order.price' | t }}" data-item="accent-text" class="order--item--price">{% if line_item.original_line_price > line_item.final_line_price %}
<div data-item="light-accent-text"><s class="money">{{ line_item.original_price | money }}</s></div>
{% endif %}
<div data-item="accent-text" class="money">{{ line_item.final_price | money }}</div>
<div data-item="light-accent-text" class="order--item--unit-price-container">{% if line_item.unit_price_measurement %} {{- line_item.unit_price | money -}}/ {%- if line_item.unit_price_measurement.reference_value != 1 -%} {{- line_item.unit_price_measurement.reference_value -}} {%- endif -%} {{ line_item.unit_price_measurement.reference_unit }} {% endif %}</div>
{% if line_item.line_level_discount_allocations.size > 0 %}
<div data-item="light-accent-text">{% for discount_allocation in line_item.line_level_discount_allocations %} {{ discount_allocation.discount_application.title }} (-<span class="money">{{ discount_allocation.amount | money }}</span>) {% endfor %}</div>
{% endif %}</td>
<td data-label="{{ 'customer.order.quantity' | t }}" data-item="accent-text" class="order--item--quantity">{{ line_item.quantity }}</td>
<td data-label="{{ 'customer.order.total' | t }}" data-item="accent-text" class="order--item--total">{% if line_item.original_line_price > line_item.final_line_price %}
<div data-item="light-accent-text"><s class="money">{{ line_item.original_line_price | money }}</s></div>
{% endif %}
<div class="money">{{ line_item.quantity | times: line_item.final_price | money }}</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr class="order--summary">
<td>{{ 'customer.order.subtotal' | t }}</td>
<td colspan="3"></td>
<td data-item="accent-text" class="order--item--total money">{{ order.line_items_subtotal_price | money }}</td>
</tr>
<tr>
<td colspan="4">
<div class="order--discount--label">{{ 'customer.order.discount' | t }}</div>
<div data-item="light-accent-text">{{ discount_application.title }}</div>
</td>
<td data-item="light-accent-text" class="order--discount">-<span class="money">{{ discount_application.total_allocated_amount | money }}</span></td>
</tr>
<tr>
<td>{{ shipping_method.title }}:</td>
<td colspan="3"></td>
<td data-item="accent-text" class="order--item--total money">{{ shipping_method.price | money }}</td>
</tr>
<tr>
<td>{{ tax_line.title }} {{ tax_line.rate | times: 100 }}%:</td>
<td colspan="3"></td>
<td data-item="accent-text" class="order--item--total money">{{ tax_line.price | money }}</td>
</tr>
<tr>
<td>{{ 'customer.order.total' | t }}</td>
<td colspan="3"></td>
<td data-item="accent-text" class="order--item--total money">{{ order.total_price | money }} {{ order.currency }}</td>
</tr>
</tbody>
</table>
</div>
</div>