如何在SHOPIFY客户注册表单中添加字段

1,271 total views, 6 views today

如果你想在客户注册帐户时从客户那里收集更多自定义的信息，可以通过在“客户注册表单”中添加更多的字段来实现。

小贴士
1. 在进行代码修改之前记得先去确认下模板编辑器中有没有相关功能的设置项，如果有的话，就没必要额外开发代码来实现了；
2. 在做任何大的代码修改之前，一定要记得备份模板，这样即使把模板改乱了后面也可以轻松回滚代码；
3. 需要懂一些基本的HTML、CSS、JS和liquid代码知识。

备注
1. 由于无法在Shopify后台创建新的字段来保存自定义收集的信息，这些信息将会出现在顾客注释中。
2. 不需要在注册表中获取客户的地址或电话号码，这些信息会在顾客下单时收集。

主要内容：

• 在哪里添加这些自定义字段？
• 表单字段的类型有哪些？
• 自定义表单字段

在哪里添加这些自定义字段？

主要步骤：

1. 登陆到Shopify店铺后台, 找到Online Store > Themes；
2. 选择要编辑的模板，然后点击Actions > Edit Code；
3. 在“ theme”目录中，单击customers/register.liquid；
4. 在代码中搜索找到以下Liquid标签：{% form 'create_customer' %}和{% endform %}
5. 顾客注册表单的代码就在上一步找到的Liquid标签之间。表单字段默认会在这里，每个字段之间通过空行来分隔。每个主题都不同，但是顾客注册表单字段看起来都类似于图2。我们可以按照这种格式来输入其他字段代码；
6. 需要注意的是所有自定义的表单字段最好放在customer[password]的上面。关于这些自定义表单的代码该如何产生，请往下面看，需要按照信息的类型选择对应的表单代码，你还可以自定义表单字段里面的一些值。
7. 添加自定义表单字段的代码后，记得点击保存。

表单字段的类型有哪些？

以下是示例表单字段，你可以将其粘贴到顾客注册表单中，你还可以进行修改以适合自身的需求。

文本

如果需要在注册表单中添加文本字段，请粘贴并自定义以下代码：

<label for="CustomerFormAllergies">Allergies</label>
<input type="text" id="CustomerFormAllergies" name="customer[note][Allergies]" placeholder="Allergies">

单选按钮

如果需要在注册表单中添加一组单选按钮，请粘贴并自定义以下代码：

<label>Do you prefer tea or coffee?</label><br>
<input type="radio" id="CustomerFormTea" name="customer[note][Tea or Coffee]" value="Tea" /> Tea<br>
<input type="radio" id="CustomerFormCoffee" name="customer[note][Tea or Coffee]" value="Coffee" /> Coffee

下拉式菜单

如果需要在注册表单中添加一个下拉菜单，请粘贴并自定义以下代码：

<label for="CustomerFormFlavor">Choose a flavor</label>
<select id="CustomerFormFlavor" name="customer[note][Flavor]">
  <option>Chocolate</option>
  <option>Vanilla</option>
  <option>Strawberry</option>
</select>

复选框

如果需要在注册表单中添加一个复选框，请粘贴并自定义以下代码：

<label for="CustomerFormKitten">Would you like a free kitten?</label><br>
<input type="checkbox" id="CustomerFormKitten" name="customer[note][Kitten]" value="Yes, please!" /> Yes, please!

自定义表单字段

你可以根据自己的需求来定制化自定义表单字段的一些值。

name属性

<input>和<select>元素都有一个<name>属性需要跟customer[note][Some Text]做关联，其中，Some Text表明了这个字段对应的是哪个问题，customer[note]的值很重要，这个是用来把前端的自定义输入框的值传输到后台顾客注释字段位置。我们仅需要编辑customer[note][Some Text]中的第2个中括号里面的内容。比如这个输入框是用来收集性别的，则最终形式可以为：customer[note][gender]。

value属性

单选框和复选框中会有一个value属性用来记录每一个选项的值，你可以根据自己的需求自定义输入。

label元素

每种类型的表单字段都有一个<label>元素。标签显示每个表单字段的标题。for属性将标签链接到关联的<input>或<select>元素。

placeholder属性

placeholder属性可以应用于<input>元素标签。对应的就是输入框的里的提示文案，你可以根据自己的需求来自定义文案。

for属性

for属性将<label>元素链接到有<input>元素的<select>元素的<id>。在以下示例中，for属性中的CustomerFormAllergies是会对应到<input>元素的<id>。

<label for="CustomerFormAllergies">Allergies</label>
<input type="text" id="CustomerFormAllergies" name="customer[note][Allergies]" placeholder="Allergies">

---