询问客户了解您商店的途径

您可以通过向购物车页面添加**您是如何了解到我们商店的？**表单字段来询问客户了解您商店的途径。

本页相关主题

创建“您是如何了解到我们商店的？”表单字段

桌面

在 Shopify 后台中，转至在线商店 > 模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Snippets 目录中点击添加新片段。
创建代码片段：
1. 将代码片段命名为 hear-about-us。
2. 点击创建片段。
在新的 hear-about-us.liquid 代码片段中，粘贴以下代码：

<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label {
    font-weight: bold;
}

select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other {
    width: 100%;
    padding: 8px 10px 8px 10px;
    line-height: 1.2;
}
#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
#how-did-you-hear-about-us-other--error {
    display:block;
    margin-bottom: 5px;
}
#how-did-you-hear-about-us-other.error,
#how-did-you-hear-about-us.error {
    border: 2px solid {{ settings.hau_error_color }};
}
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error {
    color: {{ settings.hau_error_color }};
}
</style>
<div class="form-vertical">
<p>
    <label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
    <span id="how-did-you-hear-about-us--error" style="display:none">{{ settings.hau_error_message }}</span>
    <select id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]">
    <option value=""{% if cart.attributes.how-did-you-hear-about-us == "" %} selected{% endif %}>Please make a selection</option>
    {% assign optionsArray = settings.hau_form_options | split: ',' %}
    {% for o in optionsArray %}
    {% assign option = o | strip %}
    <option value="{{ option }}"{% if cart.attributes.how-did-you-hear-about-us == option %} selected{% endif %}>{{ option }}</option>
    {% endfor %}
    <option value="Other"{% if cart.attributes.how-did-you-hear-about-us == "Other" %} selected{% endif %}>Other</option>
    </select>
</p>
<p id="otherFormWrapper" style="{% unless cart.attributes.how-did-you-hear-about-us == 'Other' %}display:none{% endunless %}">
    <label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Other</label>
    <span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings.hau_error_message_other }}</span>
    <input id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart.attributes.how-did-you-hear-about-us-other }}"/>
