製品バッジを使用して、製品リスト、製品詳細、ホームページなどの製品カルーセル ウィジェットがある可能性のあるその他のページなどに表示される製品カードに視覚的なインジケーターを適用します。 これらのインジケーター (アイコン、画像、テキスト バッジ) は、顧客が購入を決定する際に役立つ重要な情報を表示します。 たとえば、製品バッジは、製品属性 ('Heavy'や 'Hazardous'」など)、プロモーション (セール中)、または製品ステータス (製造中止) などのその他の理由に使用できます。

このセクションを表示するには、 Admin Console > Marketing > Product Badgingに移動します。

B2B_ProductBadging.png

テーブルを操作する

製品バッジ テーブルを使用すると、利用可能な製品バッジをすばやく確認したり、新しい製品バッジを作成したりできます。 テーブルには、名前、アクティブ化日、非アクティブ化日、並べ替え順序、タグ名の列が表示されます。

• 製品バッジを編集するには、編集アイコンをクリックします。
• 検索とフィルターを使用します。
• 複数のバッジを選択して、削除、製品または属性値の割り当て、または複数のバッジの編集を行います。

バッジを追加する

1. [+ Badge]をクリックします。
2. バッジの名前を入力します。
3. 該当する場合は、アクティブ化または非アクティブ化の日時を設定します。
4. 複数のバッジがある場合にバッジを表示する場所を決定するには、並べ替え順序を設定します。 同じソート順番号を持つバッジはアルファベット順に表示されます。
5. (オプション)タグ名を入力します。 これにより、バッジをグループ化し、Spire CMS で定義されたウィジェットにまとめることができます。
   • バッジにタグを追加すると、商品詳細ページのバッジ ウィジェットに追加されたタグと一致する場合にのみバッジが表示されます。
   • ストアフロントのウィジェットにタグを追加しない場合、バッジは並べ替えの優先順位に基づいて表示されます。
6. 表示場所を使用するかどうかを選択します。
   • Overlay – Onに切り替えると、バッジがメインの製品画像にオーバーレイとして表示されます。
   • Badge Widget – Onに切り替えると、バッジ ウィジェットが表示される場所にバッジが表示されます。
7. バッジのスタイル設定セクションで、バッジのスタイルを設定します。
   • Badge Type – TextとImageから選択します。
     • Text – 製品バッジにテキストを使用する場合は、表示テキスト、テキストの色とバッジの色の 16 進コードを入力し、バッジのスタイルを選択します。
     • Image – バッジに画像を使用する場合は、大きな画像のファイル パスを選択し、 Web ページで画像の読み込みに失敗した場合に表示される画像の代替テキストを入力します。
8. バッジの配置セクションで、バッジの位置を設定します。 大きい画像の配置（上中央や右下など）と大きい画像のテキスト サイズを設定できます。
9. ウィジェット スタイル設定を使用して、ウィジェットのサイズ (大、中、小) を設定します。
10. [Save]をクリックします。

ページで使用される画像サイズの詳細については、[製品画像のアップロードと割り当て]を参照してください。

注記

Classic のアーキテクチャにより、製品バッジは Spire でのみ自動的にサポートされます。 ただし、パートナーはバッジの使用を自由にカスタマイズできます。 製品バッジに関する情報には、Swagger の Products API のバッジオブジェクトを通じて、または返品を直接表示することでアクセスできます。

製品の割り当て

管理コンソールで、ルールを使用して手動で、または属性に基づいて、製品にバッジの割り当てを追加できます。

1. Assign products manually – 割り当てるバッジを選択するか、上記の手順に従ってバッジを作成します。 特定の製品を追加するには、 Products > Assign Products を選択します。 希望する製品の横にあるチェックボックスを選択して、 [Assign]をクリックします。 [Done]をクリックし、 [Save]をクリックします。
2. Use product rules – エディターでバッジにルールを追加するには、 [Product Rules]をクリックします。指示に従って、製品カスタム プロパティまたは製品フィールド タイプルールを作成します。 必要に応じて他のルールまたはルール グループを追加します。[Save]をクリックします。
3. Use product attributes – Product Attributes > Assign Attribute Valuesをクリックし、バッジを割り当てます。目的の値の横にあるチェックボックスを選択して、[Assign]をクリックします。[Done]をクリックし、[Save]をクリックします。

検索インデックスの再構築時に製品バッジを保持する

ジョブを使用して製品バッジを割り当て、検索インデックスを再構築するときに Configured Commerce によってそれらの製品バッジの割り当てが削除されないようにするには、次の手順を実行します。

1. 管理コンソールで、Administration > Job Definitions に移動します。
2. 製品バッジの割り当てに使用するジョブ (たとえば、製品バッジ) を編集し、[Steps]を選択します。
3. 製品バッジを更新するステップを編集します。
4. [Field Mapping]を選択します。
5. [+ Job Step Field Mapping]をクリックし、次のフィールドに入力します。
   • Field Type – 静的値を選択します。
   • Static Value – 1と入力します。
   • To Property – [Manually Assigned]を選択します。
   • Can Overwrite – Yesに切り替えます。
   • Is Dataset Key – Noに切り替えます。
6. [Save]をクリックします。

これで、検索インデックスが再構築されても、このジョブを通じて割り当てられた製品バッジは保持されます。

スパイアウィジェット

管理コンソールのこれらのオプションに加えて、Spire CMS を通じて Web サイトにバッジを追加できます。

製品詳細ウィジェット

製品詳細要素セクションのウィジェットを使用して、製品詳細ページにバッジを追加できます。

ProductBadging_DetailPage.png 

注記 

タグにより、タグのないページではバッジが表示されなくなります。 バッジ コンテナーにはタグを含めることができますが、コンテナーにはタグに一致するバッジのみが含まれます。

• Image Badge – 特定の画像バッジを表示するには、このウィジェットを使用します。
  • Tag – タグの名前を入力し、キーボードの[Enter]キーを押すと、表示されるバッジが絞り込まれます。 このフィールドには複数のタグを入力できます。[Save]をクリックするか、フィールドから移動した場合も、タグは保存されます。
  • Max Badges to Display – 表示するバッジの最大数を設定します。 デフォルトは 8 です。
  • Badges per Row – 行ごとに表示するバッジの数を設定します。 デフォルトは 4 です。
• Text Badge – このウィジェットを使用して、特定のテキスト バッジを表示します。
  • Tag – タグの名前を入力し、キーボードの[Enter]キーを押すと、表示されるバッジが絞り込まれます。 このフィールドには複数のタグを入力できます。[Save]をクリックするか、フィールドから移動した場合もタグは保存されます。
  • Max Badges to Display – 表示するバッジの最大数を設定します。 デフォルトは 8 です。

商品リストカードリストウィジェット

製品リスト カード リスト ウィジェットには、テキスト バッジと画像バッジを表示するためのオプションが含まれています。

ProductBadging_ListPage.png

• Image Badges – 製品に関連付けられたバッジの設定された並べ替え順序に基づいて画像バッジを表示するには、このオプションを選択します。 表示する画像バッジの最大数を設定することもできます。 デフォルトは 4 です。
• Text Badges – 製品に関連付けられたバッジの構成された並べ替え順序に基づいてテキスト バッジを表示するには、このオプションを選択します。 表示するテキストバッジの最大数を設定することもできます。 デフォルトは 4 です。

製品比較カルーセルウィジェット

製品比較カルーセル ウィジェットには、テキスト バッジと画像バッジを表示するためのオプションが含まれています。

• Image Badges – 製品に関連付けられたバッジの設定された並べ替え順序に基づいて画像バッジを表示するには、このオプションを選択します。 表示する画像バッジの最大数を設定することもできます。 デフォルトは 4 です。
• Text Badges – 製品に関連付けられたバッジの構成された並べ替え順序に基づいてテキスト バッジを表示するには、このオプションを選択します。 表示するテキストバッジの最大数を設定することもできます。 デフォルトは 4 です。

マイリストの詳細製品リストウィジェット

マイリスト詳細製品リストウィジェットには、テキストバッジと画像バッジを表示するためのオプションが含まれています。

• Image Badges – 製品に関連付けられたバッジの設定された並べ替え順序に基づいて画像バッジを表示するには、このオプションを選択します。 表示する画像バッジの最大数を設定することもできます。 デフォルトは 4 です。
• Text Badges – 製品に関連付けられたバッジの構成された並べ替え順序に基づいてテキスト バッジを表示するには、このオプションを選択します。 表示するテキストバッジの最大数を設定することもできます。 デフォルトは 4 です。