고객이 스토어에 대해 어떻게 알게 되었는지 묻는 질문

카트 페이지에 우리에 대해 어떻게 알게 되었습니까? 양식 필드를 추가하여 고객이 어떻게 스토어에 대해 알게 되었는지 물어볼 수 있습니다.

우리에 대해 어떻게 알게 되었습니까?

'우리에 대해 어떻게 알게 되었습니까?' 양식 필드 생성

우리에 대해 어떻게 알게 되었습니까? 양식 필드를 생성하려면 다음을 수행하십시오.

  1. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.

  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. **섹션** 디렉토리에서 `cart-template.liquid`를 클릭합니다. 테마에 `cart-template.liquid`가 포함되지 않은 경우에는 **템플릿** 디렉토리의 `cart.liquid`를 클릭합니다.

2. 코드에서 닫는 `</form>` 태그를 [찾습니다](/manual/productivity-tools/keyboard-shortcuts#find). 닫는 `</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. **섹션** 디렉토리에서 `cart-template.liquid`를 클릭합니다. 테마에 `cart-template.liquid`가 포함되지 않은 경우에는 **템플릿** 디렉토리의 `cart.liquid`를 클릭합니다.

2. 카트 양식 코드에서 다음 `novalidate` 특성을 [찾습니다](/manual/productivity-tools/keyboard-shortcuts#find).

novalidate `` 3.novalidate` 특성을 다음 코드로 대체합니다.

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. 저장을 클릭합니다.

  2. 테마 편집기에서 사이드바에 있는 테마 설정을 클릭합니다.

  3. 회사 소개 탭을 클릭합니다.

  4. 양식 유효성 검사 아래에서 양식 유효성 검사 사용 설정이 활성화되어 있는지 확인합니다.

옵션 설정

우리에 대해 어떻게 알게 되었습니까? 드롭다운 메뉴에서 옵션을 사용자 지정하려면 테마 편집기 내에서 테마 설정을 사용하여 옵션을 편집할 수 있습니다.

  1. 테마 편집기에서 테마 설정을 클릭합니다.

  2. 회사 소개 탭을 클릭합니다.

  3. 양식 옵션 아래에서 쉼표로 구분하여 옵션을 추가하거나 제거합니다.

  4. 저장을 클릭합니다.

FAQ

캡처된 데이터는 어디에서 볼 수 있습니까?

주문의 추가 세부 정보 섹션에 있는 관리자에 답변이 표시됩니다.

주문의 추가 세부 정보 섹션

나열된 옵션에 답변이 없는 경우 고객이 내용을 입력할 수 있습니까?

예, 가능합니다. 고객이 기타를 선택하면 답변을 입력할 수 있는 텍스트 상자가 드롭다운 메뉴 아래에 표시됩니다.

새 주문 알림 이메일에 답변을 표시할 수 있습니까?

예. 새 주문 알림 이메일에 고객 응답을 표시하려면 다음을 수행합니다.

  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와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험