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

Display customer account information​

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

<div class="info-item">
  <div class="body4 info-value">{{customer.email}}</div>
</div>
<div class="info-item">
  <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:

{{#for customer.addresses as |address|}}
  <div class="address__item">
      <div class="body4 address__phone">{{ address.phone }}</div>
      <div class="body4 address__detail">{{{ format_address address }}}</div>
  </div>
{{/for}}

Delete an address​

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

{{#form "customer_address" address_seq=address.id return_to=routes.account_url }}
  <button class="button" type="submit">Delete</button>
{{/form}}

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:

{{#form "delete_customer" id="delete-customer-form"}}
    <div class="field">
      <div class="field__container">
        <input
          type="text"
          class="field__input"
          name="customer[verifycode]"
          required
          placeholder="Verification code"
        />
        <label class="field__label body3">
          Verification code
        </label>
      </div>
      <div class="field__suffix">
        <button class="button button--link verifycode-button">
          Send
        </button>
      </div>
    </div>
    <button type="submit" class="button button--full-width">
      Delete Account
    </button>
{{/form}}