1. 程式人生 > 其它 >shopify 側邊欄新增自定義導航

shopify 側邊欄新增自定義導航

  像shopify主題的產品分類頁,一般都會有一個側邊欄,這個側邊欄主要是一個過濾器,通過標籤來導航到各個對應的頁面。一般這個過濾器有兩種模式,一個是直接將所有的標籤顯示,另一種是顯示標籤組。使用標籤組來顯示比較有條理,客戶看著也比較舒服。

  標籤組的實現據我現在看到的也有兩種設定方式。一種是在主題自定義裡,產品系列頁面會有設定的地方,可以設定想要顯示的標籤列表。另一種是在後臺產品里根據命名方式來設定標籤組。各個主題的設定方式都不一樣,如果需要設定的話,可以根據他們的文件的說明來進行設定。

  在這裡,因為各種原因,我不在側邊欄使用標籤過濾器,而是通過新增導航的方式。只要在後臺新增對應的collection,然後新增導航。在這裡的側邊欄就可以導航到對應的產品分類了。

  首先,開啟shopify的編輯程式碼頁面,找到collection.liquid檔案裡側邊欄的程式碼位置,如果有些主題沒有側邊欄的,可以自行新增一下。以下為我新增的大概程式碼:
{%- if section.blocks.size > 0 -%}

{%- for block in section.blocks -%}

{% assign linklist = linklists[block.settings.sidebar_link] %}

{%- for link in lisklist.links -%}

<a href="{{ link.url }}">{{ link.title }}</a>

{%- endfor -%}

{%- endfor -%}

{%- endif -%}

{% schema %}

............

"blocks":[

"type":"sidebar",

"name":"sidebar",

settings:[

{

"type":"header",

"content":"Sidebar nav"

},

{

"type":"linklists",

"id":"sidebar_link",

"label":"sidebar link"

]  

]

{% endschema %}

這幾段純靠記憶寫的,應該差不多是這個樣子。最後,在後臺新增一個block就能夠顯示導航了。