[{"value":"customer-account.png","id":"customer-accountpng","hLevel":2,"level":1},{"value":"Location","id":"location","hLevel":2,"level":1},{"value":"Content","id":"content","hLevel":2,"level":1,"children":[{"value":"The customer object","id":"the-customer-object","hLevel":3,"level":2}]},{"value":"Usage","id":"usage","hLevel":2,"level":1,"children":[{"value":"Display customer account information","id":"display-customer-account-information","hLevel":3,"level":2},{"value":"Show customer's address list","id":"show-customers-address-list","hLevel":3,"level":2},{"value":"Delete an address","id":"delete-an-address","hLevel":3,"level":2},{"value":"Deactivate account","id":"deactivate-account","hLevel":3,"level":2}]}]

customers/account

The customers/account template displays the customer account page, providing an overview of account information.

Location

The customers/account template is in the theme's templates directory templates > customers:

└── theme
    ├── layout
    ├── templates
    |   └── customers
    |     ├── account.json
    |     ...
    ...

Content

You can include the customer object in the customers/account template or in a section within the template.

The customer object

You can use the Handlebars customer object to display details on the page.

Usage

When using the customers/account template, you should know how to:

Display customer account information
Show customer's address list
Delete an address
Deactivate account

Tip

If you use a JSON template, any HTML or Handlebars code needs to be included in the sections referenced by the template.

Display customer account information

You need to show the customer's account personal information. This can be accessed through the customer object:

Code

<div class="body4 info-value">{{customer.email}}</div>

</div>

<div class="body4 info-value">{{customer.phone}}</div>

</div>

Show customer's address list

You need to display the customer's address list and identify the default address. This can be accessed through the addresses attribute of the customer object:

Code

<div class="body4 address__phone">{{ address.phone }}</div>

<div class="body4 address__detail">{{{ format_address address }}}</div>

</div>

Delete an address

For each address, you should include an option to delete it. You can add this functionality with the following form:

Code

{{#form "customer_address" address_seq=address.id return_to=routes.account_url }}

<button class="button" type="submit">Delete</button>

Tip

You should combine the form above with JavaScript to prompt the customer to confirm the deletion before it is executed.

Deactivate account

When the merchant enables the "Allow customers to deactivate account" option in SHOPLINE Admin customer settings, you should include an option to deactivate the account. You can add this functionality with the following form and use loadFeatured to include the customer-account-api SDK for handling the logic of sending a verification code to the user's account: