378 lines
16 KiB
Plaintext
378 lines
16 KiB
Plaintext
{{ 'customer.css' | asset_url | stylesheet_tag }}
|
|
|
|
{%- style -%}
|
|
.section-{{ section.id }}-padding {
|
|
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
|
|
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
|
|
}
|
|
|
|
@media screen and (min-width: 750px) {
|
|
.section-{{ section.id }}-padding {
|
|
padding-top: {{ section.settings.padding_top }}px;
|
|
padding-bottom: {{ section.settings.padding_bottom }}px;
|
|
}
|
|
}
|
|
{%- endstyle -%}
|
|
|
|
<div class="customer order section-{{ section.id }}-padding">
|
|
<svg style="display:none">
|
|
<symbol id="icon-discount" viewBox="0 0 12 12">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0h3a2 2 0 012 2v3a1 1 0 01-.3.7l-6 6a1 1 0 01-1.4 0l-4-4a1 1 0 010-1.4l6-6A1 1 0 017 0zm2 2a1 1 0 102 0 1 1 0 00-2 0z" fill="currentColor">
|
|
</symbol>
|
|
</svg>
|
|
<div>
|
|
<h1 class="customer__title">{{ 'customer.account.title' | t }}</h1>
|
|
<a href="{{ routes.account_url }}">{{ 'customer.account.return' | t }}</a>
|
|
</div>
|
|
|
|
<div>
|
|
<div>
|
|
<h2>{{ 'customer.order.title' | t: name: order.name }}</h2>
|
|
{%- assign order_date = order.created_at | time_tag: format: 'date_at_time' -%}
|
|
<p>{{ 'customer.order.date_html' | t: date: order_date }}</p>
|
|
{%- if order.cancelled -%}
|
|
{%- assign cancelled_at = order.cancelled_at | time_tag: format: 'date_at_time' -%}
|
|
<p>{{ 'customer.order.cancelled_html' | t: date: cancelled_at }}</p>
|
|
<p>{{ 'customer.order.cancelled_reason' | t: reason: order.cancel_reason_label }}</p>
|
|
{%- endif -%}
|
|
|
|
<table role="table" class="order-details">
|
|
<caption class="visually-hidden">
|
|
{{ 'customer.order.title' | t: name: order.name }}
|
|
</caption>
|
|
<thead role="rowgroup">
|
|
<tr role="row">
|
|
<th id="ColumnProduct" scope="col" role="columnheader">{{ 'customer.order.product' | t }}</th>
|
|
<th id="ColumnSku" scope="col" role="columnheader">{{ 'customer.order.sku' | t }}</th>
|
|
<th id="ColumnPrice" scope="col" role="columnheader">{{ 'customer.order.price' | t }}</th>
|
|
<th id="ColumnQuantity" scope="col" role="columnheader">{{ 'customer.order.quantity' | t }}</th>
|
|
<th id="ColumnTotal" scope="col" role="columnheader">{{ 'customer.order.total' | t }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody role="rowgroup">
|
|
{%- for line_item in order.line_items -%}
|
|
<tr role="row">
|
|
<td
|
|
id="Row{{ line_item.key }}"
|
|
headers="ColumnProduct"
|
|
role="rowheader"
|
|
scope="row"
|
|
data-label="{{ 'customer.order.product' | t }}"
|
|
>
|
|
<div>
|
|
{%- if line_item.url != blank -%}
|
|
<a href="{{ line_item.url }}">{{ line_item.title }}</a>
|
|
{%- else -%}
|
|
<p>{{ line_item.title }}</p>
|
|
{%- endif -%}
|
|
{%- assign property_size = line_item.properties | size -%}
|
|
{%- unless line_item.selling_plan_allocation == null and property_size == 0 -%}
|
|
<div class="properties">
|
|
{%- unless line_item.product.has_only_default_variant -%}
|
|
<span>
|
|
{{ line_item.variant.title }}
|
|
</span>
|
|
{%- endunless -%}
|
|
{%- unless line_item.selling_plan_allocation == null -%}
|
|
<span>
|
|
{{ line_item.selling_plan_allocation.selling_plan.name }}
|
|
</span>
|
|
{%- endunless -%}
|
|
{%- if property_size != 0 -%}
|
|
{%- for property in line_item.properties -%}
|
|
{% assign property_first_char = property.first | slice: 0 %}
|
|
{%- if property.last != blank and property_first_char != '_' -%}
|
|
<span>{{ property.first }}:</span>
|
|
<span>
|
|
{%- if property.last contains '/uploads/' -%}
|
|
<a href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
|
|
{%- else -%}
|
|
{{ property.last }}
|
|
{%- endif -%}
|
|
</span>
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endunless -%}
|
|
|
|
{%- if line_item.line_level_discount_allocations != blank -%}
|
|
<ul role="list" aria-label="{{ 'customer.order.discount' | t }}">
|
|
{%- for discount_allocation in line_item.line_level_discount_allocations -%}
|
|
<li>
|
|
<svg aria-hidden="true" focusable="false" viewBox="0 0 12 12">
|
|
<use href="#icon-discount" />
|
|
</svg>
|
|
{{- discount_allocation.discount_application.title }} (-
|
|
{{- discount_allocation.amount | money -}}
|
|
)
|
|
</li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
{%- endif -%}
|
|
|
|
{%- if line_item.fulfillment -%}
|
|
<div class="fulfillment">
|
|
{%- assign created_at = line_item.fulfillment.created_at | time_tag: format: 'date' -%}
|
|
<span>{{ 'customer.order.fulfilled_at_html' | t: date: created_at }}</span>
|
|
|
|
{%- if line_item.fulfillment.tracking_url -%}
|
|
<a href="{{ line_item.fulfillment.tracking_url }}">
|
|
{{ 'customer.order.track_shipment' | t }}
|
|
</a>
|
|
{%- endif -%}
|
|
<span>
|
|
{{ line_item.fulfillment.tracking_company }}
|
|
{%- if line_item.fulfillment.tracking_number -%}
|
|
#{{ line_item.fulfillment.tracking_number }}
|
|
{%- endif -%}
|
|
</span>
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
</td>
|
|
<td
|
|
headers="Row{{ line_item.key }} ColumnSku"
|
|
role="cell"
|
|
data-label="{{ 'customer.order.sku' | t }}"
|
|
>
|
|
{{ line_item.sku }}
|
|
</td>
|
|
<td
|
|
headers="Row{{ line_item.key }} ColumnPrice"
|
|
role="cell"
|
|
data-label="{{ 'customer.order.price' | t }}"
|
|
>
|
|
{%- if line_item.original_price != line_item.final_price or line_item.unit_price_measurement -%}
|
|
<dl>
|
|
{%- if line_item.original_price != line_item.final_price -%}
|
|
<dt>
|
|
<span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
|
|
</dt>
|
|
<dd class="regular-price">
|
|
<s>{{ line_item.original_price | money }}</s>
|
|
</dd>
|
|
<dt>
|
|
<span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
|
|
</dt>
|
|
<dd>
|
|
<span>{{ line_item.final_price | money }}</span>
|
|
</dd>
|
|
{%- else -%}
|
|
<dt>
|
|
<span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
|
|
</dt>
|
|
<dd>
|
|
{{ line_item.original_price | money }}
|
|
</dd>
|
|
{%- endif -%}
|
|
{%- if line_item.unit_price_measurement -%}
|
|
<dt>
|
|
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
|
|
</dt>
|
|
<dd class="unit-price">
|
|
<span>
|
|
{%- capture unit_price_separator -%}
|
|
<span aria-hidden="true">/</span
|
|
><span class="visually-hidden">{{ 'accessibility.unit_price_separator' | t }} </span>
|
|
{%- endcapture -%}
|
|
{%- capture unit_price_base_unit -%}
|
|
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
|
|
{{- line_item.unit_price_measurement.reference_value -}}
|
|
{%- endif -%}
|
|
{{ line_item.unit_price_measurement.reference_unit }}
|
|
{%- endcapture -%}
|
|
<span data-unit-price>{{ line_item.unit_price | money }}</span>
|
|
{{- unit_price_separator -}}
|
|
{{- unit_price_base_unit -}}
|
|
</span>
|
|
</dd>
|
|
{%- endif -%}
|
|
</dl>
|
|
{%- else -%}
|
|
<span>{{ line_item.final_price | money }}</span>
|
|
{%- endif -%}
|
|
</td>
|
|
<td
|
|
headers="Row{{ line_item.key }} ColumnQuantity"
|
|
role="cell"
|
|
data-label="{{ 'customer.order.quantity' | t }}"
|
|
>
|
|
{{ line_item.quantity }}
|
|
</td>
|
|
<td
|
|
headers="Row{{ line_item.key }} ColumnTotal"
|
|
role="cell"
|
|
data-label="{{ 'customer.order.total' | t }}"
|
|
>
|
|
{%- if line_item.original_line_price != line_item.final_line_price -%}
|
|
<dl>
|
|
<dt>
|
|
<span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
|
|
</dt>
|
|
<dd class="regular-price">
|
|
<s>{{ line_item.original_line_price | money }}</s>
|
|
</dd>
|
|
<dt>
|
|
<span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
|
|
</dt>
|
|
<dd>
|
|
<span>{{ line_item.final_line_price | money }}</span>
|
|
</dd>
|
|
</dl>
|
|
{%- else -%}
|
|
{{ line_item.original_line_price | money }}
|
|
{%- endif -%}
|
|
</td>
|
|
</tr>
|
|
{%- endfor -%}
|
|
</tbody>
|
|
<tfoot role="rowgroup">
|
|
<tr role="row">
|
|
<td id="RowSubtotal" role="rowheader" scope="row" colspan="4">
|
|
{{ 'customer.order.subtotal' | t }}
|
|
</td>
|
|
<td headers="RowSubtotal" role="cell" data-label="{{ 'customer.order.subtotal' | t }}">
|
|
{{ order.line_items_subtotal_price | money }}
|
|
</td>
|
|
</tr>
|
|
{%- if order.cart_level_discount_applications != blank -%}
|
|
<tr role="row">
|
|
{%- for discount_application in order.cart_level_discount_applications -%}
|
|
<td id="RowDiscount" role="rowheader" scope="row" colspan="4">
|
|
{{ 'customer.order.discount' | t }}
|
|
<span class="cart-discount">
|
|
<svg aria-hidden="true" focusable="false" viewBox="0 0 12 12">
|
|
<use href="#icon-discount" />
|
|
</svg>
|
|
{{- discount_application.title -}}
|
|
</span>
|
|
</td>
|
|
<td headers="RowDiscount" role="cell" data-label="{{ 'customer.order.discount' | t }}">
|
|
<div>
|
|
<span>-{{ discount_application.total_allocated_amount | money }}</span>
|
|
<span class="cart-discount">
|
|
<svg aria-hidden="true" focusable="false" viewBox="0 0 12 12">
|
|
<use href="#icon-discount" />
|
|
</svg>
|
|
{{- discount_application.title -}}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
{%- endfor -%}
|
|
</tr>
|
|
{%- endif -%}
|
|
{%- for shipping_method in order.shipping_methods -%}
|
|
<tr role="row">
|
|
<td id="RowShipping" role="rowheader" scope="row" colspan="4">
|
|
{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }})
|
|
</td>
|
|
<td
|
|
headers="RowShipping"
|
|
role="cell"
|
|
data-label="{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }})"
|
|
>
|
|
{{ shipping_method.price | money }}
|
|
</td>
|
|
</tr>
|
|
{%- endfor -%}
|
|
{%- for tax_line in order.tax_lines -%}
|
|
<tr role="row">
|
|
<td id="RowTax" role="rowheader" scope="row" colspan="4">
|
|
{{ 'customer.order.tax' | t }} ({{ tax_line.title }}
|
|
{{ tax_line.rate | times: 100 }}%)
|
|
</td>
|
|
<td
|
|
headers="RowTax"
|
|
role="cell"
|
|
data-label="{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%)"
|
|
>
|
|
{{ tax_line.price | money }}
|
|
</td>
|
|
</tr>
|
|
{%- endfor -%}
|
|
{%- if order.total_duties -%}
|
|
<tr role="row">
|
|
<td id="RowDuties" role="rowheader" scope="row" colspan="4">{{ 'customer.order.total_duties' | t }}</td>
|
|
<td headers="RowDuties" role="cell" data-label="{{ 'customer.order.total_duties' | t }}">
|
|
{{ order.total_duties | money }}
|
|
</td>
|
|
</tr>
|
|
{%- endif -%}
|
|
{%- if order.total_refunded_amount > 0 -%}
|
|
<tr role="row">
|
|
<td id="RowTotalRefund" role="rowheader" scope="row" colspan="3">
|
|
{{ 'customer.order.total_refunded' | t }}
|
|
</td>
|
|
<td
|
|
headers="RowTotalRefund"
|
|
role="cell"
|
|
colspan="2"
|
|
data-label="{{ 'customer.order.total_refunded' | t }}"
|
|
>
|
|
-{{ order.total_refunded_amount | money_with_currency }}
|
|
</td>
|
|
</tr>
|
|
{%- endif -%}
|
|
<tr role="row">
|
|
<td id="RowTotal" role="rowheader" scope="row" colspan="3">{{ 'customer.order.total' | t }}</td>
|
|
<td headers="RowTotal" role="cell" colspan="2" data-label="{{ 'customer.order.total' | t }}">
|
|
{{ order.total_net_amount | money_with_currency }}
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<h2>{{ 'customer.order.billing_address' | t }}</h2>
|
|
<p>
|
|
<strong>{{ 'customer.order.payment_status' | t }}:</strong>
|
|
{{ order.financial_status_label }}
|
|
</p>
|
|
{{ order.billing_address | format_address }}
|
|
</div>
|
|
<div>
|
|
<h2>{{ 'customer.order.shipping_address' | t }}</h2>
|
|
<p>
|
|
<strong>{{ 'customer.order.fulfillment_status' | t }}:</strong>
|
|
{{ order.fulfillment_status_label }}
|
|
</p>
|
|
{{ order.shipping_address | format_address }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% schema %}
|
|
{
|
|
"name": "t:sections.main-order.name",
|
|
"settings": [
|
|
{
|
|
"type": "header",
|
|
"content": "t:sections.all.padding.section_padding_heading"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_top",
|
|
"min": 0,
|
|
"max": 100,
|
|
"step": 4,
|
|
"unit": "px",
|
|
"label": "t:sections.all.padding.padding_top",
|
|
"default": 36
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 100,
|
|
"step": 4,
|
|
"unit": "px",
|
|
"label": "t:sections.all.padding.padding_bottom",
|
|
"default": 36
|
|
}
|
|
]
|
|
}
|
|
{% endschema %}
|