商品タイプ一覧ページの作成方法について質問

[stm]

【質問】

管理画面ではなくフロント側で商品タイプを利用して、商品タイプ一覧ページ、商品タイプページの作成はできるでしょうか。

具体的には以下のような想定の場合、ショップに登録されている全ての商品タイプを呼び出すことは可能でしょうか。

（別システムの例になってしまいますが、WordPress の get_categories のようなことができるのか？）

▼商品詳細

商品タイプ、コレクション、タグを使って階層のように商品を管理する想定

・商品タイプ　　→大カテゴリー（例：トップス、ボトム、シューズ...etc）

・コレクション　→中カテゴリー（例：ブラウス、Tシャツ、セーター...etc）

・タグ　　　　　→種別（例：色、サイズ...etc）

▼画面イメージ

商品タイプ一覧ページ

・全ての商品タイプを表示する（例　トップス、ボトムス、シューズ...etc）

・商品タイプがクリックされたら該当の商品タイプページに移動する

商品タイプページ

・商品タイプに紐づくコレクションを表示する（例　ブラウス、Tシャツ、セーター...etc）

▼自動コレクションを利用する案

1.条件を商品タイプにして自動コレクションを作成し、中身が商品タイプになるコレクションを作成する

2.任意のページを作成し、1で作成したコレクションを表示することで商品タイプ一覧ページとする

自動コレクションを利用すれば商品タイプの一覧ページは実現できるかなと考えているのですが、もっと良い実装方法があれば知りたく思い質問させていただきました。

メインの質問と少しずれますが、階層のように分類する時にはこうした方が後からカスタマイズする時に楽だよという分類方法も教えていただけると助かります。

初めて構築するため初歩的な質問になりますが、回答いただけると幸いです。

[_osamu_iwasaki_ · Accepted solution]

Liquidだけで全商品を絞り込む方法はありますが、
いずれ規制されるであろうpaginate ... by 50 オブジェクトの
上限を越えて使うことになってしまうため、スピード的にも将来的にもおすすめしません。

おそらくやりたいことは自動コレクションとタグフィルターで実現できるのではないかと思います。

▼商品詳細

・商品タイプ　→大カテゴリー（例：TOPS、BOTTOM、SHOES...etc）
・タグ1　→中カテゴリー（例：BROUSE、TSHIRTS、SWEATER...etc）
・タグ2　→種別（例：BLACK、YELLOW、S、M、L...etc）

▼商品一覧ページ

・コレクションALL　→全ての商品を表示する（例：/collections/all/ ）
・コレクションTOPS　→商品タイプTOPSのみで自動コレクション（例：/collections/tops/ ）
・コレクションBOTTOM　→商品タイプBOTTOMのみで自動コレクション（例：/collections/bottom/ ）

▼商品一覧ページをタグで絞り込み

・コレクションTOPS + 中カテゴリー「BROUSE」
→全ての商品からBROUSEタグのみ表示する（例：/collections/tops/brouse ）

・コレクションTOPS + 中カテゴリー「BROUSE」+色「BLACK」
→全ての商品からBROUSEとBLACKタグを複合で表示する（例：/collections/tops/brouse,black ）

・コレクションTOPS + 中カテゴリー「BROUSE」+色「BLACK」+サイズ「S」
→全ての商品からBROUSEとBLACKとSタグを複合で表示する（例：/collections/tops/brouse,black,s ）

[_osamu_iwasaki_]

> ショップに登録されている全ての商品タイプを呼び出す

こちらですが、タイプとタグの複合検索しない前提であれば、collection.all_types　オブジェクトを使うことでリンクは作れます。

https://shopify.dev/docs/themes/liquid/reference/objects/collection

[stm]

分かりやすく階層表示について説明していただきありがとうございます。

タグとコレクションの使い所に迷っていたので大変助かりました。

商品にタグを複数つけてやりたいことに合わせてコレクションを作成したり、絞り込みを行うのがキモになりそうですね。

URLの階層もまさにこのようにしたい！というものでした。URLに入力するだけで一覧ページが生成されるなんて便利ですね。

タグフィルター色々試してみます。

collection.all_types についてもありがとうございます。

単純な商品タイプ一覧が欲しい時にドキュメントを読んで使用してみたいと思います。