Herausfinden, wie Kunden deinen Shop gefunden haben
Du kannst deine Kunden fragen, wie sie auf deinen Shop aufmerksam geworden sind, indem du auf deiner Warenkorbseite das Formularfeld Wie hast du von uns erfahren? hinzufügst.
<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>
Klicke auf Speichern.
Snippet in die Warenkorbseite einschließen
So fügst du das Snippet Wie hast du von uns erfahren? auf deiner Warenkorbseite ein:
Klicke im Verzeichnis Abschnitte auf cart-template.liquid. Wenn dein Theme nicht über cart-template.liquid verfügt, klicke im Verzeichnis Vorlagen auf cart.liquid.
Suche das abschließende Tag </form> im Code. Füge in einer neuen Zeile über dem abschließenden Tag </form> den folgenden Code ein:
{% render 'hear-about-us' %}
Klicke auf Speichern.
Theme-Einstellungen für die Konfiguration hinzufügen
Klicke im Verzeichnis Konfiguration auf settings_schema.json.
Suche nach der ersten abschließenden, geschweiften Klammer }, im Code. Füge in einer neuen Zeile unterhalb der abschließenden, geschweiften Klammer }, den folgenden Code ein:
{
"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"
}
]
},
Klicke auf Speichern.
Das Formularfeld als Pflichtfeld festlegen
Um zu verhindern, dass Kunden mit dem Checkout fortfahren, ohne im Formular Wie hast du von uns erfahren? eine Option auszuwählen, kannst du das Feld zu einem Pflichtfeld machen.
Klicke im Verzeichnis Abschnitte auf cart-template.liquid. Wenn dein Theme nicht über cart-template.liquid verfügt, klicke im Verzeichnis Vorlagen auf cart.liquid.
Suche nach dem Attribut novalidate im Warenkorbformular-Code:
novalidate
Ersetze das Attribut novalidate durch den folgenden Code:
Klicke im Theme-Editor in der Seitenleiste auf Theme-Einstellungen.
Klicke auf den Tab Von uns erfahren.
Prüfe unter Formularvalidierung, ob die Einstellung Formularvalidierung aktivieren aktiviert ist.
Optionen festlegen
Um die Optionen im Dropdown-Menü Wie hast du von uns erfahren? anzupassen, kannst du die Optionen über die Theme-Einstellungen im Theme-Editor bearbeiten.
Füge unter Formularoptionen durch Kommas getrennte Optionen hinzu oder entferne sie.
Klicke auf Speichern.
FAQs
Wo kann ich die erfassten Daten sehen?
Du siehst die Antwort im Adminbereich im Abschnitt Zusätzliche Details der Bestellung:
Wenn keine der aufgeführten Optionen die Antwort ist, kann ein Kunde etwas eingeben?
Ja. Wenn der Kunde Sonstiges auswählt, wird unter dem Dropdown-Menü ein Textfeld angezeigt, in das er eine Antwort eingeben kann.
Kann ich die Antwort in meinen Benachrichtigungs-E-Mails zu neuen Bestellungen anzeigen?
Ja. So zeigst du Kundenantworten in deinen Benachrichtigungs-E-Mails zu neuen Bestellungen an:
Gehe in deinem Adminbereich zu deiner Benachrichtigungsseite und füge den folgenden Code zu deiner E-Mail-Vorlage Neue Bestellung hinzu:
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 %}.
Klicke auf Speichern.
Du hast die gesuchten Antworten nicht gefunden? Wir helfen dir gerne weiter.