</p>
</div>
<script>
(function() {
document.addEventListener(&#x22;DOMContentLoaded&#x22;, initForm);
document.addEventListener(&#x22;shopify:section:load&#x22;, initForm);

function initForm(){

var formElement = document.querySelector(&#x27;#how-did-you-hear-about-us&#x27;);
var formError = document.querySelector(&#x27;#how-did-you-hear-about-us--error&#x27;);
var otherFormElement = document.querySelector(&#x27;#how-did-you-hear-about-us-other&#x27;);
var otherFormError = document.querySelector(&#x27;#how-did-you-hear-about-us-other--error&#x27;);
var otherFormWrapper = document.querySelector(&#x27;#otherFormWrapper&#x27;);
var checkoutButtons = document.querySelectorAll(&#x27;[name=&#x22;checkout&#x22;], [name=&#x22;goto_pp&#x22;], [name=&#x22;goto_gc&#x22;]&#x27;);

function showOrHideForm(){
    if (formElement.value == &#x27;Other&#x27;){
    otherFormWrapper.style.display = &#x27;&#x27;;
    } else {
    otherFormWrapper.style.display = &#x27;none&#x27;;
    }
}

function checkFormElement(){
    if (formElement.value.length == 0){
    formElement.classList.add(&#x27;error&#x27;);
    formError.style.display = &#x27;&#x27;;
    } else {
    if (formElement.classList.contains(&#x27;error&#x27;)){
        formElement.classList.remove(&#x27;error&#x27;);
        formError.style.display = &#x27;none&#x27;;
    }
    }
}

function checkOtherFormElement(){
    if (otherFormElement.value.length == 0){
    otherFormElement.classList.add(&#x27;error&#x27;);
    otherFormError.style.display = &#x27;&#x27;;
    } else {
    if (otherFormElement.classList.contains(&#x27;error&#x27;)){
        otherFormElement.classList.remove(&#x27;error&#x27;);
        otherFormError.style.display = &#x27;none&#x27;;
    }
    }
}

otherFormElement.addEventListener(&#x22;input&#x22;, function() {
    {% if settings.hau_form_validation %}
    checkOtherFormElement();
    {% endif %}
});

formElement.addEventListener(&#x22;change&#x22;, function() {
    showOrHideForm();
    {% if settings.hau_form_validation %}
    checkFormElement();
    {% endif %}
});

checkoutButtons.forEach(function(element){
    element.addEventListener(&#x22;click&#x22;, function(evt) {

    {% if settings.hau_form_validation %}
    var validated = true;
    if (formElement.value.length == 0){
        checkFormElement();
        validated = false;
    }
    if (formElement.value == &#x27;Other&#x27;){
        if (otherFormElement.value.length == 0){
        checkOtherFormElement();
        validated = false;
        }
    }
    if (!validated) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    {% endif %}
    });
});

}
})()
</script>

点击保存。

iPhone

在 Shopify 应用中，点击 … 按钮。
在销售渠道部分，点击在线商店。
点击管理模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Snippets 目录中点击添加新片段。
创建代码片段：
1. 将代码片段命名为 hear-about-us。
2. 点击创建片段。
在新的 hear-about-us.liquid 代码片段中，粘贴以下代码：

<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label {
    font-weight: bold;
}

select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other {
    width: 100%;
    padding: 8px 10px 8px 10px;
    line-height: 1.2;
}
#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
#how-did-you-hear-about-us-other--error {
    display:block;
    margin-bottom: 5px;
}
#how-did-you-hear-about-us-other.error,
#how-did-you-hear-about-us.error {
    border: 2px solid {{ settings.hau_error_color }};
}
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error {
    color: {{ settings.hau_error_color }};
}
</style>
<div class="form-vertical">
<p>
    <label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
    <span id="how-did-you-hear-about-us--error" style="display:none">{{ settings.hau_error_message }}</span>
    <select id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]">
    <option value=""{% if cart.attributes.how-did-you-hear-about-us == "" %} selected{% endif %}>Please make a selection</option>
    {% assign optionsArray = settings.hau_form_options | split: ',' %}
    {% for o in optionsArray %}
    {% assign option = o | strip %}
    <option value="{{ option }}"{% if cart.attributes.how-did-you-hear-about-us == option %} selected{% endif %}>{{ option }}</option>
    {% endfor %}
    <option value="Other"{% if cart.attributes.how-did-you-hear-about-us == "Other" %} selected{% endif %}>Other</option>
    </select>
</p>
<p id="otherFormWrapper" style="{% unless cart.attributes.how-did-you-hear-about-us == 'Other' %}display:none{% endunless %}">
    <label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Other</label>
    <span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings.hau_error_message_other }}</span>
    <input id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart.attributes.how-did-you-hear-about-us-other }}"/>
</p>
</div>
<script>
(function() {
document.addEventListener(&#x22;DOMContentLoaded&#x22;, initForm);
document.addEventListener(&#x22;shopify:section:load&#x22;, initForm);

function initForm(){

var formElement = document.querySelector(&#x27;#how-did-you-hear-about-us&#x27;);
var formError = document.querySelector(&#x27;#how-did-you-hear-about-us--error&#x27;);
var otherFormElement = document.querySelector(&#x27;#how-did-you-hear-about-us-other&#x27;);
var otherFormError = document.querySelector(&#x27;#how-did-you-hear-about-us-other--error&#x27;);
var otherFormWrapper = document.querySelector(&#x27;#otherFormWrapper&#x27;);
var checkoutButtons = document.querySelectorAll(&#x27;[name=&#x22;checkout&#x22;], [name=&#x22;goto_pp&#x22;], [name=&#x22;goto_gc&#x22;]&#x27;);

function showOrHideForm(){
    if (formElement.value == &#x27;Other&#x27;){
    otherFormWrapper.style.display = &#x27;&#x27;;
    } else {
    otherFormWrapper.style.display = &#x27;none&#x27;;
    }
}

function checkFormElement(){
    if (formElement.value.length == 0){
    formElement.classList.add(&#x27;error&#x27;);
    formError.style.display = &#x27;&#x27;;
    } else {
    if (formElement.classList.contains(&#x27;error&#x27;)){
        formElement.classList.remove(&#x27;error&#x27;);
        formError.style.display = &#x27;none&#x27;;
    }
    }
}

function checkOtherFormElement(){
    if (otherFormElement.value.length == 0){
    otherFormElement.classList.add(&#x27;error&#x27;);
    otherFormError.style.display = &#x27;&#x27;;
    } else {
    if (otherFormElement.classList.contains(&#x27;error&#x27;)){
        otherFormElement.classList.remove(&#x27;error&#x27;);
        otherFormError.style.display = &#x27;none&#x27;;
    }
    }
}

otherFormElement.addEventListener(&#x22;input&#x22;, function() {
    {% if settings.hau_form_validation %}
    checkOtherFormElement();
    {% endif %}
});

formElement.addEventListener(&#x22;change&#x22;, function() {
    showOrHideForm();
    {% if settings.hau_form_validation %}
    checkFormElement();
    {% endif %}
});

checkoutButtons.forEach(function(element){
    element.addEventListener(&#x22;click&#x22;, function(evt) {

    {% if settings.hau_form_validation %}
    var validated = true;
    if (formElement.value.length == 0){
        checkFormElement();
        validated = false;
    }
    if (formElement.value == &#x27;Other&#x27;){
        if (otherFormElement.value.length == 0){
        checkOtherFormElement();
        validated = false;
        }
    }
    if (!validated) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    {% endif %}
    });
});

}
})()
</script>

点击保存。

Android

在 Shopify 应用中，点击 … 按钮。
在销售渠道部分，点击在线商店。
点击管理模板。
找到要编辑的模板，点击 ... 按钮打开操作菜单，然后点击编辑代码。
在 Snippets 目录中点击添加新片段。
创建代码片段：
1. 将代码片段命名为 hear-about-us。
2. 点击创建片段。
在新的 hear-about-us.liquid 代码片段中，粘贴以下代码：

<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label {
    font-weight: bold;
}

select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other {
    width: 100%;
    padding: 8px 10px 8px 10px;
    line-height: 1.2;
}
#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
#how-did-you-hear-about-us-other--error {
    display:block;
    margin-bottom: 5px;
}
#how-did-you-hear-about-us-other.error,
#how-did-you-hear-about-us.error {
    border: 2px solid {{ settings.hau_error_color }};
}
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error {
    color: {{ settings.hau_error_color }};
}
</style>
<div class="form-vertical">
<p>
    <label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
    <span id="how-did-you-hear-about-us--error" style="display:none">{{ settings.hau_error_message }}</span>
    <select id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]">
    <option value=""{% if cart.attributes.how-did-you-hear-about-us == "" %} selected{% endif %}>Please make a selection</option>
    {% assign optionsArray = settings.hau_form_options | split: ',' %}
    {% for o in optionsArray %}
    {% assign option = o | strip %}
    <option value="{{ option }}"{% if cart.attributes.how-did-you-hear-about-us == option %} selected{% endif %}>{{ option }}</option>
    {% endfor %}
    <option value="Other"{% if cart.attributes.how-did-you-hear-about-us == "Other" %} selected{% endif %}>Other</option>
    </select>
</p>
<p id="otherFormWrapper" style="{% unless cart.attributes.how-did-you-hear-about-us == 'Other' %}display:none{% endunless %}">
    <label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Other</label>
    <span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings.hau_error_message_other }}</span>
    <input id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart.attributes.how-did-you-hear-about-us-other }}"/>
</p>
</div>
<script>
(function() {
document.addEventListener(&#x22;DOMContentLoaded&#x22;, initForm);
document.addEventListener(&#x22;shopify:section:load&#x22;, initForm);

function initForm(){

var formElement = document.querySelector(&#x27;#how-did-you-hear-about-us&#x27;);
var formError = document.querySelector(&#x27;#how-did-you-hear-about-us--error&#x27;);
var otherFormElement = document.querySelector(&#x27;#how-did-you-hear-about-us-other&#x27;);
var otherFormError = document.querySelector(&#x27;#how-did-you-hear-about-us-other--error&#x27;);
var otherFormWrapper = document.querySelector(&#x27;#otherFormWrapper&#x27;);
var checkoutButtons = document.querySelectorAll(&#x27;[name=&#x22;checkout&#x22;], [name=&#x22;goto_pp&#x22;], [name=&#x22;goto_gc&#x22;]&#x27;);

function showOrHideForm(){
    if (formElement.value == &#x27;Other&#x27;){
    otherFormWrapper.style.display = &#x27;&#x27;;
    } else {
    otherFormWrapper.style.display = &#x27;none&#x27;;
    }
}

function checkFormElement(){
    if (formElement.value.length == 0){
    formElement.classList.add(&#x27;error&#x27;);
    formError.style.display = &#x27;&#x27;;
    } else {
    if (formElement.classList.contains(&#x27;error&#x27;)){
        formElement.classList.remove(&#x27;error&#x27;);
        formError.style.display = &#x27;none&#x27;;
    }
    }
}

function checkOtherFormElement(){
    if (otherFormElement.value.length == 0){
    otherFormElement.classList.add(&#x27;error&#x27;);
    otherFormError.style.display = &#x27;&#x27;;
    } else {
    if (otherFormElement.classList.contains(&#x27;error&#x27;)){
        otherFormElement.classList.remove(&#x27;error&#x27;);
        otherFormError.style.display = &#x27;none&#x27;;
    }
    }
}

otherFormElement.addEventListener(&#x22;input&#x22;, function() {
    {% if settings.hau_form_validation %}
    checkOtherFormElement();
    {% endif %}
});

formElement.addEventListener(&#x22;change&#x22;, function() {
    showOrHideForm();
    {% if settings.hau_form_validation %}
    checkFormElement();
    {% endif %}
});

checkoutButtons.forEach(function(element){
    element.addEventListener(&#x22;click&#x22;, function(evt) {

    {% if settings.hau_form_validation %}
    var validated = true;
    if (formElement.value.length == 0){
        checkFormElement();
        validated = false;
    }
    if (formElement.value == &#x27;Other&#x27;){
        if (otherFormElement.value.length == 0){
        checkOtherFormElement();
        validated = false;
        }
    }
    if (!validated) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    {% endif %}
    });
});

}
})()
</script>

点击保存。

在购物车页面中包含代码片段

若要在购物车页面中包含**您是如何了解到我们商店的？**代码片段，请执行以下操作：

在 Sections 目录中，点击 cart-template.liquid。如果您的模板中不包含 cart-template.liquid，请点击 Templates 目录中的 cart.liquid。
查找代码中的结束 </form> 标记。在结束 </form> 标记上方的新行中，粘贴以下代码：

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

点击保存。

为配置添加模板设置

在 Config 目录中，点击 settings_schema.json。
在代码中查找第一个右大括号 },。在右大括号 }, 下方的新行中，粘贴以下代码：

{
"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"
    }
]
},

点击保存。

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

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

在 Sections 目录中，点击 cart-template.liquid。如果您的模板中不包含 cart-template.liquid，请点击 Templates 目录中的 cart.liquid。
在购物车表单字段中查找以下 novalidate 属性：

novalidate

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

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

点击保存。
在模板编辑器中，点击侧边栏上的模板设置。
点击了解我们选项卡。
在表单验证下，确保已启用启用表单验证设置。

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

设置选项

若要自定义**您是如何了解到我们商店的？**下拉菜单中的选项，您可以使用模板编辑器中的模板设置来编辑选项。

在模板编辑器中，点击模板设置。
点击了解我们选项卡。
在表单选项下，添加或删除选项（用逗号分隔）。
点击保存。

备注：请勿包含选项其他，因为系统会自动添加该选项。

常见问题解答

在哪里可以看到获取的数据？

您将在后台中订单的其他详情部分中看到答案：

如果列出的选项都不是答案，客户可以键入内容吗？

可以。客户选择其他后，下拉菜单下方将出现一个文本框，可在其中键入答案。

我可以在“新订单通知电子邮件”中显示答案吗？

可以。若要在“新订单通知电子邮件”中显示客户回复，请执行以下操作：

转到后台中的通知页面，然后向您的新订单电子邮件模板中添加以下代码：

This customer heard about us through {% if attributes.how-did-you-hear-about-us-other == blank %}{{ attributes.how-did-you-hear-about-us }}{% else %}{{ attributes.how-did-you-hear-about-us-other }}{% endif %}.

点击保存。