customers/register

customers/register 模板渲染了客户注册页面,该页面包含了用于创建客户帐户的表单。

register.png


位置

customers/register 模板位于主题的 templates/customers 目录中:

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

内容

你可以将客户注册表单包含在 customers/register 模板中或模板内的某个 section 中。

你也可以选择性的提供手机号注册选项

客户注册表单

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

字段类型表单name
邮箱emailcustomer[email]
手机号textcustomer[phone]
密码passwordcustomer[password]
号码区号textcustomer[code]
验证码textcustomer[verifycode]
textcustomer[first_name]
textcustomer[last_name]
生日textcustomer[birthday]
性别textcustomer[gender]
提示

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

以下字段在特定条件下是必需的:

  • 当商家在 SHOPLINE Admin 后台的客户账户设置中启用 “客戶需要验证才能完成注册“ 选项时,需要提供验证码字段,用于邮箱或手机号验证。
  • 当商家在 SHOPLINE Admin 后台的客户账户设置中启用 “可选的信息填写” 选项时,需要提供姓氏,名字,性别或生日字段。

示例代码:

{{#form "create_customer"}}
<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="Register">
</div>
{{/form}}

用法

在使用 customers/register 模板时,你应该熟悉以下内容:

提示

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

提供“手机号注册”选项

在处理手机号注册时,需要提供区号选项,区号数据可以通过 all_country_dialing_code 对象获取,你还需要根据表单上下文中的 form 对象的 register_config.check_tag 属性,以确定是否需要验证码验证。最后使用 loadFeatured 来引入 customer-account-api SDK,以处理向客户账户发送验证码的逻辑:

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

{{#if form.register_config.check_tag}}
<div class="field">
<div class="field__container">
<input
type="text"
id="RegisterVerifyCode"
class="field__input"
name="customer[verifycode]"
required
placeholder="Verify Code"
/>
<label for="RegisterVerifyCode" class="field__label">
Verify Code
</label>
</div>
<div class="field__suffix">
<button class="verifycode-button">
Send
</button>
</div>
</div>
{{/if}}
{{/form}}
提示

有关示例的实现,请参阅 Seed 中的 assets/section-main-register.jssections/main-register.html 文件。

注册后重定向

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

例如,以下代码会将客户重定向到所有商品分类页面:

{{#form "create_customer" return_to=routes.collections_url}}
<!-- form detail -->
{{/form}}
这篇文章对你有帮助吗?