詢問顧客如何得知您的商店

注意

Shopify 佈景主題商店不提供舊版佈景主題。這些主題不含 Shopify Online Store 2.0 佈景主題的功能，只能接收安全性修復的相關更新。

備註

若您使用的是 Shopify 提供的免費佈景主題，您或許就能聯絡 Shopify 支援服務，取得有關本教學課程的協助。需耗時 15 分鐘的設計時間。如要深入瞭解，請參閱 佈景主題支援服務.

備註

此自訂內容僅適用於舊版 Shopify 佈景主題，且不適用於 Online Store 2.0 佈景主題。

• 瞭解您佈景主題的架構版本
• 探索 Online Store 2.0 佈景主題的自訂內容

您可以將「您從何種管道得知我們的商店？」表單欄位新增至購物車頁面，以詢問顧客從哪裡聽說您的商店。

注意

此自訂程序不適用於導覽匣式或彈出式購物車樣式，且僅適用於購物車頁面 (網址為 your-store.com/cart)。若您使用購物車導覽匣或彈出式視窗，則必須在佈景主題編輯器中，將購物車樣式變更為「頁面」。在佈景主題預覽中，將產品新增至購物車，然後在佈景主題編輯器中點擊「購物車頁面」分頁，便能檢視您的購物車設定。

建立「您從何種管道得知我們的商店？」表單欄位

建立「您從何種管道得知我們的商店？」表單欄位：

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

1. 在「程式碼片段」目錄中，按一下「新增程式碼片段」。

2. 建立程式碼片段：

3. 在新的程式碼片段 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>

1. 點擊「儲存」。

在購物車頁面中包含程式碼片段

若要在您的購物車頁面中加入「您從何種管道得知我們的商店？」程式碼片段：

1. 在「區段」目錄中，點擊「cart-template.liquid」。如果您的佈景主題不包含「cart-template.liquid」，則可以在「範本」目錄中，點擊「cart.liquid」。

2. 找到程式碼中的結束標籤 </form>。在結束標籤 </form> 上方新的一行，貼上下列程式碼：

{% render 'hear-about-us' %}

1. 點擊「儲存」。

為配置設定新增佈景主題設定

1. 在組態目錄中，點擊「settings_schema.json」。

2. 在程式碼中尋找第一個右大括號「},」。在右大括號「},」下方新的一行貼上以下程式碼：

{
"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"
    }
]
},

1. 點擊「儲存」。

將表單欄位設為必填

若您想避免顧客未在「您從何種管道得知我們的商店？」表單欄位中選取選項就進入結帳頁面，可以將該欄位設為必填。

1. 在「區段」目錄中，點擊「cart-template.liquid」。如果您的佈景主題不包含「cart-template.liquid」，則可以在「範本」目錄中，點擊「cart.liquid」。

2. 在購物車表單程式碼中尋找下列「novalidate」屬性：

novalidate

1. 用以下程式碼取代「novalidate」屬性：

{% unless settings.hau_form_validation %}novalidate{% endunless %}

1. 點擊「儲存」。

2. 在佈景主題編輯器中，點擊側邊欄的「佈景主題設定」。

3. 點擊「得知我們的商店」分頁。

4. 在「表單驗證」下，確認已啟用「啟用表單驗證」設定。

備註

您可以修改「錯誤訊息」和「其他欄位錯誤訊息」的文字欄位設定，藉此自訂畫面顯示的錯誤訊息。您也可以變更「錯誤樣式」的「顏色」設定，以自訂錯誤訊息的顏色。

設定您的選項

如果您要自訂「您從何種管道得知我們的商店？」下拉式選單中的選項，可以使用佈景主題編輯器中的佈景主題設定來編輯選項。

1. 在佈景主題編輯器中，點擊「佈景主題設定」。

2. 點擊「得知我們的商店」分頁。

3. 在「表單選項」下新增或移除選項，並以逗號分隔各選項。

4. 點擊「儲存」。

備註

請勿加入「其他」選項，因為系統會自動新增此選項。

常見問題

我可以在何處查看擷取的資料？

您可以在管理介面找到訂單，然後從訂單的「其他詳細資訊」區段中看到答案：

如果顧客在選項清單中找不到答案，可自行輸入內容嗎？

可以。如果顧客選取「其他」，在下拉式選單的下方會出現一個可供輸入答案的文字方塊

我可以在新訂單通知電子郵件中顯示答案嗎？

可以。若要在新訂單通知電子郵件中顯示顧客回應內容，請執行以下操作：

1. 前往管理介面中的「通知」頁面，並在「新訂單」電子郵件範本新增以下程式碼：

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 %}.

1. 點擊「儲存」。