vfonic/solidify

<div class="page-width">
  <div class="section-header text-center">
    <h1>{{ 'customer.account.title' | t }}</h1>
    <p><a href="/account">{{ 'customer.account.return' | t }}</a></p>
  </div>

  <div class="grid">
    <div class="grid__item medium-up--two-thirds">
      <h2>{{ 'customer.order.title' | t: name: order.name }}</h2>

      {%- assign order_date = order.created_at | date: "%B %d, %Y %I:%M%p" -%}
      <p>{{ 'customer.order.date' | t: date: order_date }}</p>

      {% if order.cancelled %}
        <div class="order--cancelled">
          {%- assign cancelled_at = order.cancelled_at | date: "%B %d, %Y %I:%M%p" -%}
          <p>{{ 'customer.order.cancelled' | t: date: cancelled_at }}</p>
          <p>{{ 'customer.order.cancelled_reason' | t: reason: order.cancel_reason }}</p>
        </div>
      {% endif %}

      <table class="responsive-table">
        <thead>
          <tr>
            <th>{{ 'customer.order.product' | t }}</th>
            <th>{{ 'customer.order.sku' | t }}</th>
            <th>{{ 'customer.order.price' | t }}</th>
            <th>{{ 'customer.order.quantity' | t }}</th>
            <th>{{ 'customer.order.total' | t }}</th>
          </tr>
        </thead>
        <tbody>
          {% for line_item in order.line_items %}
          <tr id="{{ line_item.key }}" class="responsive-table__row" >
            <td data-label="{{ 'customer.order.product' | t }}">
              {{ line_item.title | link_to: line_item.product.url }}
              {% if line_item.fulfillment %}
                <div class="note">
                  {%- assign created_at = line_item.fulfillment.created_at | date: format: 'month_day_year' -%}
                  {{ 'customer.order.fulfilled_at' | t: date: created_at }}
                  {% if line_item.fulfillment.tracking_number %}
                    <a href="{{ line_item.fulfillment.tracking_url }}">{{ line_item.fulfillment.tracking_company }} #{{ line_item.fulfillment.tracking_number}}</a>
                  {% endif %}
                </div>
              {% endif %}
            </td>
            <td data-label="{{ 'customer.order.sku' | t }}">{{ line_item.sku }}</td>
            <td data-label="{{ 'customer.order.price' | t }}">{{ line_item.price | money }}</td>
            <td data-label="{{ 'customer.order.quantity' | t }}">{{ line_item.quantity }}</td>
            <td data-label="{{ 'customer.order.total' | t }}">{{ line_item.quantity | times: line_item.price | money }}</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="responsive-table__row">
            <td colspan="4" class="small--hide">{{ 'customer.order.subtotal' | t }}</td>
            <td data-label="{{ 'customer.order.subtotal' | t }}">{{ order.subtotal_price | money }}</td>
          </tr>

          {% for discount in order.discounts %}
            <tr class="order_summary discount">
              <td colspan="4" class="small--hide">{{ discount.code }} {{ 'customer.order.discount' | t }}</td>
              <td data-label="{{ 'customer.order.discount' | t }}">{{ discount.savings | money }}</td>
            </tr>
          {% endfor %}

          {% for shipping_method in order.shipping_methods %}
            <tr>
              <td colspan="4" class="small--hide">{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }})</td>
              <td data-label="{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }})">{{ shipping_method.price | money }}</td>
            </tr>
          {% endfor %}

          {% for tax_line in order.tax_lines %}
            <tr>
              <td colspan="4" class="small--hide">{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%)</td>
              <td data-label="{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%)">{{ tax_line.price | money }}</td>
            </tr>
          {% endfor %}

          <tr>
            <td colspan="4" class="small--hide"><strong>{{ 'customer.order.total' | t }}</strong></td>
            <td data-label="{{ 'customer.order.total' | t }}"><strong>{{ order.total_price | money }} {{ order.currency }}</strong></td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="grid__item medium-up--one-third">
      <hr class="medium-up--hide">
      <h3>{{ 'customer.order.billing_address' | t }}</h3>

      <p><strong>{{ 'customer.order.payment_status' | t }}:</strong> {{ order.financial_status_label }}</p>

      {{ order.billing_address | format_address }}

      <h3>{{ 'customer.order.shipping_address' | t }}</h3>

      <p><strong>{{ 'customer.order.fulfillment_status' | t }}:</strong> {{ order.fulfillment_status_label }}</p>

      {{ order.shipping_address | format_address }}
    </div>
  </div>
</div>