定期的にお問い合わせがある「カテゴリー✖️グループで商品を絞りこんで一覧表示させたい」というご相談。
もちろん実現することはできるのですが、ショップ様の規模によって対応が変わってきますので、いくつか考え方をご紹介いたします。
前提知識
商品一覧テンプレートで呼び出せる商品情報には、商品が属するカテゴリーやグループに関する情報が含まれていません。
ですので、商品一覧ページのHTMLテンプレート編集ではこのご相談を解決することができません。
解決策1:手間はかかるが最も安価に実現する方法
一番簡単なのは、表示させたい条件(カテゴリー✖️グループ)を、グループページで作成し、商品をそれらグループに紐づけることです。
たとえば、カテゴリーがTシャツ。グループがSサイズであれば、
- Sサイズグループの下に「Tシャツ (Sサイズ)」というグループを作成(同様に他サイズも作成)。
- 一致する商品をすべて「Tシャツ (Sサイズ)」グループに紐づけ。
- Tシャツカテゴリーのフリースペースを使って、Tシャツ(Sサイズ)、Tシャツ(Mサイズ)、、、へのリンクを表示(お手製の絞り込み)
絞り込みを表示する部分はテンプレート編集、またはフリースペース編集で作成すれば期待している動作は実現できます。
絞り込みの数が少ない場合や、予算をかけられない場合はこれで十分ではないかと思っています。
解決策2: 商品情報を非同期ですべて取得する (JavaScript必要)
1ページあたりに表示する商品数がそこまで多くなければ、不足している情報(商品が属しているカテゴリーとグループ)を自力で取得することで、フィルタリングに使えます。
ただし、同時に複数ページにアクセスする必要がある(仮に1ページに20商品表示しているなら20ページにアクセスする)ので、一覧ページの表示に時間がかかったり、ユーザーアクションへの反応が鈍る恐れがあります。
表示遅れはSEO上避けるべき事象ですので、この方法を採用するかどうかは熟考すべきです。
解決策3: カラーミー商品APIを利用したアプリを作る
規模が大きいショップ様になってくるとAPIをつかうのが最善です。
商品APIを通じて自前データベースに商品情報を保存しておき、リクエストを受け取ると必要な情報をかえすアプリを作成します(今回の場合は商品が属するカテゴリーとグループの情報)
商品一覧ページなどにアクセスがあると、アプリから商品情報を取得してフィルタリングや並び替えに使用します。
ショップの規模(商品数、商品グループの総数、訪問客数)によって、最善な方法は異なりますので、お気になられた方はご相談ください。
ご要望が多ければ販売用アプリも検討したいと思います。