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

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

您是如何了解到我们商店的

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

若要创建您是如何了解到我们商店的?表单字段,请执行以下操作:

  1. Snippets 目录中单击添加新片段

  2. 创建代码片段:

    1. 将代码片段命名为 hear-about-us
    2. 单击创建片段
  3. 在新的 hear-about-us.liquid 代码片段中,粘贴以下代码:

```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("DOMContentLoaded", initForm);
    document.addEventListener("shopify:section:load", initForm);

    function initForm(){

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

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

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

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

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

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

    checkoutButtons.forEach(function(element){
        element.addEventListener("click", function(evt) {

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

    }
})()
</script>
1. 点击**保存**。

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

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

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

2. [查找](/manual/productivity-tools/keyboard-shortcuts#find)代码中的结束 `</form>` 标记。在结束 `</form>` 标记上方的新行中,粘贴以下代码:

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

3. 点击**保存**。

## 为配置添加模板设置

1. 在 **Config** 目录中,单击 `settings_schema.json`。

2. 在代码中[查找](/manual/productivity-tools/keyboard-shortcuts#find)第一个右大括号 `},`。在右大括号 `},` 下方的新行中,粘贴以下代码:

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

3. 点击**保存**。

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

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

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

2. 在购物车表单字段中[查找](/manual/productivity-tools/keyboard-shortcuts#find)以下 `novalidate` 属性:

novalidate `` 3. 将novalidate` 属性替换为以下代码:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. 点击保存

  2. 模板编辑器中,单击侧边栏上的模板设置

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

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

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

设置选项

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

  1. 模板编辑器中,单击模板设置

  2. 单击了解我们选项卡。

  3. 表单选项下,添加或删除选项(用逗号分隔)。

  4. 点击保存

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

常见问题解答

在哪里可以看到捕获的数据?

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

订单的其他详情部分

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

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

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

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

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

    liquid 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 %}.

  2. 点击保存

准备好开始使用 Shopify 进行销售了吗?

免费试用