Personal reference in customer order overview

[Anne-Marieke]

Hi everyone,

Since my colleague no longer works with us, I have taken over our shopify store (B2B). I just don't know much about Liquid.

I've managed to get them to add a personal reference when a customer places an order. When an order comes in, we take this reference and put it on the invoice that we create elsewhere in our company. However, I want that when a customer is in his overview of orders within Shopify, the personal reference is also visible there. So that the customers exaclty know which order was that. 



So in this grid above, I actually want the Fulfillment status to be replaced with something like 'Reference'. 
Payment status is something we don't use as well, since all our orders are paid with a invoice made on our finance department. 



In your shopping cart you can enter your personal reference at 'Klant referentie' in the left bottom corner. 

I think I need the change the code in customers/order.liquid. Which now looks like this:

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

  <div class="grid myaccount">
    <div class="grid__item myaccount__order-history">
      <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 -%}
        <div class="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>
        </div>
      {%- endif -%}

      <table class="order-table">
        <thead>
          <tr>
            <th scope="col">{{ 'customer.order.product' | t }}</th>
            <th scope="col">{{ 'customer.order.sku' | t }}</th>
            <th class="text-right" scope="col">{{ 'customer.order.price' | t }}</th>
            <th class="text-right" scope="col">{{ 'customer.order.quantity' | t }}</th>
            <th class="text-right" scope="col">{{ 'customer.order.total' | t }}</th>
          </tr>
        </thead>
        <tbody>
          {%- for line_item in order.line_items -%}
            <tr id="{{ line_item.key }}">
              <th class="order-table__product" scope="row" data-label="{{ 'customer.order.product' | t }}">
                <div>
                  {{ line_item.title | link_to: line_item.product.url }}
                  {%- assign property_size = line_item.properties | size -%}
                  {% unless line_item.selling_plan_allocation == nil and property_size == 0 %}
                    <div class="item-props">
                      {% unless line_item.selling_plan_allocation == nil  %}
                        <span class="item-props__property">
                          {{ 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 class="item-props__property">
                              {{ property.first }}:&nbsp;
                              {%- 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 class="order-discount order-discount--list order-discount--title" aria-label="{{ 'customer.order.discount' | t }}">
                      {%- for discount_allocation in line_item.line_level_discount_allocations -%}
                        <li class="order-discount__item">
                          {% include 'icon-saletag' %}{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- endif -%}
                </div>
                {%- if line_item.fulfillment -%}
                  <div class="note">
                    {%- assign created_at = line_item.fulfillment.created_at | time_tag: format: 'date' -%}
                    {{ 'customer.order.fulfilled_at_html' | t: date: created_at }}
                    <div>
                      {%- if line_item.fulfillment.tracking_url -%}
                        <a href="{{ line_item.fulfillment.tracking_url }}">
                          {{ 'customer.order.track_shipment' | t }}
                        </a>
                      {%- endif -%}
                      <div>
                        {{ line_item.fulfillment.tracking_company }}
                        {%- if line_item.fulfillment.tracking_number -%} #{{ line_item.fulfillment.tracking_number }} {%- endif -%}
                      </div>
                    </div>
                  </div>
                {%- endif -%}
              </th>
              <td data-label="{{ 'customer.order.sku' | t }}">{{ line_item.sku }}</td>
              <td class="text-right" data-label="{{ 'customer.order.price' | t }}">
                <dl>
                  {%- if line_item.original_price != line_item.final_price -%}
                    <dt>
                      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                    </dt>
                    <dd>
                      <s>{{ line_item.original_price | money }}</s>
                    </dd>
                    <dt>
                      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
                    </dt>
                    <dd>
                      <span class="order-discount">{{ line_item.final_price | money }}</span>
                    </dd>
                  {%- else -%}
                    <dt>
                      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                    </dt>
                    <dd>
                      {{ line_item.original_price | money }}
                    </dd>
                  {%- endif -%}

                  {%- if line_item.unit_price_measurement -%}
                    <dt>
                      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
                    </dt>
                    <dd>
                      <span class="price-unit-price">
                        {%- capture unit_price_separator -%}
                          <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</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>
              </td>
              <td class="text-right" data-label="{{ 'customer.order.quantity' | t }}">{{ line_item.quantity }}</td>
              <td class="text-right" 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.regular_price' | t }}</span>
                    </dt>
                    <dd>
                      <s>{{ line_item.original_line_price | money }}</s>
                    </dd>
                    <dt>
                      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
                    </dt>
                    <dd>
                      <span class="order-discount">{{ line_item.final_line_price | money }}</span>
                    </dd>
                  </dl>
                {%- else -%}
                  {{ line_item.original_line_price | money }}
                {%- endif -%}
              </td>
            </tr>
          {%- endfor -%}
        </tbody>
        <tfoot>
          <tr>
            <th class="small--hide" scope="row" colspan="4">{{ 'customer.order.subtotal' | t }}</th>
            <td class="text-right" data-label="{{ 'customer.order.subtotal' | t }}">{{ order.line_items_subtotal_price | money }}</td>
          </tr>

          {%- if order.cart_level_discount_applications != blank -%}
            <tr>
              {%- for discount_application in order.cart_level_discount_applications -%}
                <th class="small--hide" scope="row" colspan="4">
                  {{ 'customer.order.discount' | t }}
                  <span class="order-discount order-discount--title">
                    {% include 'icon-saletag' %}{{- discount_application.title -}}
                  </span>
                </th>
                <td class="text-right" data-label="{{ 'customer.order.discount' | t }}">
                  <div class="order-discount-wrapper">
                    <span class="order-discount order-discount--title text-left medium-up--hide">
                      {% include 'icon-saletag' %}{{- discount_application.title -}}
                    </span>
                    <span class="order-discount">-{{ discount_application.total_allocated_amount | money }}</span>
                  </div>
                </td>
              {%- endfor -%}
            </tr>
          {%- endif -%}

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

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

          <tr>
            <th class="small--hide" scope="row" colspan="4">{{ 'customer.order.total' | t }}</th>
            <td class="text-right" data-label="{{ 'customer.order.total' | t }}">{{ order.total_price | money_with_currency }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="grid__item myaccount__account-details">
      <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>

The webshop is: www.bickerykerst.nl
I notice I have a hard time explaning in the English language. If something is unclear or you need more information, please let me know. 

[iDoThemes]

If that field is in the cart, then it is most likely being added as a cart attribute, which becomes an order attribute after purchase.

It looks like on that customer page you have access to the liquid order object, so you should be able to access the order.properties:

https://shopify.dev/api/liquid/objects/order

I tried creating an account but it still wouldn't let me add stuff to cart, so I can't get the exact name of the variable, but it would be something like {{ order.properties.variable_name }} to output that.

[Anne-Marieke · Accepted solution]

I fixed my problem by changing the code in customers/order.liquid and customers/account.liquid. 
If anyone wants to know how, let me know. Then I'll type it out. 

[kateryna2805]

Hello Anne-Marieke!

Can I ask you how this is done?

I would be very glad of your help.

Thanks a lot.

Kateryna

[Anne-Marieke]

Hi Kateryna!

In customers/account.liquid I have changed the responsive table to:

          <table class="responsive-table">
            <thead>
              <tr>
                <th scope="col">{{ 'customer.orders.order_number' | t }}</th>
                <th scope="col">{{ 'customer.orders.date' | t }}</th>
                <th scope="col">Referentie</th>
                <th scope="col">Aangegeven leverweek</th>
                <th scope="col">{{ 'customer.orders.total' | t }}</th>
              </tr>
            </thead>
            <tbody>
              {% for order in customer.orders %}
                <tr>
                  <th data-label="{{ 'customer.orders.order_number' | t }}" scope="row">
                    <a href="{{ order.customer_url }}" class="btn btn--secondary btn--small" aria-label="{{ 'customer.orders.order_number_link' | t: number: order.name }}">{{ order.name }}</a>
                  </th>
                  <td data-label="{{ 'customer.orders.date' | t }}">{{ order.created_at | time_tag: format: 'date' }}</td>
                  <td data-label="{{ 'customer.orders.payment_status' | t }}">{{ order.attributes["Persoonlijke referentie"] }}</td>
                  <td data-label="{{ 'customer.orders.fulfillment_status' | t }}">{{ order.note }}</td>
                  <td data-label="{{ 'customer.orders.total' | t }}">{{ order.total_price | money }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>

It is not perfecte, since I hard coded text like ' aangegeven leverweek' (delivery week in Dutch), it is not being translated to e.g. English, but most of our customers are Dutch anyway.

And in customers/order.liquid I have added this code to have the placed comment during the order process also visible:

      <table>
          <tr>
            <th class="small--hide" scope="row" colspan="4">Geplaatste opmerking tijdens bestelling:</th>
            <td class= "text-right" data-label="{{ 'order.attributes.comment' | t }}">{{ order.attributes.comment }}</td>
          </tr>
      </table>

Let me know if you need more information. 

[kateryna2805]

Hi there,

Thank you very much for your reply. 

May I kindly ask you if you know how to insert an image in the customer's order details in the client's dashboard?

Thanks!

Kateryna

[Anne-Marieke]

Hi @Kateryna 

I'm not as advanced in liquid and CSS, and sadly do not have a solution for you on this. 

[kateryna2805]

{% if line_item.image %}
{{ line_item | image_url: width: 100, height: 100 | image_tag: srcset: nil | link_to: line_item.product.url }}
{% else %}
<img src="{{ 'item-remove.png' | asset_url }}" width="100" height="100">
{% endif %}

[adrian-its]

FYI: Customizing these files does only work if you use the classic/standard customer accounts. It does not apply to the new customer accounts.