EC-CUBE 4.2 / 4.3 対応 公式マニュアル

商品スペック比較プラグイン

2〜4商品を並べて技術仕様・性能・寸法・価格をひと目で対照比較できるEC-CUBE専用の比較ソリューション。 画面下部の常駐フローティングトレイ、相違点のみを表示する差異ハイライト、比較URL共有、柔軟なカテゴリ別スペック項目定義を備え、顧客の迷いを解消し購入率を最大化します。

1. プラグイン概要と主な特長

『商品スペック比較プラグイン（CubeProductCompare）』は、家電・PC機器・アパレル・家具・コスメなど、スペックや仕様の違いが購入の決定打となるショップに最適な拡張プラグインです。 お客様が複数商品を直感的に比較できるフロントエンドUIと、管理者が自由に属性をカスタマイズできるバックエンド機能をワンパッケージで提供します。

常駐フローティングトレイ

画面下部に固定配置される比較トレイ。商品一覧や詳細画面から選んだ商品を即座にプールし、現在の選択件数を可視化します。

差異ハイライト & 相違点トグル

「相違点のみ表示」スイッチをONにすると、値が一致する項目を非表示にし、商品ごとの決定的な違いだけに絞り込んで比較できます。

比較結果のURL共有 & 印刷最適化

固有の比較URL（?ids=1,2,3）をワンクリックでコピー。友人・家族への相談、SNSシェア、A4プリント印刷に対応。

柔軟な入力形式 & 単位サポート

テキスト・数値・セレクトボックス・真偽値（あり/なし）の4タイプに対応。mm, kg, mAh, インチ等の単位も自動連結表示。

カテゴリ連動スペック表示

「全カテゴリ共通」のほか、「スマートフォン」「衣料品」など特定カテゴリに限定したスペックグループの設計が可能です。

クイック商品検索モーダル

比較画面の空き枠から直接商品名や商品コードで検索し、ページ遷移することなくその場で比較対象商品を追加できます。

2. インストール・有効化手順

1. 管理画面からのインストール

1
プラグインのアップロード

EC-CUBE管理画面 設定 ＞ システム設定 ＞ プラグイン一覧 を開き、「新規追加」ボタンから CubeProductCompare.tar.gz をアップロードします。

2
プラグインの有効化

一覧に追加された「CubeProductCompare」の右側にある「有効化」をクリックします（必要なテーブルおよび初期スペックデータが自動生成されます）。

3
管理メニューの確認

左側ナビゲーションに 「商品比較」（アイコン: 天秤 fa-balance-scale）が追加され、「仕様・スペック管理」および「基本設定」が表示されていることを確認します。

2. CLI（コンソールコマンド）からのインストール

# プラグインのインストール
$ bin/console eccube:plugin:install --code=CubeProductCompare

# プラグインの有効化
$ bin/console eccube:plugin:enable --code=CubeProductCompare

# キャッシュのクリア
$ bin/console cache:clear --no-warmup

3. プラグイン基本設定

EC-CUBE管理画面メニュー 商品比較 ＞ 基本設定（または 設定 ＞ プラグイン一覧 ＞ CubeProductCompare「設定」）からショップ運用に応じた動作を設定できます。

設定項目 選択肢 / 初期値 説明・機能詳細
同時比較可能な最大商品数 2件 / 3件 / 4件（推奨） お客様が同時に比較できる最大商品数を設定します。PC/スマホ表示のバランスから「4件」を推奨しています。
同一カテゴリーの商品のみ比較可能にする 有効 / 任意 有効にすると、同一カテゴリーに属する商品同士のみ比較を許可します（例: スマートフォンと靴といった異なるジャンル同士の誤比較を防止）。
商品一覧ページに比較ボタンを表示する 有効 / 任意 商品一覧（カテゴリー一覧、キーワード検索結果、新着ブロック等）の各商品カードに「比較に追加」ボタン（天秤アイコン）を表示します。
商品詳細ページに比較ボタンを表示する 有効 / 任意 商品詳細ページの「カートに入れる」ボタン付近に「比較リストに追加」ボタンを表示します。
画面下部に比較フローティングバーを表示する 有効 / 任意 画面最下部に固定表示される比較トレイを有効化します。選択中の商品サムネイル、件数、一括クリア、比較画面への遷移ボタンを提供します。
比較結果のURL共有を許可する 有効 / 任意 比較画面に「共有」ボタンを表示し、選択中の商品組み合わせURLをクリップボードにコピーして他者とシェアできるようにします。

4. スペックグループ・項目の管理

EC-CUBE管理画面 商品比較 ＞ 仕様・スペック管理 より、比較テーブルに並べる項目（属性）と見出し（グループ）を直感的に作成・整理できます。

💡 初期データの自動生成
プラグイン有効化時に、「基本性能・仕様」「寸法・重量」「保証・その他」といった汎用スペックグループおよび代表的な項目が自動生成されます。初期データをそのまま活用または貴店の商品に合わせてリネーム・追加してお使いいただけます。

1. スペックグループの作成・編集

「新規グループ登録」ボタンから、比較表のセクション見出しとなるグループを作成します。

設定項目 必須 / 任意 内容・設定例
スペックグループ名 必須 見出しとして表示される名称（例: ディスプレイ, バッテリー性能, 素材・寸法, 保証内容）。
適用カテゴリー 任意 特定のカテゴリーにのみ表示したい場合に選択します（「全カテゴリー共通」を選ぶと全商品で共通表示されます）。
表示順 任意 比較画面での並び順（昇順）。数字が小さいグループほど上に表示されます。

