# customers/addresses

> Shoplazza 主题的 customers/addresses template 渲染客户地址簿（查看、编辑、新增地址），并给出表单提交的 Ajax API 接口。

`customers/addresses` template 渲染客户地址页面，允许客户查看和管理已保存的地址，以及添加新地址。

这些表单提交到的 endpoint，请求参数与响应见 [`POST /{locale}/api/customers/addresses`](/docs/theme/references/ajax-api/customer#post-localeapicustomersaddresses)，以及同一页面上的其他地址 endpoint。

## 位置

`customers/addresses` template 位于 theme 的 `templates` > `customers` 目录下：

```text title="目录"
└── theme
    ├── layout
    ├── templates
    |   └── customers
    |     ├── addresses.liquid
    |     ...
    ...
```

## 内容

您应该在 template 的 section 中包含以下内容：

* [customer 对象](./customers-addresses#customer-对象)
* [标准表单输入项](./customers-addresses#标准表单输入项)

### customer 对象

您可以访问 Liquid [customer 对象](/docs/theme/references/liquid/objects/customer) 来显示客户账户的详细信息。

### 标准表单输入项

在添加或编辑地址的表单中，每个地址字段都有标准的表单输入项。下表列出了各输入项及其对应的 `type` 和 `name` 属性。

| 输入项            | type       | name              |
| :---------------- | :--------- | :---------------- |
| First name        | `text`     | `first_name`      |
| Last name         | `text`     | `last_name`       |
| Company           | `text`     | `company`         |
| Address           | `text`     | `address`         |
| Address 1         | `text`     | `address1`        |
| City              | `text`     | `city`            |
| Country           | `select`   | `country_code`    |
| Province          | `select`   | `province_code`   |
| ZIP               | `text`     | `zip`             |
| Email             | `text`     | `email`           |
| Phone Number Code | `select`   | `phone_area_code` |
| Phone Number      | `text`     | `phone`           |
| Is default        | `checkbox` | `is_default`      |

:::warning
每个地址字段的表单输入项必须使用上表中的 `name` 属性，否则表单将无法成功提交。
:::

## 使用说明

使用 `customers/addresses` template 时，您应该熟悉以下内容：

* [如何添加新地址](./customers-addresses#添加新地址)
* [如何删除地址](./customers-addresses#删除地址)

### 添加新地址

您可以使用 [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) 允许客户添加新地址。

```html title="示例"
<form method="POST" action="{{ '/api/customers/addresses' | add_root_url }}">
  <div>
    <div>
      <input type="text" id="firstName" name="first_name" maxlength="50">
      <label for="firstName">First name</label>
    </div>
    <div>
      <input type="text" id="lastName" name="last_name" maxlength="50">
      <label for="lastName">Last name</label>
    </div>
  </div>
  <div>
    <input type="text" id="company" name="company">
    <label for="company">Company</label>
  </div>
  <div>
    <input type="text" id="address" name="address">
    <label for="address">Address</label>
  </div>
  <div>
    <input type="text" id="address1" name="address1">
    <label for="address1">Apartment, suite, etc.</label>
  </div>
  <div>
    <input type="text" id="city" name="city">
    <label for="city">City</label>
  </div>
  <div>
    <div>
      <select name="country_code" id="countryCode" value="" required>
        <option empty value="" selected disabled>Country</option>
      </select>
    </div>
    <div>
      <select id="provinceCode" name="province_code" value="">
        <option empty value="" selected disabled>Province</option>
      </select>
    </div>
  </div>
  <div>
    <input type="text" id="zip" name="zip">
    <label for="zip">ZIP</label>
  </div>
  <div>
    <input type="text" id="email" name="email">
    <label for="email">Email</label>
  </div>
  <div>
    <select id="phoneAreaCode" name="phone_area_code" value="">
      <option empty value="" selected disabled>Area code</option>
    </select>
    <input type="text" id="phone" name="phone">
    <label for="phone">Phone</label>
  </div>
  <div>
    <input type="checkbox" id="isDefault" name="is_default">
    <label for="isDefault">Set as default</label>
  </div>
  <button type="submit">Add new address</button>
</form>

```

在表单内，您需要包含用于获取各地址字段信息的[标准表单输入项](./customers-addresses#标准表单输入项)。

### 删除地址

每个已有地址都应提供删除选项。您可以通过包含以下表单来添加该选项：

```html
<form
  id="address-delete-form"
  method="DELETE"
  action="/api/customers/addresses/{{ address.id }}"
></form>
```

:::tip
建议将上述表单与 JavaScript 结合使用，在实际执行删除操作前提示客户确认是否要删除该地址。
:::