バリエーション・スウォッチ 使用ガイド

主な機能

• 5つの表示タイプ：ラベル、カラー、画像、ドロップダウン、ラジオボタン
• 柔軟な外観設定：形状、サイズ、間隔、配置方向をカスタマイズ可能
• 商品画像連動：バリエーション選択時に対応する商品画像を表示
• JavaScriptイベント：カスタム機能の実装をサポート
• レスポンシブ対応：モバイル・デスクトップ両対応

アクセス方法

管理画面から以下のメニューでプラグインにアクセスできます：

コンテンツ管理 → バリエーション・スウォッチ
├── クラス別スウォッチ設定
└── 商品画像インデックス設定

設定手順

1. 管理画面の「コンテンツ管理」→「バリエーション・スウォッチ」→「クラス別スウォッチ設定」に移動
2. 設定したい規格を見つけて、表示タイプを選択
3. 外観設定（形状、サイズ、間隔、配置方向）を調整
4. 各規格値（カテゴリ）に対して具体的な値を設定
5. 「設定を保存」ボタンをクリック

クラス別スウォッチ設定画面の例

設定項目詳細

動作について

設定手順

1. 商品に複数の画像をアップロード
2. 「コンテンツ管理」→「バリエーション・スウォッチ」→「商品画像インデックス設定」に移動
3. 設定したい商品を選択
4. 各バリエーション組み合わせに画像インデックスまたは画像URLを設定
5. 設定を保存

variationSwatchesSelectionComplete イベント

ユーザーが両方のオプションを選択したときに発火されます。

document.addEventListener('variationSwatchesSelectionComplete', function(event) {
    const data = event.detail;
    console.log('Product ID:', data.productId);
    console.log('Selected Values:', data.selectedValues);
    console.log('Media Index Config:', data.SwatchesMediaIndexConfig);
});

variationSwatchesDeselection イベント

ユーザーが一つまたは両方のオプションを選択解除したときに発火されます。

document.addEventListener('variationSwatchesDeselection', function(event) {
    const data = event.detail;
    console.log('Product ID:', data.productId);
    console.log('Deselection occurred');
});

variationSwatchesSliderChanged イベント

商品詳細ページでスライダーが変更されたときに発火されます。

document.addEventListener('variationSwatchesSliderChanged', function(event) {
    const data = event.detail;
    console.log('Product ID:', data.productId);
    console.log('Media Index:', data.mediaIndex);
    console.log('Swatches Config:', data.SwatchesConfig);
    console.log('Media Index Config:', data.SwatchesMediaIndexConfig);
});

選択された規格に基づく価格更新

// 選択された規格に基づいて価格を更新
document.addEventListener('variationSwatchesSelectionComplete', function(event) {
    const { productId, selectedValues, SwatchesMediaIndexConfig } = event.detail;
    
    // カスタム価格更新ロジック
    updateProductPrice(productId, selectedValues);
});

function updateProductPrice(productId, selectedValues) {
    // 価格計算のロジックを実装
    console.log('価格を更新中...', productId, selectedValues);
}

スウォッチが表示されない

以下の点を確認してください：

• プラグインが有効化されているか
• 規格設定が正しく保存されているか
• 商品画像インデックス設定が正しく保存されているか
• ブラウザのキャッシュをクリアしてください

スウォッチの動作が期待通りでない

以下の点を確認してください：

• クラス別スウォッチ設定で表示タイプが正しく選択されているか
• カラーコードや画像URLが正しい形式で入力されているか
• 商品画像インデックス設定で対応する画像が正しく設定されているか
• JavaScriptエラーが発生していないか

カスタムテンプレートでの動作不良

カスタムテンプレートを使用している場合、以下の点を確認してください：

• 商品詳細ページのform要素が正しく配置されているか
• 商品一覧ページの商品要素のクラス名が変更されていないか