統合コマースウィジェット
統合コマースウィジェットは、ショッピングモール（コマースモジュール）の商品をメインページやどのページにでも取り出して展示するウィジェットです。新商品・人気・割引・おすすめ・分類・特集・直接指定の中から基準を決めておけば、商品が変わったときに画面も自動で変わります。ウィジェットページ、レイアウト、掲示板の上部など、ウィジェットを置ける場所ならどこでも使えます。
コマースモジュールがインストールされていて、ショッピングモールのページが 1 つ以上ないと商品は表示されません。
置き方
- ストアから統合コマースウィジェットをインストールします。
- ウィジェットページ（またはレイアウト編集）で、ウィジェット追加 > 統合コマースウィジェットを選びます。
- 行の構成とスロットを決めて保存します。
- カスタム構成の比率：スロットの幅を
:で区切って入力します。例：50:50、60:40、34:33:33、25:25:25:25 - 各スロットの形で、グリッド・横スクロール・リスト・大きいカード・タブを選びます。
- 商品カードを押すと、該当するショッピングモールの商品詳細に移動します。
- スロットのショッピングモールのアドレスを別々にすると、1 行に複数のショッピングモールの商品を一緒に展示できます。
- ダークテーマを使うレイアウトでは、ウィジェットも一緒に暗い色で表示されます。
ウィジェット 1 つが画面の 1 行です。複数行を作るには、ウィジェットを複数置いてください。
行の構成（プリセット）
1 行をどう分けるかを選びます。分けられた 1 マスがスロットで、スロットの順番は左から 1・2・3・4 です。
| 行の構成 | スロット | 基本の形 |
|---|---|---|
| グリッド - 横 4 マス | 1 個 | 商品 4 個を 1 行に並べる |
| グリッド - 横 3 マス | 1 個 | 商品 3 個を 1 行に並べる |
| 横スクロール | 1 個 | 商品 12 個を左右にめくって見る |
| 大きいカード + グリッド | 2 個 | 左に代表商品の大きいカード 1 個、右に 2×2 グリッド |
| グリッド + リスト | 2 個 | 左に 2×2 グリッド、右に縦リスト 5 個 |
| リスト + リスト | 2 個 | 縦リスト 5 個ずつのブロックが 2 つ |
| タブ + グリッド | 2 個 | 左に分類タブ、右に 2×2 グリッド |
| グリッド 3 ブロック | 3 個 | 縦グリッドのブロックが 3 つ |
| カスタム構成 | 最大 4 個 | 下の「カスタム構成」を参照 |
スロット数をデフォルト値より大きく入力すると、その分だけ下に行が増えます。画面が狭くなると、配置は自動で縦並びに切り替わります。
スロットの設定
スロットごとに、何をどう表示するかを決めます。行の構成が使うスロット数の分だけ入力すれば大丈夫です。
| 項目 | 説明 |
|---|---|
| ショッピングモールのアドレス | 商品を取得するショッピングモールの mid。空にすると最初に作ったショッピングモールを使います。スロットごとに別のショッピングモールを指定することもできます |
| タイトル | スロットの上に付くタイトル（例：今週の新商品）。空にするとタイトルなしで商品だけが表示されます |
| 何を取り出すか | 新商品・人気商品・割引商品・おすすめ商品・分類・特集・直接指定 |
| 対象番号 | 分類・特集ならその番号、直接指定なら商品番号をカンマで区切って入力します |
| 件数 | 展示する商品の数。空にすると行の構成のデフォルト値 |
| 形 | カスタム構成のときだけ使います。グリッド・横スクロール・リスト・大きいカード・タブから選択 |
取り出す基準は、コマースの商品情報をそのまま使います。人気は販売数、割引は割引価格が設定された商品、おすすめは商品編集のおすすめ表示です。
カスタム構成
行の構成を「カスタム構成」にすると、比率と形を自由に組めます。
たとえば 60:40 + スロット 1「横スクロール（割引商品）」+ スロット 2「リスト（人気商品）」のように組み合わせます。
共通の表示オプション
| 項目 | 説明 |
|---|---|
| 新商品の表示時間 | 登録後この時間（時間単位）以内なら NEW バッジを付けます。空にすると 72 時間 |
| 価格の表示 | カードに価格を表示するかどうか |
| バッジの表示 | NEW・割引率などのバッジを表示するかどうか |
| 品切れ商品 | 品切れ表示を付けて表示するか、一覧から完全に外します |