Müşterilerin mağazanızı nereden duyduğunu sorun

Sepet sayfanıza bir Bizi nereden duydunuz? form alanı ekleyerek müşterilerinize mağazanızı nereden duyduklarını sorabilirsiniz.

Bizi nereden duydunuz

"Bizi nereden duydunuz?" form alanını oluşturma

Bizi nereden duydunuz? form alanını oluşturmak için:

  1. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.

  2. Parçacık oluşturun:

    1. Parçacığınızı hear-about-us olarak adlandırın.
    2. Parçacığı oluştur'a tıklayın.
  3. Yeni hear-about-us.liquid parçacığınız içerisine aşağıdaki kodu yapıştırı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. **Kayıt**yap ' a tıklayın.

## Parçacığı sepet sayfanıza ekleme

**Bizi nereden duydunuz?** parçacığını sepet sayfanıza eklemek için:

1. **Bölümler** dizininde `cart-template.liquid` öğesine tıklayın. Temanızda `cart-template.liquid` dosyası yoksa **Şablonlar** dizinindeki `cart.liquid` öğesine tıklayın.

2. Koddaki kapatma `</form>` etiketini [bulun](/manual/productivity-tools/keyboard-shortcuts#find). Kapatma `</form>` etiketinin tam üzerindeki yeni satıra aşağıdaki kodu yapıştırın:

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

3. **Kayıt**yap ' a tıklayın.

## Yapılandırma için tema ayarları ekleme

1. **Yapılandırma** dizininde `settings_schema.json` seçeneğine tıklayın.

2. Kodda ilk kapanış süslü parantezini `},` [bulun](/manual/productivity-tools/keyboard-shortcuts#find). Kapanış süslü parantezinin `},` altındaki yeni bir satıra aşağıdaki kodu yapıştırın:

     `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. **Kayıt**yap ' a tıklayın.

## Form alanını gerekli hale getirme

Müşterilerin **Bizi nereden duydunuz?** form alanında bir seçenek belirlemeden ödeme sayfasına ilerlemesini engellemek alanı zorunlu hale getirebilirsiniz.

1. **Bölümler** dizininde `cart-template.liquid` öğesine tıklayın. Temanızda `cart-template.liquid` dosyası yoksa **Şablonlar** dizinindeki `cart.liquid` öğesine tıklayın.

2. Sepet formu kodunda yer alan aşağıdaki `novalidate` özelliğini [bulun](/manual/productivity-tools/keyboard-shortcuts#find):

novalidate `` 3.novalidate` özelliğini aşağıdaki kodla değiştirin:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Kayıtyap ' a tıklayın.

  2. Tema düzenleyicisinde, kenar çubuğunda Tema ayarları'na tıklayın.

  3. Bizi nereden duydunuz? sekmesine tıklayın.

  4. Form Doğrulaması'nın altında Form doğrulamayı etkinleştir ayarının etkin olduğundan emin olun.

Not: Hata mesajı'nı ve Diğer alan hata mesajı metin alanı ayarlarını değiştirerek görüntülenen hata mesajlarını özelleştirebilirsiniz. Ayrıca, Error Styling (Hata Stili) altındaki Renk ayarını değiştirerek hata rengini özelleştirebilirsiniz.

Seçeneklerinizi belirleme

Bizi nereden duydunuz? açılır menüsündeki seçenekleri özelleştirmek için tema düzenleyicisi içindeki tema ayarlarını kullanarak seçenekleri düzenleyebilirsiniz.

  1. Tema düzenleyicisinde, Tema ayarları'na tıklayın.

  2. Bizi nereden duydunuz? sekmesine tıklayın.

  3. Form seçenekleri altında, seçenekleri virgülle ayırarak ekleyin veya kaldırın.

  4. Kayıtyap ' a tıklayın.

Not: Diğer seçeneği otomatik olarak ekleneceği için bunu eklemeyin.

SSS

Elde edilen verileri nereden görebilirim?

Yanıtı, siparişin Ek ayrıntılar bölümünde yöneticide bulabilirsiniz:

Siparişin ek ayrıntılar bölümü

Listelenen seçeneklerden hiçbiri yanıt değilse bir müşteri bir tür ifade yazabilir mi?

Evet, olabilir. Müşteri, Diğer seçeneğini belirlediğinde yazacakları bir metin kutusu, açılır menünün altında görünür.

Yeni sipariş bildirimi e-postalarımda yanıtı gösterebilir miyim?

Evet. Yeni sipariş bildirimi e-postalarında müşteri yanıtlarını göstermek için:

  1. Yöneticinizin Bildirimler sayfası'na gidin ve Yeni sipariş e-posta şablonunuza aşağıdaki kodu ekleyin:

    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. Kayıtyap ' a tıklayın.

Shopify ile satış yapmaya hazır mısınız?

Ücretsiz olarak dene