Shopify Theme from Scratch Part 13: Customer Accounts 2/2
Today we’re going to finish the last set of customer account templates. We’ve got three more templates to go: account.liquid, order.liquid, and addresses.liquid.
Vamos!
1. Run some orders
The first thing we’re going to do is run some test orders through a customer account so that we can see a list of orders on our account.liquid and order.liquid templates.
Log in to the customer account that you created in Part 11. Add some products to the cart, proceed to check out, and complete the order. Repeat this process a few times until you have about 2-3 test orders.
2. Set up account.liquid
The account.liquid template is where the customer can see an overview of his/her account. This includes information such as his/her primary address and recent orders.
The first thing we’ll do is split up the code into two columns. Open account.liquid, remove its contents, and insert the code below.
{% layout settings.customer_layout %}
Account Details and Order History
Let’s add the customer’s information in the left sidebar using the variables of the Customer object. We’re going to output the customer’s name, email, and default address.
...
{{ customer.name }}
{{ customer.email }}
{% if customer.default_address != nil %}
{{ customer.default_address.address1 }}
{% if customer.default_address.address2 != "" %}
{{ customer.default_address.address2 }}
{% endif %}
{{ customer.default_address.city}}, {% if address.province_code %}{{customer.default_address.province_code}}, {% endif %}{{customer.default_address.country}}
{{ customer.default_address.zip}}
{{ customer.default_address.phone }}
{% endif %}
View Addresses ({{ customer.addresses_count }})
...
The user’s account details is now shown in the left sidebar.
Figure 13.2: The customer information is output in the left-hand column
Now let’s add a table to output the customer’s past orders. We’re going to do a for loop through the “orders” array that is part of the Customer object. We can then use each order in the array to output any order details from the Order object.
...
{% if customer.orders.size != 0 %}
Order
Date
Payment Status
Fulfillment Status
Total
{% for order in customer.orders %}
{{ order.name | link_to: order.customer_url }}
{{ order.created_at | date: "%b %d, %Y" }}
{{ order.financial_status }}
{{ order.fulfillment_status }}
{{ order.total_price | money }}
{% endfor %}
{% else %}
You haven't placed any orders yet.
{% endif %}
Finally we’ll add some CSS to make things prettier. Open style.css, and insert the following CSS code at the bottom:
.account-user{ margin-right:60px; width:172px; font-size:14px;}
.account-user p{margin:0;}
.user-name{margin-bottom:20px;}
.account-table{width: 728px;}
.account-table table{width:100%; text-align:left;}
.account-table td{padding-top:15px;}
.account-table tbody, .last-row td, .account-user .status{padding-bottom:15px;}
.account-table tfoot{text-align:right; border-top:1px solid #ccc;}
.cart-headers{border-bottom:1px solid #ccc;}
Your account page is now complete!
3. Set up order.liquid
The order.liquid template is where the details of a single order are displayed. To see this template, click on one of the order links from account.liquid.
We’re going to split up the template into two columns, like we did with account.liquid in Step 2. We can do this by re-using the same markup. Open order.liquid and replace its contents with the following:
{% layout settings.customer_layout %}
Order {{ order.name }}
We’re going to output the order details in the left-hand column. Again we’re going to use the Order object to do this. Paste the code in red below:
{% if order.cancelled %}
Order Cancelled
on {{ order.cancelled_at | date: "%B %d, %Y %I:%M%p" }}
{{ order.cancel_reason }}
{% endif %}
Placed on {{ order.created_at | date: "%B %d, %Y %I:%M%p" }}
Billing Address
Payment Status: {{ order.financial_status }}
{{ order.billing_address.name }}
{{ order.billing_address.company }}
{{ order.billing_address.street }}
{{ order.billing_address.city }}, {{ order.billing_address.province }}
{{ order.billing_address.country }} {{ order.billing_address.zip }}
{{ order.billing_address.phone }}
{% if order.shipping_address %}
Shipping Address
Fulfillment Status: {{ order.fulfillment_status }}
{{ order.shipping_address.name }}
{{ order.shipping_address.company }}
{{ order.shipping_address.street }}
{{ order.shipping_address.city }}, {{ order.shipping_address.province }}
{{ order.shipping_address.country }} {{ order.shipping_address.zip }}
{{ order.shipping_address.phone }}
{% endif %}
You will now see some order details in the left column.
Figure 13.3: Outputting the order details in the left-hand column
Next we’ll output the products that the customer ordered on the right-hand side. We’ll do this by using the Line Item object, the same one that’s used on the cart page and email templates.
Add the code in red below:
...
Product
SKU
Price
Quantity
Total
{% for line_item in order.line_items %}
{{ line_item.title | link_to: line_item.product.url }}
{% if line_item.fulfillment %}
Fulfilled {{ line_item.fulfillment.created_at | date: "%b %d" }}
{% if line_item.fulfillment.tracking_number %}
{{ line_item.fulfillment.tracking_company }} #{{ line_item.fulfillment.tracking_number}}
{% endif %}
{% endif %}
{{ line_item.sku }}
{{ line_item.price | money }}
{{ line_item.quantity }}
{{ line_item.quantity | times: line_item.price | money }}
{% endfor %}
Subtotal:
{{ order.subtotal_price | money }}
{% for discount in order.discounts %}
{{ discount.code }} Discount:
{{ discount.savings | money }}
{% endfor %}
{% for shipping_method in order.shipping_methods %}
Shipping ({{ shipping_method.title }}):
{{ shipping_method.price | money }}
{% endfor %}
{% for tax_line in order.tax_lines %}
Tax ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%):
{{ tax_line.price | money }}
{% endfor %}
Total:
{{ order.total_price | money }} {{ order.currency }}
Let’s add a bit of CSS to line things up. Open style.css, and insert the code in red at the very bottom of the file:
...
.account-table tbody, .last-row td, .account-user .status{padding-bottom:15px;}
.account-table tfoot{text-align:right; border-top:1px solid #ccc;}
.cart-headers{border-bottom:1px solid #ccc;}
.order-total{text-align:right;}
.return{border-top:1px solid #ccc; padding-top:15px;}
Your order.liquid template is now complete!
4. Set up addresses.liquid
The addresses.liquid template is where the customer can view and modify all of the addresses he/she has entered, as well as add new ones. To access the addresses.liquid template, click the “View Addresses” link in account.liquid.
4.1. Make sure your theme.liquid file contains “shopify_common.js”
In earlier versions of Part 1: theme.liquid, I had forgotten to include “shopify_common.js” in Step 2 as one of the required scripts. If you’re an earlier follower to this series, you may not have “shopify_common.js” in your theme.liquid file. Please take a second to go back to theme.liquid and ensure “shopify_common.js” is being loaded. Sorry for the confusion! Continuing on…
4.2. Set up the Add Address form
We’ll start off by adding a form that customers can use to add new addresses. This form will be hidden by default and we’re going to make a button toggle it on and off.
Open addresses.liquid and replace its contents with the following code:
{% layout settings.customer_layout %}
Manage Account Address
Now, you should see a button that, when clicked, presents a nice form for entering a new address.
4.3. Add some Javascript for outputting regions
You’ll notice that when you select a country, you’re not presented with any options for a province/state/region. What we need to do is add some Javascript for enabling this. At the bottom of addresses.liquid, add the following script in red:
