# customers/login

> Shoplazza 主题的 customers/login template 渲染客户账号登录表单，并给出表单提交的 Ajax API 登录接口。

`customers/login` template 渲染客户登录页面，包含登录客户账户的表单。

该表单提交的 endpoint 的请求参数与响应见 [`POST /{locale}/api/customers/sign_in`](/docs/theme/references/ajax-api/customer#post-localeapicustomerssign_in)。

## 位置

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

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

## 内容

您应该在 `customers/login` template 或其内部的 section 中包含[客户登录表单](./customers-login#客户登录表单)。

您还可以添加"忘记密码"和访客结账选项。

### 客户登录表单

客户登录表单可以使用 [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) 添加。

| 输入项   | type       | name       |
| :------- | :--------- | :--------- |
| Email    | `text`     | `email`    |
| Password | `password` | `password` |

例如：

```html title="示例"
<form method="POST" action="{{ '/api/customers/sign_in' | add_root_url }}">
  <div>
    <label for="email">Email</label>
    <input id="email" name="email" />
  </div>
  <div>
    <label for="password">Password</label>
    <input id="password" type="password" name="password" />
  </div>
  <button type="submit" data-track="dj.login">Login</button>
</form>

```

## 使用说明

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

* [链接到登录页面](./customers-login#链接到登录页面)

### 链接到登录页面

如果客户未登录，您可以链接到登录页面。如果客户已登录，则可以链接到[订单页面](./customers-order)。

```liquid title="示例"
{% if customer.id %}
  <a href="{{ routes.account_order_url }}">My orders</a>
{% else %}
  <a href="{{ routes.account_login_url }}">Login</a>
{% endif %}
```