customers/login​

customers/login 模板渲染了客户登录页面，该页面包含了登录客户帐户的表单。

customer-login.png

位置​

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

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

内容​

你可以将客户登录表单包含在 customers/login 模板中或模板内的某个 section 中。 你也可以选择性地包含“第三方登录”选项。

客户登录表单​

客户登录表单可以通过使用 Handlebars form helper 以及相应的 'customer_login' 参数来添加。在表单标签内，你需要包含以下内容：

字段类型表单name
邮箱emailcustomer[email]
手机号textcustomer[phone]
密码passwordcustomer[password]
号码区号textcustomer[code]
提示

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

示例代码：

{{#form "customer_login"}}
  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="customer[email]">
  </div>
  <div class="password">
    <label for="password">Password</label>
    <input type="password" name="customer[password]">
  </div>
  <div class="submit">
    <input type="submit" value="Sign in">
  </div>
{{/form}}

用法​

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

提示

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

链接到登录页面​

在链接到登录页面时，你需要考虑商店的客户账号设置以及当前的登录状态。

例如，如果客户账号未启用，则无需显示任何链接。如果客户已经登录，那么你可以链接到账户页面。如果客户账号已启用、是可选的，并且客户尚未登录，那么可以显示注册页面的链接。

{{#if show_user_entry}}
  <a class="icon-button header__icon-button" href="{{#if customer }}{{ routes.account_url }}{{else}}{{ routes.account_login_url }}{{/if}}">
    {{snippet 'icon-user'}}
  </a>
{{/if}}

提供“忘记密码”选项​

你可以向客户提供跳转到忘记密码页面的链接，帮助客户重置密码：

<a href="{{routes.account_recover_url}}">Forget password</a>

提供“手机号登录”选项​

在实现手机号登录功能时，需要为用户提供一个选择区号的选项，区号数据可以通过 all_country_dialing_code 对象来获取：

{{#form "customer_login"}}
<div class="field">
  <input
    class="field__input"
    type="tel"
    id="RegisterPhone"
    name="customer[phone]"
    required
    placeholder="{{t 'customer.general.phone'}}"
  />
  <label for="RegisterPhone" class="field__label body3">
    {{t "customer.general.phone"}}
  </label>
</div>
<div class="field__suffix">
  <select name="customer[code]" id="country-select">
    {{#for ../all_country_dialing_code as |dialing|}}
       <option value="{{dialing.dialing_code}}" data-iso-code="{{dialing.iso_code}}">{{dialing.name}}</option>
    {{/for}}
  </select>
</div>
{{/form}}

提供“第三方登录”选项​

你可以向客户提供第三方登录的选项，可以使用 Handlebars form helper 以及相应的 customer_login 和 thirdLogin = true 参数来添加。并使用 loadFeatured 来引入 customer-account-api SDK，以处理第三方登录逻辑：

{{#form "customer_login" id="login-customer-form" thirdLogin="true"}}
  ...
  <div class="customer-third-login">
      <div class="customer-third-login__desc">
        <span class="body4">{{t "customer.general.login_method"}}</span>
      </div>
      <div class="customer-third-login__btns">
        <div id="third-login-container"></div>
      </div>
    </div>
{{/form}}
提示

有关示例的实现，请参阅 Seed 中的 assets/section-main-login.js 及 sections/main-login.html 文件。

登录后重定向​

默认情况下，当客户登录成功后，他们会直接被重定向到账户页面。你可以使用 Handlebars form helper 的 return_to 参数来指定客户登录成功后应该重定向到的页面。

以下示例展示了如何将客户重定向到产品系列列表页面的 URL：

{{#form "customer_login" return_to=routes.all_products_collection_url}}
   <!-- form content -->
{{/form}}
这篇文章对你有帮助吗？
SHOPLINE
SHOPLINE
SHOPLINE Enterprise
条款协议
隐私
条款
开发者协议
LinkedInEmail
LinkedInEmail
© Copyright 2013-2025 SHOPLINE Limited.