สอบถามว่าลูกค้ารู้จักร้านค้าของคุณได้อย่างไร
คุณสามารถสอบถามลูกค้าว่าพวกเขารู้จักร้านค้าของคุณได้อย่างไรโดยการเพิ่มช่องแบบฟอร์ม “คุณรู้จักเราได้อย่างไร” ไปยังหน้าตะกร้าสินค้าของคุณ
สร้างช่องแบบฟอร์ม “คุณรู้จักเราได้อย่างไร”
วิธีสร้างช่องแบบฟอร์ม “คุณรู้จักเราได้อย่างไร”:
ในส่วน Shopify admin ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
จากแอป Shopify ให้แตะ ร้านค้า
ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์
แตะ จัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด
ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
สร้างส่วนย่อย:
ในส่วนย่อย
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>- คลิกที่ “บันทึก”
ใส่ส่วนย่อยในหน้าตะกร้าสินค้าของคุณ
วิธีใส่โค้ดส่วนย่อย “คุณรู้จักเราได้อย่างไร” ไว้ในหน้าตะกร้าสินค้าของคุณ:
ในไดเรกทอรีส่วน ให้คลิก
cart-template.liquidหากธีมของคุณไม่มีcart-template.liquidให้คลิกcart.liquidในไดเรกทอรีเทมเพลตค้นหาแท็กปิด
</form>ภายในโค้ดดังกล่าว ในบรรทัดใหม่เหนือแท็กปิด</form>ให้วางโค้ดต่อไปนี้:
{% render 'hear-about-us' %}- คลิกที่ “บันทึก”
เพิ่มการตั้งค่าธีมเพื่อกําหนดค่า
ในไดเรกทอรี Config ให้คลิกที่
settings_schema.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"
}
]
},- คลิกที่ “บันทึก”
กำหนดให้ต้องเลือกคำตอบในแบบฟอร์ม
คุณสามารถกำหนดให้ลูกค้าต้องเลือกคำตอบในฟิลด์ “คุณรู้จักเราได้อย่างไร” เพื่อป้องกันไม่ให้พวกเขาข้ามไปยังขั้นตอนการชำระเงินโดยไม่ได้เลือกตัวเลือกในฟิลด์ดังกล่าว
ในไดเรกทอรีส่วน ให้คลิก
cart-template.liquidหากธีมของคุณไม่มีcart-template.liquidให้คลิกcart.liquidในไดเรกทอรีเทมเพลตค้นหาแอตทริบิวต์
novalidateในโค้ดแบบฟอร์มตะกร้าสินค้า:
novalidate- แทนที่โค้ด
novalidateด้วยโค้ดต่อไปนี้:
{% unless settings.hau_form_validation %}novalidate{% endunless %}คลิกที่ “บันทึก”
ในตัวแก้ไขธีม ให้คลิกที่ “การตั้งค่าธีม” ในแถบด้านข้าง
คลิกแท็บรู้จักเรา
ในส่วนการตรวจสอบยืนยันแบบฟอร์ม ให้ตรวจสอบว่าได้เปิดใช้การตั้งค่า “เปิดใช้การตรวจสอบยืนยันแบบฟอร์ม” ไว้แล้ว
หมายเหตุ: คุณสามารถปรับเปลี่ยนข้อความแจ้งข้อผิดพลาดที่แสดงได้โดยการแก้ไขการตั้งค่าในฟิลด์ข้อความแจ้งข้อผิดพลาดและข้อความแจ้งข้อผิดพลาดอื่นๆ นอกจากนี้คุณยังสามารถปรับแต่งสีของข้อความแจ้งข้อผิดพลาดได้โดยการเปลี่ยนการตั้งค่าสีในส่วนรูปแบบสำหรับข้อผิดพลาด
ตั้งค่าตัวเลือกของคุณ
หากต้องการปรับแต่งตัวเลือกในเมนูดรอปดาวน์ คุณรู้จักเราได้อย่างไร คุณสามารถแก้ไขตัวเลือกดังกล่าวได้โดยใช้การตั้งค่าธีมภายในตัวแก้ไขธีม
ในตัวแก้ไขธีม ให้คลิกที่ “การตั้งค่าธีม” ในแถบด้านข้าง
คลิกแท็บรู้จักเรา
ในส่วนตัวเลือกแบบฟอร์ม ให้เพิ่มหรือลบตัวเลือกโดยคั่นด้วยเครื่องหมายจุลภาค
คลิกที่ “บันทึก”
หมายเหตุ: ห้ามใส่ตัวเลือก “อื่นๆ” เนื่องจากระบบจะเพิ่มโดยอัตโนมัติ
คำถามที่พบบ่อย
ฉันจะดูข้อมูลที่เก็บรวบรวมมาได้ที่ไหน
คุณจะเห็นคําตอบในส่วนผู้ดูแลระบบ โดยจะอยู่ในส่วนรายละเอียดเพิ่มเติมของคําสั่งซื้อ:
หากไม่มีตัวเลือกคําตอบที่ต้องการ ลูกค้าจะสามารถพิมพ์คําตอบเองได้หรือไม่
ได้ เมื่อลูกค้าเลือก “อื่นๆ” กล่องข้อความที่พวกเขาสามารถพิมพ์คําตอบลงไปได้จะปรากฏขึ้นที่ด้านล่างเมนูดรอปดาวน์
ฉันจะแสดงคําตอบในอีเมลแจ้งเตือนคําสั่งซื้อใหม่ได้หรือไม่
ได้ วิธีแสดงการตอบกลับของลูกค้าในอีเมลแจ้งเตือนคำสั่งซื้อใหม่ของคุณมีดังนี้:
- ไปที่หน้าการแจ้งเตือนของคุณในส่วนผู้ดูแลระบบ แล้วเพิ่มโค้ดต่อไปนี้ไปยังเทมเพลตอีเมล “คำสั่งซื้อใหม่”:
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 %}.- คลิกที่ “บันทึก”