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

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM