Shopify開發：如何針對不同語系顯示不同的頁尾選單

在開發多國語系的Shopify網站時，我們常常需要在不同的語系下，顯示不同的頁尾選單。而shopify的預設功能，沒有辦法針對不同語系去指定不同的頁尾選單。因此我們需要修改程式碼來實現多語系的頁尾選單。

如果想要針對不同語系顯示不同的頁尾選單，我們只需要把握判二樣技巧就可以了：

一、判斷語系

二、呼叫自訂選單

如何判斷語系

{% if shop.locale == 'zh-TW' %}
 中文版內容
{% else %}
 非中文版內容
{% endif %}

如何呼叫自訂選單

首先先到管理者後台建立選單，建立方式如下：

登入後台後，選擇 Online Store > Navigation，點擊 Add menu 建立選單。右側Handle的欄位輸入my-footer-link，然後依序建立標題和連結的項目。底下就是呼叫my-footer-link這組選單的範例：

<div id="my-custom-linklist">
<h3>{{ linklists.my-footer-link.title }}</h3>
<ul id="some-id">
{% for link in linklists.my-footer-link.links %}
  <li>
    <a href="{{ link.url }}" {% if link.active %} class="active"{% endif %}>{{ link.title }}</a>
  </li>
{% endfor %}
</ul>
</div>

結合上述二種技巧，我們可以實現多國語言的頁尾選單如下：

首先分別建立不同語系的選單，例如my-footer-link-tw給繁體中文語系使用，my-footer-link給繁體中文以外的語系使用。接著先判斷不同語系，並在不同語系的情況下，透過Handle去呼叫指定的選單：

{% if shop.locale == 'zh-TW' %}
  <div id="my-custom-linklist">
    <h3>{{ linklists.my-footer-link-tw.title }}</h3>
    <ul id="some-id">
    {% for link in linklists.my-footer-link-tw.links %}
      <li>
        <a href="{{ link.url }}" {% if link.active %} class="active"{% endif %}>{{ link.title }}</a>
      </li>
    {% endfor %}
    </ul>
  </div>
{% else %}
  <div id="my-custom-linklist">
    <h3>{{ linklists.my-footer-link.title }}</h3>
    <ul id="some-id">
    {% for link in linklists.my-footer-link.links %}
      <li>
        <a href="{{ link.url }}" {% if link.active %} class="active"{% endif %}>{{ link.title }}</a>
      </li>
    {% endfor %}
    </ul>
  </div>
{% endif %}

以上就是本篇對於Shopify針對不同語系顯示不同頁尾選單的分享，想了解更多Shopify相關知識嗎？那就別忘了追蹤歐斯瑞Facebook粉絲團及IG，也可以訂閱電子報，隨時掌握第一手新知分享，如果有任何問題也歡迎聯絡我們喔！