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ä? ‑lomakekentän luominen
Näin luot Mitä kautta kuulit meistä? ‑lomakekentän:
Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
Napauta Shopify-sovelluksessa Kauppa.
Napauta Myyntikanavat-kohdassa Verkkokauppa.
Napauta Hallinnoi teemoja.
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.
Luo koodinpätkä:
Liitä seuraava koodi uudessa koodinpätkässäsi
hear-about-us.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>
- Klikkaa Tallenna.
Koodinpätkän sisällyttäminen ostoskorisivuusi
Mitä kautta kuulit meistä? -koodinpätkän lisääminen ostoskorisivulle:
Klikkaa Osat-hakemistossa kohtaa
cart-template.liquid
. Jos teemassasi ei ole malliacart-template.liquid
, valitse silloin Mallit-hakemistostacart.liquid
.Etsi tämän elementin lopputunniste
</form>
. Liitä seuraava koodi uudelle riville lopputunnisteen</form>
yläpuolelle:
{% render 'hear-about-us' %}
- Klikkaa Tallenna.
Teeman asetusten lisääminen määritystä varten
Klikkaa Asetus-hakemistossa
settings_schema.json
.Etsi koodista ensimmäinen sulkeva kaarisulje koodissa
},
. Liitä seuraava koodi uudelle riville sulkevan kaarisulkeen alle},
:
{
"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"
}
]
},
- Klikkaa 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.
Klikkaa Osat-hakemistossa kohtaa
cart-template.liquid
. Jos teemassasi ei ole malliacart-template.liquid
, valitse silloin Mallit-hakemistostacart.liquid
.Etsi seuraava
novalidate
-määrite ostoskorilomakkeen koodista:
novalidate
- Korvaa
novalidate
-määrite seuraavalla koodilla:
{% unless settings.hau_form_validation %}novalidate{% endunless %}
Klikkaa Tallenna.
Klikkaa teemaeditorin sivupalkissa Teeman asetukset.
Klikkaa Kuule meistä -välilehteä.
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.
Klikkaa teemaeditorissa Teeman asetukset.
Klikkaa Kuule meistä -välilehteä.
Lisää tai poista pilkuilla eroteltuja vaihtoehtoja kohdassa Lomakkeen vaihtoehdot.
Klikkaa Tallenna.
Usein kysyttyä
Missä voin tarkastella kerättyjä tietoja?
Näet vastauksen ylläpitäjässä tilauksen Lisätiedot-osiossa:
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:
- Siirry ylläpitäjän Ilmoitus-sivulle ja lisää seuraava koodi Uusi tilaus -sähköpostimalliin:
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 %}.
- Klikkaa Tallenna.