<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>
Klikk på Lagre.
Inkluder kodebiten på handlekurvsiden
For å legge inn Hvordan hørte du om oss?-kodebiten på handlekurvsiden:
I Seksjoner-katalogen klikker du på cart-template.liquid. Hvis temaet ditt ikke har en cart-template.liquid, klikker du på cart.liquid i Maler-katalogen.
Finn den avsluttende </form>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </form>-taggen:
{% render 'hear-about-us' %}
Klikk på Lagre.
Legg til temainnstillinger for konfigurasjon
I katalogen Config klikker du på settings_schema.json.
Finn den første avsluttende klammeparentesen }, i koden. Lim inn følgende kode på en ny linje under den avsluttende klammeparentesen },:
{
"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"
}
]
},
Klikk på Lagre.
Gjør skjemafeltet obligatorisk
For å forhindre at kundene kan fortsette til kassen uten å velge et alternativ i Hvordan hørte du om oss?-skjemafeltet, kan du gjøre feltet obligatorisk.
I Seksjoner-katalogen klikker du på cart-template.liquid. Hvis temaet ditt ikke har en cart-template.liquid, klikker du på cart.liquid i Maler-katalogen.
Finn følgende novalidate-attributt i koden til handlekurvskjemaet:
Under Skjemavalidering må du sørge for at innstillingen Aktiver skjemavalidering er aktivert.
Angi alternativer
For å tilpasse alternativene i rullegardinmenyen Hvordan hørte du om oss?, kan du redigere alternativene med temainnstillingene i temaredigeringsprogrammet.
Under Skjemaalternativer kan du legge til eller fjerne alternativer, adskilt med komma.
Klikk på Lagre.
Vanlige spørsmål
Hvor ser jeg opplysningene som innhentes?
Du ser svaret i administrator, i seksjonen Tilleggsopplysninger i bestillingen:
Hvis ingen av de oppførte alternativene er svaret, kan kunden skrive inn noe selv?
Ja, det kan de. Når kunden velger Annet vises en tekstboks, der de kan skrive inn et svar som vil vises under rullegardinmenyen.
Kan jeg vise svaret i varslings-e-postene for nye bestillinger?
Ja. Slik viser du kundesvar i varslings-e-postene for nye bestillinger:
Gå til Varsler-siden i administrator, og legg til følgende kode i e-postmalen Ny bestilling:
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 %}.
Klikk på Lagre.
Finner du ikke svarene du leter etter? Vi er her for å hjelpe deg.
