文章彙整

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

Astral WebBy Astral Web 5 months agoNo Comments
首頁  /  技術應用  /  前端開發  /  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,也可以訂閱電子報,隨時掌握第一手新知分享,如果有任何問題也歡迎聯絡我們喔!

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  前端開發Shopify技術應用

留下回應

你的電子郵件地址不會被公開.