shopify設(shè)置商店模板和將表單字段設(shè)置為必填字段步驟-ESG跨境

為配置添加模板設(shè)置

1. 在 Config 目錄中，點(diǎn)擊 settings_schema.json。

2. 在代碼中查找第一個(gè)右大括號(hào) },。在右大括號(hào) }, 下方的新行中，粘貼以下代碼：

{ "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. 點(diǎn)擊保存。

將表單字段設(shè)置為必填字段

若要防止客戶在不選擇您是如何了解到我們商店的？表單字段中選項(xiàng)的情況下繼續(xù)結(jié)賬，您可以將該字段設(shè)置為必填字段。

1. 在 Sections 目錄中，點(diǎn)擊 cart-template.liquid。如果您的模板中不包含 cart-template.liquid，請(qǐng)點(diǎn)擊 Templates 目錄中的 cart.liquid。

2. 在購(gòu)物車表單字段中查找以下 novalidate 屬性：

novalidate

1. 將 novalidate 屬性替換為以下代碼：

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

1. 點(diǎn)擊保存。

2. 在模板編輯器中，點(diǎn)擊側(cè)邊欄上的模板設(shè)置。

3. 點(diǎn)擊了解我們選項(xiàng)卡。

4. 在表單驗(yàn)證下，確保已啟用啟用表單驗(yàn)證設(shè)置。

備注：您可以通過(guò)修改錯(cuò)誤消息和其他字段錯(cuò)誤消息文本字段設(shè)置來(lái)自定義顯示的錯(cuò)誤消息。您還可以通過(guò)更改錯(cuò)誤樣式下的顏色設(shè)置來(lái)自定義錯(cuò)誤顏色。

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 ceeding 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. Repla 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.

特別聲明：以上文章內(nèi)容僅代表作者本人觀點(diǎn)，不代表ESG跨境電商觀點(diǎn)或立場(chǎng)。如有關(guān)于作品內(nèi)容、版權(quán)或其它問(wèn)題請(qǐng)于作品發(fā)表后的30日內(nèi)與ESG跨境電商聯(lián)系。