カスタムフィールドを使ったフィルタリング

Metafieldとは

ShopifyのMetafieldは、商品に独自の情報を追加できる機能です。標準では用意されていない「シーズン」「対象スポーツ」「素材タイプ」などの属性を、自由に設定できます。

設定した属性の例

商品の特性に合わせて、以下のような属性を設定しました。

フィルター処理の仕組み

お客様がフィルターを選択すると、その条件がAPIに送信されます。APIは条件を解析し、Shopifyのフィルター形式に変換してデータを取得します。

処理の流れ

1. URLパラメータの解析: お客様が選んだ条件を読み取る
2. 値の正規化: 表記ゆれを統一（「メンズ」「Men」→「Man」）
3. フィルター変換: Shopify APIが理解できる形式に変換
4. データ取得: 条件に合う商品をShopifyから取得

サーバー側とクライアント側の役割分担

すべてのフィルターをサーバー側で処理すると、APIの呼び出し回数が増えてしまいます。そこで、フィルターの種類によって処理する場所を分けています。

サーバー側で処理するフィルター

• 性別、シーズン、カテゴリ、スポーツ種別
• タグによる絞り込み
• 在庫の有無

これらはShopify APIが直接対応しているため、サーバー側で処理することで効率的にデータを取得できます。

クライアント側で処理するフィルター

• サイズ（複数のサイズ体系がある場合）
• 細かい価格帯
• 特定の在庫状態

取得したデータに対して、ブラウザ側で追加のフィルタリングを行います。

表記ゆれへの対応

同じ意味でも、データの登録方法によって表記が異なることがあります。

例：「メンズ」「Men」「Man」「男性」

これらを統一するため、正規化という処理を行っています。どの表記で登録されていても、フィルターが正しく動作するようになります。

構成図

まとめ

Metafieldを活用することで、標準機能では対応できない独自のフィルター項目を追加できます。また、処理の役割分担と表記ゆれ対応により、使いやすく安定したフィルター機能を実現しています。