詢問顧客如何得知您的商店
此頁面列印時間為 Mar 29, 2024。如須最新版本,請至 https://help.shopify.com/zh-TW/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/ask-how-customers-heard-about-your-store。
您可以將「您從何種管道得知我們的商店? 」表單欄位新增至購物車頁面,以詢問顧客從哪裡聽說您的商店。
注意
此自訂程序不適用於導覽匣式或彈出式購物車樣式,且僅適用於購物車頁面 (網址為 your-store.com/cart
)。若您使用購物車導覽匣或彈出式視窗,則必須在佈景主題編輯器 中,將購物車樣式變更為「頁面 」。在佈景主題預覽中,將商品新增至購物車,然後在佈景主題編輯器中點擊「購物車頁面 」分頁,便能檢視您的購物車設定。
建立「您從何種管道得知我們的商店?」表單欄位
在 Shopify 管理介面 中,前往「線上商店 」>「佈景主題 」。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
建立程式碼片段:
將程式碼片段命名為 hear-about-us
。
按一下「建立程式碼片段」 。
在新的程式碼片段 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>
點擊「儲存 」。
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
建立程式碼片段:
將程式碼片段命名為 hear-about-us
。
按一下「建立程式碼片段」 。
在新的程式碼片段 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>
點擊「儲存 」。
在 Shopify 應用程式 中,點選「… 」按鈕。
在銷售管道 畫面上,點一下「線上商店」 。
點一下「管理佈景主題」 。
找到要編輯的佈景主題,按一下「... 」按鈕以開啟動作選單,然後點擊「編輯程式碼 」。
在「程式碼片段」 目錄中,按一下「新增程式碼片段」 。
建立程式碼片段:
將程式碼片段命名為 hear-about-us
。
按一下「建立程式碼片段」 。
在新的程式碼片段 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' %}
點擊「儲存 」。
為配置設定新增佈景主題設定
在組態 目錄中,點擊「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 %} .
點擊「儲存 」。