サイズチャートの選択ロジック

サイズチャート選択の仕組み

商品ページで適切なサイズチャートを表示するには、商品情報からサイズチャートIDを特定する必要があります。このページでは、どのようなロジックでサイズチャートを選択するかを解説します。

入力となるデータ

サイズチャートの選択に使用する商品情報は、Shopifyのメタフィールドから取得します。

優先順位に基づく選択

特殊な商品にも対応できるよう、以下の優先順位でサイズチャートを判定します。

各優先順位の詳細

1. Handle例外（最優先）

特定の商品URL（handle）に専用のサイズチャートを割り当てます。限定モデルやコラボ商品など、通常のマッピングルールに当てはまらない商品に使用します。

使用例：

• 限定レーシングスーツには専用サイズチャート
• コラボ商品のサイズ表記が異なる場合

2. SKU例外

特定のSKUに専用のサイズチャートを割り当てます。同じ商品ファミリー内でも、一部のSKUだけサイズ表記が異なる場合に使用します。

使用例：

• 特定サイズのみ海外規格の商品
• リニューアル後にサイズ体系が変わった商品

3. 通常マッピング

category + productType + gender の組み合わせでサイズチャートを決定します。ほとんどの商品はこのルールで処理されます。

マッピングの例：

4. Unisexフォールバック

指定されたgenderでマッチするサイズチャートがない場合、「unisex」のサイズチャートを探します。自転車用品など、男女共用の商品に対応するためのフォールバックです。

例：

• cycling + jacket + men（なし）→ cycling + jacket + unisex を試す

マッピングなしの場合

どの優先順位でもサイズチャートが見つからない場合、商品ページでは「サイズチャート」ボタンを非表示にします。サイズがない商品（アクセサリー等）ではこの挙動が正しい動作となります。

実装のポイント

フォールバック処理

// 簡略化したロジック
const getSizeChart = async (product) => {
  // 1. Handle例外
  const handleChart = await checkHandleException(product.handle);
  if (handleChart) return handleChart;

  // 2. SKU例外
  const skuChart = await checkSkuException(product.sku);
  if (skuChart) return skuChart;

  // 3. 通常マッピング
  const normalChart = await findByMapping(
    product.category,
    product.productType,
    product.gender
  );
  if (normalChart) return normalChart;

  // 4. Unisexフォールバック
  const unisexChart = await findByMapping(
    product.category,
    product.productType,
    'unisex'
  );
  return unisexChart; // null の可能性あり
};

まとめ

サイズチャートの選択ロジックは、優先順位に基づく段階的な判定により、通常の商品から特殊な商品まで柔軟に対応できる設計になっています。Handle例外とSKU例外により個別対応が可能で、Unisexフォールバックにより共用サイズチャートも活用できます。