這篇完成:建立商店分類,讓商品可以歸類、前台可篩選,並能顯示相關商品。分類可選封面圖與選填圖示,頁面可插入自動同步的分類卡片或三欄分類首屏。
商品要勾分類,見 如何上架商品 的「商品分類」欄。
前台商店 /shop 左側會依上層/子層顯示可收合分類選單。點主分類會列出該類與底下子分類的已發布商品。頁首/頁尾/按鈕若要直接跳到某分類,在連結目標選 電商 → 商品分類。
側欄同層收合預設為手風琴(同時只開一個);若要同時展開多個,到 商店設定 → 列表 開啟 允許多個收合分類展開。
前提
- 已開電商。
- 擁有者或編輯者可改;檢視者唯讀。
路徑
側欄 電商 → 商品分類(/admin/commerce/categories)。
頁面標題「商品分類」。右上可回到商品列表。
新增一個分類
- 在頁面上方的 新增分類 區塊填寫下表後按 新增。成功時提示「已新增分類」,表單會清空,可立刻再新增下一筆(不必先儲存底部列)。
| 欄位 | 必填 | 說明 |
|---|---|---|
| 名稱 | 是 | 後台與前台顯示名稱。多語站台可另填其他語言名稱。 |
| Slug | 是 | 網址用,建議小寫英文與連字號,例如 business-card。同一站不可重複。 |
| 上層 | 選填 | 預設「(無上層)」=第一層。可選另一個分類當父層,做成樹狀。 |
| 封面圖 | 選填 | 從圖庫上傳或挑選。沒有封面時前台卡片仍會顯示分類名稱。 |
| 圖示 | 選填 | 從圖示庫挑選,與封面圖分開。用在「商品分類首屏」左欄,不是商店側欄縮圖。 |
新分類會自動排在列表最後;排序請用拖曳,不要填數字。
改名稱、slug、上層、封面
已存在的列可直接改名稱、slug、上層、封面與圖示。改完按底部 儲存(提示「已儲存分類」)。底部列只負責這些欄位的草稿,新增/刪除/複製/拖曳排序會立刻生效。
列表可複製該分類的前台商店篩選連結。
拖曳排序
按住列左側的拖曳把手上下移動。放開後會自動同步順序(畫面可能短暫顯示「正在同步排序…」)。不必按底部儲存。
複製分類
該列紫色複製圖示會建立「原名(複製)」與唯一 slug(-copy 系列),並帶入多語名稱、上層、封面圖與圖示。
套到商品
- 到 商品管理 編輯商品。
- 基本 分頁選 商品分類。
- 儲存/發布。
未分類在列表會顯示「(未分類)」。商品編輯可複選多個分類(checkbox);未勾選=未分類。開啟「顯示相關商品」時,會推薦與本商品任一相同分類的其他已發布商品。
放到頁面上(分類卡片)
若要在首頁或任意頁自動列出分類(分類一改,格子跟著改):
- 開啟該頁的 全螢幕頁面編輯器。
- 區塊庫加入 商品分類(不是「商品列表」)。
- 預設只顯示主分類;區塊設定「顯示範圍」可改成僅子分類(有上層的分類,含更深層)或全部(含子分類)。
- 區塊設定可選分頁方式(不分頁/載入更多/頁碼)與每頁筆數(最多 24)。不分頁時只顯示固定筆數。
- 訪客點卡片會進
/shop?category=該 slug。
沒有封面時卡片仍顯示名稱。商店側欄不會出現這些封面縮圖。
若只要固定幾張行銷磁磚、不必跟著分類樹自動變,可用「圖片服務卡」並把連結指到商品分類。
放到頁面上(分類首屏)
若要在首頁做「左分類、中輪播、右連結」的商店導覽:
- 開啟該頁的 全螢幕頁面編輯器。
- 區塊庫加入 商品分類首屏(不是「商品分類」卡片網格)。
- 上傳中欄輪播圖;右側可改快捷連結(例如會員登入、LINE)。
- 左欄會自動帶出有已發布商品的主分類與子分類(全部展開)。請在商品分類頁為各分類選 圖示(可選)。
- 電腦把滑鼠移到左欄分類上,中間會依子分類分列顯示商品名稱(用
|隔開)。點商品名進單品頁;點分類列進該分類商店。手機沒有懸停預覽,點分類會直接進商店。
刪除分類
- 該列按 刪除,確認「確定要刪除「某名稱」?」。
- 若提示請先移除或移動子分類,先把子層改成無上層或刪子層。
- 仍有商品掛在此分類時,建議先到商品改選其他分類(或清空)再刪;刪除後商品會變成未分類。
刪除無法從本頁復原。
怎麼驗
- 分類列表名稱、slug、上層、封面正確;拖曳後前台商店分類順序跟著變。
- 商品編輯的分類 checkbox 看得到新分類,且可複選。
- 前台商店左側分類可收合;選主分類會出現該類與子分類的已發布商品。選子分類只出現該子類。
- 頁首選單選「電商 → 商品分類」可跳到
/shop?category=該 slug。 - 頁面插入「商品分類」區塊後,卡片連到對應商店篩選;沒封面仍看得到名稱。
- 區塊開「載入更多」或「頁碼」後,前台可換頁;重新整理仍停在同一頁。
- 分類列可選圖示。插入「商品分類首屏」後,左欄會展開子分類;電腦懸停左欄會依子分類列出商品名,點名稱進單品頁;手機點分類直接進商店。
常見卡住
| 狀況 | 怎麼辦 |
|---|---|
| 「請填寫名稱與 slug」 | 兩欄都要有值。 |
| 「已有相同 slug」 | 換一個網址片段。 |
| 「上層分類不可為自己」 | 不要把自己設成自己的上層。 |
| 刪不掉 | 先處理子分類。 |
| 離開頁面跳出未儲存提示 | 代表你改了名稱/slug/上層但還沒按底部儲存。新增分類本身不會觸發此提示。 |