Tìm hiểu xem vì sao khách hàng biết về cửa hàng

Bạn có thể hỏi vì sao khách hàng biết về cửa hàng bằng cách thêm trường biểu mẫu Bạn biết về chúng tôi nhờ đâu? vào trang giỏ hàng.

Bạn biết về chúng tôi nhờ đâu

Tạo trường biểu mẫu "Bạn biết về chúng tôi nhờ đâu?"

Để tạo trường biểu mẫu Bạn biết về chúng tôi nhờ đâu?

  1. Trong thư mục Đoạn mã, nhấp vào Thêm đoạn mã mới.

  2. Tạo đoạn mã:

    1. Đặt tên cho đoạn mã hear-about-us của bạn.
    2. Nhấp vào Create snippet (Tạo đoạn mã).
  3. Dán mã sau vào đoạn mã mới hear-about-us.liquid của bạn:

```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. Nhấp vào **Save** (Lưu).

## Thêm đoạn mã vào trang giỏ hàng

Để thêm đoạn mã **Bạn biết đến chúng tôi qua đâu?** vào trang giỏ hàng:

1. Trong thư mục **Mục**, nhấp vào `cart-template.liquid`. Nếu chủ đề của bạn không có `cart-template.liquid`, hãy nhấp vào `cart.liquid` trong thư mục **Mẫu**.

2. [Tìm](/manual/productivity-tools/keyboard-shortcuts#find) thẻ có kết thúc là `</form>` trong mã. Dán mã sau vào dòng mới nằm phía trên thẻ có kết thúc là `</form>`:

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

3. Nhấp vào **Save** (Lưu).

## Thêm cài đặt chủ đề cho cấu hình

1. Trong thư mục **Cấu hình**, nhấp vào `settings_schema.json`.

2. [Tìm](/manual/productivity-tools/keyboard-shortcuts#find) dấu ngoặc nhọn đóng đầu tiên `},` trong mã. Trên dòng mới bên dưới dấu ngoặc nhọn đóng `},`, dán mã sau:

     `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. Nhấp vào **Save** (Lưu).

## Đặt trường biểu mẫu thành bắt buộc

Để tránh trường hợp khách hàng tiếp tục đến bước thanh toán mà không chọn một tùy chọn trong trường biểu mẫu **Bạn biết đến chúng tôi qua đâu?**, bạn có thể đặt trường này thành bắt buộc.

1. Trong thư mục **Mục**, nhấp vào `cart-template.liquid`. Nếu chủ đề của bạn không có `cart-template.liquid`, hãy nhấp vào `cart.liquid` trong thư mục **Mẫu**.

2. [Tìm](/manual/productivity-tools/keyboard-shortcuts#find) thuộc tính `novalidate` sau trong mã biểu mẫu giỏ hàng:

novalidate `` 3. Thay thuộc tínhnovalidate` bằng mã sau:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Nhấp vào Save (Lưu).

  2. Trong trình biên tập chủ đề, nhấp vào Cài đặt chủ đề trên thanh bên.

  3. Nhấp vào tab Biết đến chúng tôi.

  4. Trong phần Xác thực biểu mẫu, đảm bảo đã bật cài đặt Bật xác thực biểu mẫu.

Đặt tùy chọn

Để tùy chỉnh các tùy chọn trong menu thả xuống Bạn biết đến chúng tôi qua đâu?, bạn có thể chỉnh sửa tùy chọn bằng cài đặt chủ đề trong trình biên tập chủ đề.

  1. Trong trình biên tập chủ đề, nhấp vào Cài đặt chủ đề.

  2. Nhấp vào tab Biết đến chúng tôi.

  3. Trong tùy chọn Biểu mẫu, thêm hoặc xóa tùy chọn và phân tách các tùy chọn bằng dấu phẩy.

  4. Nhấp vào Save (Lưu).

Câu hỏi thường gặp

Tôi sẽ nhìn thấy dữ liệu được thu thập ở đâu?

Bạn sẽ thấy câu trả lời trong trang quản trị, trong mục Chi tiết bổ sung của đơn hàng:

Mục chi tiết bổ sung của đơn hàng

Nếu tùy chọn được liệt kê không phải là câu trả lời, khách hàng có thể nhập câu trả lời khác không?

Có thể. Khi khách hàng chọn mục Khác, một hộp văn bản sẽ xuất hiện bên dưới menu thả xuống để khách nhập câu trả lời.

Tôi có thể hiển thị câu trả lời trong email thông báo về Đơn hàng mới không?

Có. Để hiển thị phản hồi của khách hàng trong email thông báo về Đơn hàng mới:

  1. Mở trang Thông báo trong trang quản trị và thêm mã sau vào mẫu email Đơn hàng mới:

    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. Nhấp vào Save (Lưu).

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí