Magento Community Edition 1.9.1.0（Enterprise Edition 1.14.1.0も）で追加された新機能「イメージスワッチ」。英語での正式名称は「Configurable Swatch」といいますが、これだとピンと来ないので「イメージスワッチ」と訳しています。

この機能は今までサードパーティ製エクステンションか、独自カスタマイズをしなければ実現できなかった、コンフィグ商品のオプション選択をデフォルトのプルダウン形式からアイコン形式に変更するものです。 

イメージスワッチ

イメージスワッチを使うメリット

イメージスワッチを使うメリットは、何をおいてもその直感性です。
テキストで色や柄の違いを示されても、正直良くわかりません。しかし、カラーサンプルで示されれば、とても良く分かります。

そう、イメージスワッチはコンフィグ商品のバリエーションによる違いをよりわかりやすく、誤解のないように見せる機能です。

イメージスワッチの使い方

イメージスワッチの使い方は簡単です。以下の手順に従って設定をしていくだけで、特別テンプレートをカスタマイズする必要性はありません。（デフォルトのテンプレートに限ります） 

  1. スワッチに使う商品属性を指定し、表示設定を行う
  2. スワッチに使う商品属性のラベルを正しく設定する
  3. スワッチに使う画像をコンフィグ商品の画像としてアップロードする
  4. スワッチに使う画像のラベルを設定する

スワッチに使う商品属性を指定し、表示設定を行う 

最初にスワッチに使う商品属性を指定します。
システム設定画面の「スワッチイメージ」に行くと、設定項目が出てきます。

システム設定

ここでスワッチに使う商品属性を選びます。商品ページは複数選ぶことができますが、商品一覧の左ナビに使えるのは1つだけなので注意してください。
次にスワッチのサイズを指定します。任意に変更できるので、デザインに合わせて変更してください。 

スワッチに使う商品属性のラベルを正しく設定する 

次にスワッチに使いたい商品属性の設定を変更します。
Magentoがスワッチだとみなす条件は、 

  1. イメージスワッチが有効であること
  2. その属性がイメージスワッチの対象であること
  3. その属性が、の管理画面入力形式が「ドロップダウン」であること
  4. その属性のオプションが持っているラベルが適切に設定されていること

です。
既に1と2は設定したので、3と4を確認・調整しましょう。
Magentoのサンプルデータに含まれている、Color属性は、入力形式がドロップダウンなので試すには好都合です。
この属性のオプション設定タブを表示させて、ラベルの値を変えてみましょう。

属性の設定

図ではピンクとブラックのラベルを変更しています。

スワッチに使う画像をコンフィグ商品の画像としてアップロードする 

さて、スワッチに使う画像をアップロードします。
スワッチに使う画像は、必ずコンフィグ商品の画像としてアップロードします。シンプル商品にアップロードしても動かないので注意してください。
この時ファイル名は特に気にする必要はありません。  

スワッチ画像のアップロード

スワッチに使う画像のラベルを設定する

最後にアップロードした画像のラベルを調整します。
イメージスワッチ機能のルールとして、以下の2つのルールがあります。 

  • 「ストアビュー別の属性のラベル名」+「-swatch」はスワッチ用画像として認識
  • 「ストアビュー別の属性のラベル名」はスワッチをクリックした際の切替画像として認識

このルールに基づいて設定を行うと、次のようにフロントエンドでは表示されます。
（注：このエントリではオレンジのカラーにピンクを割り当てていますが、あくまでサンプルなので無視してください） 

ブラックをクリックした時：

ブラック 

ピンクをクリックした時：

ピンク

画像が割り当てられない時のイメージスワッチはどうなるのか？

イメージスワッチは基本的に画像と一緒に使う機能ですが、画像が用意できない場合はどうなるのでしょうか？

答えは簡単です。「そのスワッチだけテキスト表示になる」です。

ですからサイズ等の場合にスワッチ画像が用意できなくても気にすることはありません。
後から少しずつ直していってもOKなのです。 

レイヤーナビゲーションのスワッチイメージの設定

レイヤーナビ、つまりは商品一覧の絞り込み機能でもスワッチイメージを使うことができます。
ただし、商品画面や商品一覧の各商品のところに出てくるスワッチと異なり、レイヤーナビゲーションの場合はやや制約が厳しくなっています。

商品ページや商品一覧の各商品のところに出るスワッチは、画像の名称や画像ファイル名については特に制限はありません。
自由にアップロードできますし、設定することができます。

これに対して、レイヤーナビゲーションの場合は、

 <Magentoインストールディレクトリ> /media/wysiwyg/swatches/<属性のラベル>.png

にというルールに基づいて画像ファイル名を判定し、使用します。
また、商品個別にスワッチを設定しない場合はこのルールに基づいてスワッチ画像を使用します。

ただ、ここの画像を使う場合は日本語ファイル名が使用できません。
当然ながら、属性のデフォルト（要は管理画面用の）ラベルにも日本語が使えません。
この点には十分注意をしてください。 

イメージスワッチの制限

一見便利そうに見えるイメージスワッチですが、制約事項が1つあります。

先ほどのレイヤーナビゲーション用スワッチ画像でも少し触れましたが、商品属性のオプションで管理画面用の値に日本語が使えません。
これは、イメージスワッチ機能が使用するファイル名を判定する処理の途中で、半角英数字（及び一部の記号）以外の文字を排除してしまうからです。
日本語を筆頭としたマルチバイト文字列が入ってきた場合は例外なくこの仕様に引っかかるため、ファイル名が正しく判定できません。
もし、イメージスワッチを使いたい場合は、管理画面の属性のオプションのラベルは英語を使用するほかありません。