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就能夠顯示導航了。