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