[{"value":"forgot-password.png","id":"forgot-passwordpng","hLevel":2,"level":1},{"value":"位置","id":"位置","hLevel":2,"level":1},{"value":"内容","id":"内容","hLevel":2,"level":1,"children":[{"value":"客户密码重置表单","id":"customer-password-reset-form","hLevel":3,"level":2}]},{"value":"用法","id":"用法","hLevel":2,"level":1,"children":[{"value":"提供“账号验证”选项","id":"providing-account-verification-options","hLevel":3,"level":2}]}]

customers/forgot_password

customers/forgot_password 模板渲染了账户密码重置页面，该页面包含了用于重置客户帐户密码的表单。

位置

customers/forgot_password 模板位于主题的 templates/customers 目录中：

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

内容

你可以将客户密码重置表单包含在 customers/forgot_password 模板中或模板内的某个 section 中。

客户密码重置表单

密码重置表单可以通过使用 Handlebars form helper 以及相应的 'reset_customer_password' 参数来添加。在表单标签内，你需要包含以下内容：

字段	类型	表单name
Email（邮箱）	email	customer[email]
Phone（手机号码）	text	customer[phone]
Password（密码）	password	customer[password]
Confirm Password（确认密码）	password	customer[password_confirm]
Code（号码区号）	text	customer[code]

提示

你应该支持手机号码和邮箱两种重置方式。但只有使用手机号重置时才需要提供号码区号字段，两者是结合使用的。

示例代码：

{{#form "reset_customer_password"}}
  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="customer[email]">
  </div>
  <div class="password">
    <label>Password</label>
    <input type="password" name="customer[password]">
  </div>
  <div class="password_confirm">
    <label >Password confirm</label>
    <input type="password" name="customer[password_confirm]">
  </div>
   <div class="verifycode">
    <label >Verification code</label>
    <input type="text" name="customer[verifycode]">
  </div>
  <div class="submit">
    <input type="submit" value="Reset password">
  </div>
{{/form}}

用法

在使用 customers/forgot_password 模板时，你应该熟悉以下内容：

提供“账号验证”选项

提示

如果你使用的是 JSON templates，那么任何 HTML 或 Handlebars 代码都需要包含在模板引用的 section 中。

提供“账号验证”选项

在进行重置密码时需要进行账号验证，可以通过使用 loadFeatured 引入 customer-account-api SDK 来向客户账户发送验证码：

{{#form "reset_customer_password"}}
  <div class="field">
    <input
      id="Phone"
      class="field__input"
      type="tel"
      name="customer[phone]"
      required
      placeholder="Phone"
    />
    <label for="Phone" class="field__label body3">
      Phone
    </label>
  </div>
  <div class="field__suffix">
    <select name="customer[code]" id="country-select">
      {{#for all_country_dialing_code as |item|}}
        <option value="{{item.dialing_code}}" data-iso-code="{{item.iso_code}}">{{item.name}}</option>
      {{/for}}
    </select>
  </div>
  <div class="field">
    <div class="field__container">
      <input
        type="text"
        id="VerifyCode"
        class="field__input"
        name="customer[verifycode]"
        required
        placeholder="Verify Code"
      />
      <label for="VerifyCode" class="field__label">
        Verify Code
      </label>
    </div>
    <div class="field__suffix">
      <button class="send-code-button">
        Send
      </button>
    </div>
  </div>
{{/form}}