Liquid、JavaScriptなどに関する質問
【質問】
管理画面ではなくフロント側で商品タイプを利用して、商品タイプ一覧ページ、商品タイプページの作成はできるでしょうか。
具体的には以下のような想定の場合、ショップに登録されている全ての商品タイプを呼び出すことは可能でしょうか。
(別システムの例になってしまいますが、WordPress の get_categories のようなことができるのか?)
▼商品詳細
商品タイプ、コレクション、タグを使って階層のように商品を管理する想定
・商品タイプ →大カテゴリー(例:トップス、ボトム、シューズ...etc)
・コレクション →中カテゴリー(例:ブラウス、Tシャツ、セーター...etc)
・タグ →種別(例:色、サイズ...etc)
▼画面イメージ
商品タイプ一覧ページ
・全ての商品タイプを表示する(例 トップス、ボトムス、シューズ...etc)
・商品タイプがクリックされたら該当の商品タイプページに移動する
商品タイプページ
・商品タイプに紐づくコレクションを表示する(例 ブラウス、Tシャツ、セーター...etc)
▼自動コレクションを利用する案
1.条件を商品タイプにして自動コレクションを作成し、中身が商品タイプになるコレクションを作成する
2.任意のページを作成し、1で作成したコレクションを表示することで商品タイプ一覧ページとする
自動コレクションを利用すれば商品タイプの一覧ページは実現できるかなと考えているのですが、もっと良い実装方法があれば知りたく思い質問させていただきました。
メインの質問と少しずれますが、階層のように分類する時にはこうした方が後からカスタマイズする時に楽だよという分類方法も教えていただけると助かります。
初めて構築するため初歩的な質問になりますが、回答いただけると幸いです。
解決済! ベストソリューションを見る。
成功
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 )
成功
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 )
> ショップに登録されている全ての商品タイプを呼び出す
こちらですが、タイプとタグの複合検索しない前提であれば、collection.all_types オブジェクトを使うことでリンクは作れます。
https://shopify.dev/docs/themes/liquid/reference/objects/collection
分かりやすく階層表示について説明していただきありがとうございます。
タグとコレクションの使い所に迷っていたので大変助かりました。
商品にタグを複数つけてやりたいことに合わせてコレクションを作成したり、絞り込みを行うのがキモになりそうですね。
URLの階層もまさにこのようにしたい!というものでした。URLに入力するだけで一覧ページが生成されるなんて便利ですね。
タグフィルター色々試してみます。
collection.all_types についてもありがとうございます。
単純な商品タイプ一覧が欲しい時にドキュメントを読んで使用してみたいと思います。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024