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

shopify设置商店模板，将表单字段设置为必填字段步骤的核心内容

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

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

为配置添加模板设置

在Config点击目录settings_schema.json。

在代码中找到第一个右大括号}。在右大括号}下方的新行中粘贴以下代码：

{"name":"HearAboutUs","settings":[{"type":"text","id":"hau_form_options","label":"Formoptions","default":"Facebook,Twitter,Google,Instagram,Youtube","info":"Separateeachoptionwithacomma"},{"type":"header","content":"Formvalidation"},{"type":"checkbox","id":"hau_form_validation","label":"Enableformvalidation","default":true},{"type":"text","id":"hau_error_message","label":"Errormessage","info":"Theerrormessagethatisdisplayedwhennoselectionismade","default":"Pleaseselectanoptionbelow"},{"type":"text","id":"hau_error_message_other","label":"Otherfielderrormessage","info":"Theerrormessagethatisdisplayedwhenthereisnoinputinthe'Other'field","default":"Pleasefillthetextfieldbelow"},{"type":"header","content":"Errorstyling"},{"type":"color","id":"hau_error_color","label":"Color","default":"#ff0000"}]},

点击保存。

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

如果你想防止顾客在不选择的情况下了解我们的商店？在表单字段中选项的情况下，您可以将该字段设置为必填字段。

在Sections点击目录cart-template.liquid。假如你的模板不包括在内cart-template.liquid，请点击Templates目录中的cart.liquid。

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

novalidate

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

{%unlesssettings.hau_form_validation%}novalidate{%endunless%}

点击保存。

在模板编辑器中，单击侧栏上的模板设置。

点击了解我们的选项卡。

在表格验证下，确保启用表格验证设置。

注：您可以从定义显示的错误信息中设置错误信息和其他字段错误信息文本字段。您也可以通过改变错误风格下的颜色设置来定义错误的颜色。

Shopify商户官网原文详情:

Include the snippet in your cart page

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

In theSectionsdirectory,clickcart-template.liquid. If your theme doesn't include acart-template.liquid,then clickcart.liquidin theTemplatesdirectory.

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

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

ClickSave.

Add theme settings for configuration

In theConfigdirectory,clicksettings_schema.json.

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

{"name":"HearAboutUs","settings":[{"type":"text","id":"hau_form_options","label":"Formoptions","default":"Facebook,Twitter,Google,Instagram,Youtube","info":"Separateeachoptionwithacomma"},{"type":"header","content":"Formvalidation"},{"type":"checkbox","id":"hau_form_validation","label":"Enableformvalidation","default":true},{"type":"text","id":"hau_error_message","label":"Errormessage","info":"Theerrormessagethatisdisplayedwhennoselectionismade","default":"Pleaseselectanoptionbelow"},{"type":"text","id":"hau_error_message_other","label":"Otherfielderrormessage","info":"Theerrormessagethatisdisplayedwhenthereisnoinputinthe'Other'field","default":"Pleasefillthetextfieldbelow"},{"type":"header","content":"Errorstyling"},{"type":"color","id":"hau_error_color","label":"Color","default":"#ff0000"}]},

ClickSave.

Make the form field required

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

In theSectionsdirectory,clickcart-template.liquid. If your theme doesn't include acart-template.liquid,then clickcart.liquidin theTemplatesdirectory.

Findthe followingnovalidateattribute in the cart form code:

novalidate

Replace thenovalidateattribute with the following code:

{%unlesssettings.hau_form_validation%}novalidate{%endunless%}

ClickSave.

In thetheme editor,clickTheme settingson the sidebar.

Click theHear About Ustab.

UnderForm Validation,make sure theEnable form validationsetting is enabled.

Note

You can customise the error messages displayed by modifying theError messageandOther field error messagetext field settings. You can also customise the error color by changing theColorsetting underError Styling.

文章内容来源：Shopify官家官网