customers/addresses​

The customers/addresses template presents a customer address form page, allowing customers to edit their current addresses and add new ones.

Location​

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

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

Content​

You should include the following content within the customers/addresses template or a part of the template:

• Customer Object
• Standard Form Inputs

Customer Object​

You can access the Handlebars customer object to display detailed information on the page.

Standard Form Inputs​

Within the form used for adding or editing an address, each address detail has standard form inputs. The table below shows each attribute along with its associated type and name attributes.

Usage​

When using the customers/addresses template, you should be familiar with the following:

• How to Cascade Addresses
• How to Add a New Address
• How to Edit an Address

How to Cascade Addresses​

You should provide address cascading interactions to guide users through entering complete addresses. Address data is retrieved via the api URL delivered under window.routes.address_url. For an example implementation, refer to the assets/component-address-cascade.js file in Seed:

class AddressCascade extends HTMLElement {
    ...other codes
    createCityOptions() {
      const countryName = this.countryEl.value;
      const province = this.provinceEl.value;
      return this.fetchAddressNextLevel({
        countryName,
        province,
      }).then((response) => {
        this.clearOptions(this.cityEl);
        if (!response.data.length) {
          this.cityContainer.style.display = 'none';
          this.districtContainer.style.display = 'none';
          this.clearOptions(this.districtEl);
          return false;
        }
        response.data.forEach((city) => {
          this.createOption(this.cityEl, {
            value: city.code,
            innerHTML: city.name,
          });
        });
        this.cityContainer.style.display = '';
        return true;
      });
    }
}

How to Add a New Address​

You can allow customers to add new addresses using the Handlebars form helper and passing the customer_address parameter to create the form:

{{#form "customer_address" return_to=routes.account_url}}
  <!-- form content -->
{{/form}}

How to Edit an Address​

For existing addresses, you should include a form to edit them. You can use the Handlebars form helper and pass the customer_address and address parameters to create the edit form:

{{#form "customer_address" address=customer.editing_address return_to=routes.account_url}}
  <!-- form content -->
{{/form}}