shopify设置商店模板和将表单字段设置为必填字段步骤

为配置添加模板设置在Config目录中，点击settings_schema.json。在代码中查找第一个右大括号},。在右大括号},下方的新行中，粘贴以下代码：{"name":&q

目录

• 答案
• 文章目录
• shopify设置商店模板和将表单字段设置为必填字段步骤详细回答

shopify设置商店模板和将表单字段设置为必填字段步骤详细回答

为配置添加模板设置

1. 在 Config 目录中，点击 settings_schema.json。

2. 在代码中查找第一个右大括号 },。在右大括号 }, 下方的新行中，粘贴以下代码：

{ "name": "Hear About Us", "settings": [ { "type": "text", "id": "hau_form_options", "label": "Form options", "default": "Facebook, Twitter, Google, Instagram, Youtube", "info": "Separate each option with a comma" }, { "type": "header", "content": "Form validation" }, { "type": "checkbox", "id": "hau_form_validation", "label": "Enable form validation", "default": true }, { "type": "text", "id": "hau_error_message", "label": "Error message", "info": "The error message that is displayed when no selection is made", "default": "Please select an option below" }, { "type": "text", "id": "hau_error_message_other", "label": "Other field error message", "info": "The error message that is displayed when there is no input in the 'Other' field", "default": "Please fill the text field below" }, { "type": "header", "content": "Error styling" }, { "type": "color", "id": "hau_error_color", "label": "Color", "default": "#ff0000" } ] },

1. 点击保存。

将表单字段设置为必填字段

若要防止客户在不选择您是如何了解到我们商店的？表单字段中选项的情况下继续结账，您可以将该字段设置为必填字段。

1. 在 Sections 目录中，点击 cart-template.liquid。如果您的模板中不包含 cart-template.liquid，请点击 Templates 目录中的 cart.liquid。

2. 在购物车表单字段中查找以下 novalidate 属性：

novalidate

1. 将 novalidate 属性替换为以下代码：

{% unless settings.hau_form_validation %}novalidate{% endunless %}

1. 点击保存。

2. 在模板编辑器中，点击侧边栏上的模板设置。

3. 点击了解我们选项卡。

4. 在表单验证下，确保已启用启用表单验证设置。

备注：您可以通过修改错误消息和其他字段错误消息文本字段设置来自定义显示的错误消息。您还可以通过更改错误样式下的颜色设置来自定义错误颜色。

Shopify商户官网原文详情：

Include the snippet in your cart page

To include the How did you hear about us? snippet in your cart page:

1. In the Sections directory, click cart-template.liquid. If your theme doesn't include a cart-template.liquid, then click cart.liquid in the Templates directory.

2. Find the closing </form> tag in the code. On a new line above the closing </form> tag, paste the following code:

   {% render 'hear-about-us' %}

3. Click Save.

Add theme settings for configuration

1. In the Config directory, click settings_schema.json.

2. Find the first closing curly bracket }, in the code. On a new line below the closing curly bracket },, paste the following code:

   { "name": "Hear About Us", "settings": [ { "type": "text", "id": "hau_form_options", "label": "Form options", "default": "Facebook, Twitter, Google, Instagram, Youtube", "info": "Separate each option with a comma" }, { "type": "header", "content": "Form validation" }, { "type": "checkbox", "id": "hau_form_validation", "label": "Enable form validation", "default": true }, { "type": "text", "id": "hau_error_message", "label": "Error message", "info": "The error message that is displayed when no selection is made", "default": "Please select an option below" }, { "type": "text", "id": "hau_error_message_other", "label": "Other field error message", "info": "The error message that is displayed when there is no input in the 'Other' field", "default": "Please fill the text field below" }, { "type": "header", "content": "Error styling" }, { "type": "color", "id": "hau_error_color", "label": "Color", "default": "#ff0000" } ] },

3. Click Save.

Make the form field required

To prevent customers from proceeding to the checkout without selecting an option in the How did you hear about us? form field, you can make the field required.

1. In the Sections directory, click cart-template.liquid. If your theme doesn't include a cart-template.liquid, then click cart.liquid in the Templates directory.

2. Find the following novalidate attribute in the cart form code:

   novalidate

3. Replace the novalidate attribute with the following code:

   {% unless settings.hau_form_validation %}novalidate{% endunless %}

4. Click Save.

5. In the theme editor, click Theme settings on the sidebar.

6. Click the Hear About Us tab.

7. Under Form Validation, make sure the Enable form validation setting is enabled.

Note

You can customise the error messages displayed by modifying the Error message and Other field error message text field settings. You can also customise the error color by changing the Color setting under Error Styling.

文章内容来源：Shopify商户官方网站