Zapytaj, skąd klienci dowiedzieli się o Twoim sklepie
Ta strona została wydrukowana dnia Apr 24, 2024. Aby zapoznać się z aktualną wersją, odwiedź https://help.shopify.com/pl/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/ask-how-customers-heard-about-your-store.
Uwaga
Klasyczne szablony nie są dostępne w Sklepie z szablonami. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0 , a darmowe klasyczne szablony Shopify nie są aktualizowane oprócz poprawek bezpieczeństwa.
Uwaga
To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.
Możesz zapytać swoich klientów, skąd dowiedzieli się o Twoim sklepie, dodając pole formularza Skąd się o nas dowiedziałeś(-aś)? do strony koszyka.
Uwaga
To dostosowanie nie będzie działało w przypadku koszyków w stylu szuflady lub wyskakującego okienka, a jedynie dla strony koszyka (adres URL: your-store.com/cart
). Jeśli używasz koszyka w stylu szuflady lub wyskakującego okienka, musisz zmienić styl koszyka na Stronę w edytorze szablonów . Dodaj produkt do koszyka w podglądzie szablonu, a następnie kliknij kartę Strona koszyka w edytorze szablonów, aby wyświetlić ustawienia swojego koszyka.
Utwórz pole formularza „Skąd się o nas dowiedziałeś(-aś)?”
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony .
Znajdź temat, który chcesz edytować, kliknij przycisk ... , aby otworzyć menu czynności, a następnie kliknij Edytuj kod .
W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu .
Utwórz fragment kodu:
Nadaj nazwę fragmentowi kodu hear-about-us
:
Kliknij opcję Utwórz fragment kodu .
W nowym fragmencie kodu hear-about-us.liquid
wklej następujący kod:
<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>
Kliknij opcję Zapisz .
W aplikacji Shopify naciśnij przycisk … .
W sekcji Kanały sprzedaży naciśnij Sklep online .
Naciśnij Zarządzaj szablonami .
Znajdź temat, który chcesz edytować, kliknij przycisk ... , aby otworzyć menu czynności, a następnie kliknij Edytuj kod .
W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu .
Utwórz fragment kodu:
Nadaj nazwę fragmentowi kodu hear-about-us
:
Kliknij opcję Utwórz fragment kodu .
W nowym fragmencie kodu hear-about-us.liquid
wklej następujący kod:
<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>
Kliknij opcję Zapisz .
W aplikacji Shopify naciśnij przycisk … .
W sekcji Kanały sprzedaży naciśnij Sklep online .
Naciśnij Zarządzaj szablonami .
Znajdź temat, który chcesz edytować, kliknij przycisk ... , aby otworzyć menu czynności, a następnie kliknij Edytuj kod .
W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu .
Utwórz fragment kodu:
Nadaj nazwę fragmentowi kodu hear-about-us
:
Kliknij opcję Utwórz fragment kodu .
W nowym fragmencie kodu hear-about-us.liquid
wklej następujący kod:
<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>
Kliknij opcję Zapisz .
Dodaj fragment kodu do strony koszyka Aby dołączyć fragment kodu Skąd się o nas dowiedziałeś(-aś)? na stronie koszyka:
W katalogu Sekcje kliknij cart-template.liquid
. Jeśli Twój szablon nie zawiera cart-template.liquid
, kliknij cart.liquid
w katalogu Szablony .
Znajdź tag zamykający </form>
w kodzie. W nowej linii nad tagiem zamykającym </form>
wklej następujący kod:
{% render 'hear-about-us' %}
Kliknij opcję Zapisz .
Dodaj ustawienia szablonu dla konfiguracji
W katalogu Konfiguracja kliknij settings_schema.json
.
Znajdź pierwszy nawias zamykający },
w kodzie. W nowej linii poniżej nawiasu zamykającego },
wklej następujący kod:
{
"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"
}
]
} ,
Kliknij opcję Zapisz .
Aby uniemożliwić klientom przejście do realizacji zakupu bez wybrania opcji w polu formularza Skąd się o nas dowiedziałeś(-aś)? , możesz ustawić to pole jako wymagane.
W katalogu Sekcje kliknij cart-template.liquid
. Jeśli Twój szablon nie zawiera cart-template.liquid
, kliknij cart.liquid
w katalogu Szablony .
Znajdź następujący atrybut novalidate
w kodzie formularza koszyka:
novalidate
Zastąp atrybut novalidate
następującym kodem:
{% unless settings . hau_form_validation %} novalidate{% endunless %}
Kliknij opcję Zapisz .
W edytorze szablonów kliknij Ustawienia szablonu na pasku bocznym.
Kliknij kartę Dowiedz się o nas .
W sekcji Walidacja formularza upewnij się, że włączone jest ustawienie Włącz walidację formularza .
Uwaga
Możesz dostosować wyświetlane komunikaty o błędach, modyfikując ustawienia pola tekstowego Komunikat o błędzie i Komunikat o błędzie innego pola . Możesz także dostosować kolor błędu, zmieniając ustawienie koloru w obszarze Wygląd błędu .
Ustaw opcje Aby dostosować opcje w rozwijanym menu Skąd się o nas dowiedziałeś(-aś)? , możesz edytować opcje za pomocą ustawień szablonu w edytorze szablonów .
W edytorze szablonów kliknij Ustawienia szablonu .
Kliknij kartę Dowiedz się o nas .
W sekcji Opcje formularza dodaj lub usuń opcje oddzielone przecinkami.
Kliknij opcję Zapisz .
Uwaga
Nie dodawaj opcji Inne , ponieważ zostanie ona dodana automatycznie.
Najczęściej zadawane pytania Gdzie będę widzieć zarejestrowane dane? Odpowiedź zobaczysz w panelu administracyjnym w sekcji Dodatkowe szczegóły zamówienia:
Jeśli odpowiedź nie jest dostępna na liście, czy klient może coś wpisać? Tak, może. Gdy klient wybierze opcję Inne , pole tekstowe, w którym może wpisać odpowiedź, pojawi się pod rozwijanym menu.
Czy mogę wyświetlić odpowiedź w e-mailach z powiadomieniem o nowym zamówieniu? Tak. Aby wyświetlać odpowiedzi klientów w e-mailach z powiadomieniami o nowych zamówieniach:
Przejdź do strony powiadomień w panelu administracyjnym i dodaj następujący kod do szablonu e-maila nowego zamówienia :
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 %} .
Kliknij opcję Zapisz .