Tiedustele, mitä kautta asiakkaat kuulivat kaupastasi

Voit tiedustella asiakkailtasi, mitä kautta he kuulivat kaupastasi lisäämällä Mitä kautta kuulit meistä? ‑lomakekentän ostoskorisivullesi.

Mitä kautta kuulit meistä

Mitä kautta kuulit meistä? ‑lomakekentän luominen

Näin luot Mitä kautta kuulit meistä? ‑lomakekentän:

  1. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.

  2. Luo koodinpätkä:

    1. Nimeä koodinpätkäsi hear-about-us.
    2. Klikkaa Luo koodinpätkä.
  3. Liitä seuraava koodi uudessa koodinpätkässäsi 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. Napauta **Tallenna**.

## Koodinpätkän sisällyttäminen ostoskorisivuusi

**Mitä kautta kuulit meistä?** -koodinpätkän lisääminen ostoskorisivulle:

1. Klikkaa **Osat**-hakemistossa kohtaa `cart-template.liquid`. Jos teemassasi ei ole mallia `cart-template.liquid`, valitse silloin **Mallit**-hakemistosta `cart.liquid`.

2. [Etsi](/manual/productivity-tools/keyboard-shortcuts#find) tämän elementin lopputunniste `</form>`. Liitä seuraava koodi uudelle riville lopputunnisteen `</form>` yläpuolelle:

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

3. Napauta **Tallenna**.

## Teeman asetusten lisääminen määritystä varten

1. Klikkaa **Asetus**-hakemistossa `settings_schema.json`.

2. [Etsi](/manual/productivity-tools/keyboard-shortcuts#find) koodista ensimmäinen sulkeva kaarisulje `},`. Liitä seuraava koodi uudelle riville sulkevan kaarisulkeen alle `},`:

     `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. Napauta **Tallenna**.

## Lomakekentän asettaminen pakolliseksi

Jos haluat estää asiakkaita jatkamasta kassalle ilman, että he valitsevat jonkin vaihtoehdon **Mitä kautta kuulit meistä?** -lomakekenttään, voit määrittää kentän pakolliseksi.

1. Klikkaa **Osat**-hakemistossa kohtaa `cart-template.liquid`. Jos teemassasi ei ole mallia `cart-template.liquid`, valitse silloin **Mallit**-hakemistosta `cart.liquid`.

2. [Etsi](/manual/productivity-tools/keyboard-shortcuts#find) seuraava `novalidate`-määrite ostoskorilomakkeen koodista:

novalidate `` 3. Korvaanovalidate`-määrite seuraavalla koodilla:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Napauta Tallenna.

  2. Klikkaa teemaeditorin sivupalkissa Teeman asetukset.

  3. Klikkaa Kuule meistä -välilehteä.

  4. Varmista Lomakkeen validointi -kohdassa, että Ota lomakkeen validointi käyttöön -valinta on käytössä.

Määritä vaihtoehdot

Jos haluat mukauttaa vaihtoehtoja avattavasta Mitä kautta kuulit meistä? -valikosta voit muokata vaihtoehtoja teemaeditorin teema-asetuksissa.

  1. Klikkaa teemaeditorissa Teeman asetukset.

  2. Klikkaa Kuule meistä -välilehteä.

  3. Lisää tai poista pilkuilla eroteltuja vaihtoehtoja kohdassa Lomakkeen vaihtoehdot.

  4. Napauta Tallenna.

Usein kysyttyä

Missä voin tarkastella kerättyjä tietoja?

Näet vastauksen ylläpitäjässä tilauksen Lisätiedot-osiossa:

Tilauksen Lisätiedot-osio

Jos mikään luettelossa oleva vaihtoehto ei ole sopiva, voiko asiakas kirjoittaa oman vastauksen?

Kyllä. Kun asiakas valitsee Muu-vaihtoehdon, avattavan valikon alle aukeaa tekstiruutu, johon hän voi kirjoittaa vastauksen.

Voinko näyttää vastauksen uuden tilauksen ilmoitussähköpostissa?

Kyllä. Voit näyttää asiakkaiden vastauksia uuden tilauksen ilmoitussähköpostissasi seuraavalla tavalla:

  1. Siirry ylläpitäjän Ilmoitus-sivulle ja lisää seuraava koodi Uusi tilaus -sähköpostimalliin:

    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. Napauta Tallenna.

Oletko valmis aloittamaan myynnin Shopifyssa?

Kokeile ilmaiseksi