こんにちは！
Nishiです。前回はMagentoのブロック についての記事を書きました。
今回は、Magentoの「ウィジェット」について書いていきたいと思います。
ウィジェット（Widget）とは
ウィジェットは、Magentoのページ内に「特定のコンテンツや機能」を指定の場所へ表示するための仕組みです。
たとえば、「トップページの中央にバナーを表示したい」「サイドバーにおすすめ商品を出したい」といった場合でも、ウィジェットを使えば、コーディング不要で柔軟にコンテンツを挿入できます。
ウィジェットとブロックの違い
混同しやすいのが「ブロック（Block）」との違いです。
ブロック（Block）は、表示する中身です。HTMLや画像、テキストなどで構成されたコンテンツそのものになります。
ウィジェット（Widget）は、その中身をどこに、どの条件で表示するかをコントロールする仕組みです。
言い換えると、ブロックは“コンテンツの素材”で、ウィジェットは“配置ツール”です。
たとえば、1つのブロックを作っておけば、それを複数ページの異なる位置に、ウィジェットを使って繰り返し表示することができます。
さらに、表示条件（たとえば特定のカテゴリページやストアビュー）も細かく指定可能です。
ウィジェットの種類
ウィジェットにはいろいろな種類が用意されています。
以下のウィジェットを使うことで、ページにさまざまなコンテンツを配置できます。
※本記事の手順は、日本語に翻訳されています。
日本語化する方法については、以前の記事「Magento: 日本語に翻訳してみよう」に記載しています。
CMSページリンク
設定したCMSページへのリンクを表示するウィジェットです。
ウィジェットの設置場所、表示テキスト、遷移したいページなどを設定するだけで、リンクテキストを作成できます。
カタログカテゴリリンク
商品カテゴリへのリンクを表示するウィジェットです。
ウィジェットの設置場所、表示テキスト、遷移したいカテゴリなどを設定するだけで、リンクテキストを作成できます。
カタログ商品リスト
指定した条件の商品リストをページに表示するウィジェットです。
ウィジェットの設置場所、表示する商品の条件や件数などを設定するだけで、商品リストを設置できます。
カタログ商品リンク
商品へのリンクを表示するウィジェットです。
ウィジェットの設置場所、表示テキスト、遷移したい商品などを設定するだけで、リンクテキストを作成できます。
新着商品リスト
新商品リストをページに表示するウィジェットです。
表示件数や設置場所などを設定するだけで、新商品リストを設置できます。
また、表示方法では すべての商品 と 新商品 を選択でき、新商品 を選んだ場合は、商品設定の「商品を新しいものから設定する」で指定した期間内の商品だけが表示されます。
最近比較した商品
ユーザーが直近で比較した商品を表示するウィジェットです。
表示件数や表示内容、設置場所などを設定するだけで、ユーザーが比較リストに追加した商品リストを設置できます。
最近閲覧した商品
ユーザーが直近で閲覧した商品を表示するウィジェットです。
表示件数や表示内容、設置場所などを設定するだけで、ユーザーの閲覧履歴に基づいた商品リストを設置できます。
注文と返品
ユーザーが注文内容や返品状況を確認できるウィジェットです。
設置場所等を選択するだけで、会員ユーザーの場合は注文した商品や返品した商品が確認できます。
また、ゲストユーザーの場合は、注文番号とメールアドレスで確認できるフォームが表示され、入力後に注文情報を確認できます。
静的ブロック
既存のブロックを任意のページや位置に表示するウィジェットです。
ウィジェットの設置場所、表示するブロックなどを設定するだけで、ブロックを設置できます。
ウィジェットの作成方法
それでは、実際に管理画面で「ウィジェット」を作成してみましょう。
今回は、以前作成したブロックをウィジェットを使って呼び出し、カテゴリページのフッター上に表示したいと思います。
※ブロックの作成方法については、以前の記事「Magento: ブロックを使ってみよう」に記載しています。
まず、ウィジェット一覧画面を開くには、コンテンツ > ウィジェットをクリックします。
このウィジェット一覧画面で作成済みのウィジェットを管理したり、新しくウィジェットを追加したりできます。
①ウィジェット一覧画面の「ウィジェットを追加」をクリックします。
②種別とデザインテーマを選択。
・種別
ウィジェットの種類を選択します。
今回は以前作成したブロックを使用したいので「静的ブロック」を選択します。
・デザインテーマ
使用するテーマを選択します。
選択が完了したら「続ける」をクリックします。
③基本情報を設定
ウィジェットの基本情報を入力します。
・ウィジェットタイトル
管理画面で識別するための名前です。
・ストアビュー
ウィジェットを表示するストアビューを選択します。
複数ストアを運営している場合は、必要なストアビューのみチェックを入れます。
・表示順
同じ場所に複数のウィジェットを配置したときの表示順を制御します。
数字が小さいものから順に表示されます。
全ての設定が完了したら「レイアウト更新を追加」をクリックします。
④レイアウトを設定
次に、ウィジェットを表示するページと位置を指定します。
・Display on
ウィジェットを表示する対象ページを選択します。
今回はカテゴリページに表示したいので「アンカーカテゴリ」を選択します。
※アンカーカテゴリとは、カテゴリページに絞り込み用のフィルターを表示できる設定のことです。
カテゴリの表示設定でアンカーの有無を切り替えることができます。
アンカーカテゴリを選択すると、さらに以下のレイアウト設定が可能になります。
・Categories
どのカテゴリにウィジェットを表示するかを選択します。
今回はすべてのアンカーカテゴリページに表示したいので「すべて」を選択します。
特定のカテゴリだけに表示したい場合は 「特定のCategories」 を選び、該当するカテゴリを指定します。
・梱包
ページ内のどの領域に配置するかを指定します。
今回はフッターの上に表示したいので「Before Page Footer」を選択します。
全ての設定が完了したら「ウィジェットオプション」をクリックします。
⑤ブロックの選択
次に 「選択ブロック…」 をクリックし、リスト内から表示したいブロックを選択します。
今回のように種別で 「静的ブロック」 を選択している場合は、ここでそのブロックを指定してウィジェットに表示させることができます。
※他の種別を選んだ場合は、設定画面に表示される内容が異なります。
⑥「保存」ボタンをクリックします。
これで、新しいウィジェットが追加されました。
キャッシュクリア後にユーザー画面を確認してみましょう。
作成したウィジェット（ブロック）が各カテゴリページのフッター上に表示されています。
最後に
今回はウィジェットの種類やブロックとの違い、作成方法をご紹介しました。
静的ブロックを使用したウィジェットの作成方法のみを取り上げましたが、
他にも商品リストやリンクテキストなど、さまざまなウィジェットがあります。ぜひ試してみてください。
ウィジェットを活用することで、各ページに一つずつコンテンツを追加する手間を省き、複数のページに任意のコンテンツを配置 できるようになります。これにより、サイト管理や更新がスムーズになります。