2. グループ内への属性項目の追加

各グループ右側の「項目追加」ボタンをクリックして、比較行となる具体的なスペック項目を登録します。

設定項目 必須 / 任意 内容・設定例
スペック項目名 必須 項目の名称（例: 画面解像度, 重量, バッテリー容量, Bluetooth規格）。
単位 任意 値の後ろに自動付与される単位（例: mm, g, mAh, W, インチ, GB）。
入力形式 必須 商品登録画面での入力方法を指定します（下記の4種類から選択）。
選択肢一覧 条件付 入力形式で「セレクトボックス」を選んだ場合、候補をカンマ「,」区切りで指定（例: アルミニウム, ステンレス, チタン）。
表示順 任意 グループ内での並び順（昇順）。

入力形式の種類と特徴

テキスト

自由記述の文字列。規格名や複合的なスペック表現に最適です（例: 「OLED, 120Hzリフレッシュレート」）。

数値

半角数値。単位設定と連動し、きれいにフォーマットされて比較表に出力されます（例: 「4500」＋「mAh」）。

セレクトボックス

事前定義した選択肢からプルダウンで選択。商品管理者の入力ブレや表記揺れを完全に防ぎます。

真偽値

「あり / なし」の2択。比較表では「あり」またはハイフン「—」として明快に対比表示されます。

5. 商品管理でのスペック値入力

スペック項目を登録すると、EC-CUBE標準の 商品管理 ＞ 商品登録・編集 画面内に 「スペック仕様（商品比較用）」 カードが自動的に拡張されます。

1
商品のカテゴリーを選択

商品編集画面上部で商品が属するカテゴリーを選択します。選択されたカテゴリーに応じて、該当するスペックグループが画面下部に自動展開されます。

2
スペック値の入力

テキスト入力、数値入力、プルダウン選択、チェックボックスなど、定義された形式に従ってスペック値を入力します。

3
登録・保存

画面下部の「登録」ボタンをクリックして通常通り商品を保存します。スペック値も同時にデータベースへ安全に保管されます。

⚠️ 空欄項目の取り扱い
未入力のスペック項目は、フロントの比較表上では「—（ハイフン）」として表示されます。重要なスペックはできるだけ漏れなく入力いただくことで、より見栄えの良い比較表になります。

6. フロントエンドでの比較体験

ショップを訪れたお客様は、直感的な操作で比較リストに商品を追加し、シームレスにスペック比較表を閲覧できます。

フロントエンドの主要アクション

1. 比較に追加する

一覧画面のカード右上にある「天秤アイコン」や、商品詳細画面の「比較に追加」ボタンをクリックすると即座にトレイに追加されます。

2. フローティングバーで確認

画面最下部のバーに選択中の商品サムネイルがプールされ、「あと○件追加可能」などの状況がリアルタイムに伝わります。

3. 比較画面へ進む

2点以上選択すると「今すぐ比較する」ボタンがアクティブになり、専用比較ページ（/product/compare）へ遷移します。

4. 空き枠からクイック追加

最大件数に達していない枠には「商品を追加」ボタンがあり、モーダル検索からその場で商品を選んで追加できます。

5. 相違点のみ表示モード

「相違点のみ表示」トグルスイッチを切り替えることで、スペック値が同一の行を非表示にして差異だけに注目できます。

6. カートイン・詳細へ誘導

比較表の上部カードから、気に入った商品の詳細ページへ直接遷移したり、スムーズに購入へ進むことができます。

比較ページのURL共有と印刷機能

比較画面上部には便利なアクションボタンが用意されています。

  • URL共有（シェア）： https://example.com/product/compare?ids=12,34,56 のような固有URLを1クリックでコピーできます。メールやLINEで知人に共有しても、同じ商品の比較状態がそのまま再現されます。
  • 印刷最適化（A4プリント）： ブラウザの印刷機能と連動し、不要なヘッダーやボタンを隠してA4横向きに最適化された美しい比較表を出力できます。

7. よくある質問・トラブルシューティング

Q. 一覧画面や詳細画面に比較ボタンが表示されません
管理画面 商品比較 ＞ 基本設定 を開き、「商品一覧ページに比較ボタンを表示する」「商品詳細ページに比較ボタンを表示する」にチェックが入っているかご確認ください。設定変更後は bin/console cache:clear（または管理画面のキャッシュクリア）をお試しください。
Q. 異なるカテゴリーの商品同士を比較させたい
管理画面 商品比較 ＞ 基本設定 の「同一カテゴリーの商品のみ比較可能にする」のチェックを外し、無効にして保存してください。これにより全商品間で自由に比較が可能になります。
Q. 比較表の最大商品数を5件以上に増やすことはできますか？
一般的なPCディスプレイおよびスマートフォンの横幅・可読性を考慮し、標準では最大4件までに制限しております。これ以上の件数は画面の見やすさを損なうため推奨しておりません。
Q. プラグインを無効化・アンインストールした場合、商品データは影響を受けますか？
いいえ。標準のEC-CUBE商品データ（dtb_product）本体には一切影響しません。プラグイン独自のスペック管理用テーブルおよび設定テーブルのみが管理対象となります。