customers/register
customers/register
模板渲染了客户注册页面,该页面包含了用于创建客户帐户的表单。
位置
customers/register
模板位于主题的 templates/customers
目录中:
└── theme
├── layout
├── templates
| └── customers
| ├── register.json
| ...
...
内容
你可以将客户注册表单包含在 customers/register
模板中或模板内的某个 section 中。
你也可以选择性的提供手机号注册选项。
客户注册表单
客户登录表单可以通过使用 Handlebars form helper 以及相应的 'create_customer'
参数来添加。在表单标签内,你需要包含以下内容:
字段 | 类型 | 表单name |
---|---|---|
邮箱 | customer[email] | |
手机号 | text | customer[phone] |
密码 | password | customer[password] |
号码区号 | text | customer[code] |
验证码 | text | customer[verifycode] |
姓 | text | customer[first_name] |
名 | text | customer[last_name] |
生日 | text | customer[birthday] |
性别 | text | customer[gender] |
你应该支持手机号和邮箱两种注册方式。只有手机号注册时才需要提供号码区号字段,两者是结合使用的。
以下字段在特定条件下是必需的:
- 当商家在 SHOPLINE Admin 后台的客户账户设置中启用 “客戶需要验证才能完成注册“ 选项时,需要提供验证码字段,用于邮箱或手机号验证。
- 当商家在 SHOPLINE Admin 后台的客户账户设置中启用 “可选的信息填写” 选项时,需要提供姓氏,名字,性别或生日字段。
示例代码:
<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>
用法
在使用 customers/register
模板时,你应该熟悉以下内容:
如果你使用的是 JSON templates,那么任何 HTML 或 Handlebars 代码都需要包含在模板引用的 section 中。
提供“手机号注册”选项
在处理手机号注册时,需要提供区号选项,区号数据可以通过 all_country_dialing_code 对象获取,你还需要根据表单上下文中的 form
对象的 register_config.check_tag
属性,以确定是否需要验证码验证。最后使用 loadFeatured
来引入 customer-account-api
SDK,以处理向客户账户发送验证码的逻辑:
<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">
<option value="" data-iso-code=""></option>
</select>
</div>
<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>
有关示例的实现,请参阅 Seed 中的 assets/section-main-register.js
及 sections/main-register.html
文件。
注册后重定向
默认情况下,当客户注册成功后,他们会直接被重定向到账户页面。你可以使用 Handlebars form helper 的 return_to
参数来指定客户应该被重定向的页面。
例如,以下代码会将客户重定向到所有商品分类页面:
<!-- form detail -->