ソースの説明

以下のソースのサンプルに倣ってhtml内に記述をお願いいたします。

<div
  class="js-kotohako-item-container"

  data-path="ブランドバッグ"
  data-l="15"
  data-s="1"
  data-sd="0"
  data-is-price-visible="true"
  data-is-random="true"
></div>

パラメータについて

data-path

「ブランドバッグ」「ブランド時計」などの商品カテゴリーを設定します。
指定なしの場合、カテゴリーを指定せずに商品を取得します。

data-l

表示する商品点数です。
指定がない場合は10点表示されます。

data-s
data-sd

ソート条件のパラメータです。以下のように動作します。

セール中の商品のみを対象とする設定、ランダム表示の設定を行なった場合は、無視されます。

data-sの値	data-sdの値	動作
0 または指定なし	0 または指定なし	pathに指定したキーワードに一致する順序になります。
30	1	価格が安い順にソートします。
30	0	価格が高い順にソートします。
1	0	新着順にソートします。

data-is-sale

セール中の商品のみを対象とするかどうかを決めます。trueのときにセール中の商品のみになります。trueに設定した場合は、商品数で指定した数に満たない数しか表示されない場合もあります。
指定なしの場合、true以外の値の場合は指定がないものとして扱います。

data-is-new

新着商品のみを対象とするかどうかを決めます。trueのときに新着商品のみになります。trueに設定した場合は、常に新着順でのソートになります。商品数で指定した数に満たない数しか表示されない場合もあります。
指定なしの場合、true以外の値の場合は指定がないものとして扱います。

data-is-price-visible

価格表示フラグです。trueのときに価格を表示します。
指定なしの場合、true以外の値の場合は非表示になります。

data-is-random

ランダム表示を行なうかどうかを決めます。trueのときにランダム表示になります。ランダム表示にした場合は、指定したキーワードで、新着順に100件分のデータを取得し、その中から商品数で指定した商品数をランダムで表示します。
指定なしの場合、true以外の値の場合はランダム表示を行ないません。

テスト表示ブロック1

カテゴリー	指定なし
商品数	10
ソート	新着順(data-s="1" data-sd="0")
セール中商品のみにするか？	指定なし
新入荷商品のみにするか？	指定なし
価格表示	しない
ランダム表示	しない

テスト表示ブロック2

カテゴリー	ブランド時計
商品数	7
ソート	ランダム表示するため、無視される
セール中商品のみにするか？	指定なし
新入荷商品のみにするか？	する
価格表示	表示しない
ランダム表示	する

テスト表示ブロック3

カテゴリー	ブランドバッグ
商品数	15
ソート	価格が高い順(data-s="30" data-sd="0")
セール中商品のみにするか？	指定なし
新入荷商品のみにするか？	する
価格表示	表示する
ランダム表示	しない

テスト表示ブロック4

カテゴリー	指定なし
商品数	指定なし
ソート	指定なし
セール中商品のみにするか？	する
新入荷商品のみにするか？	指定なし
価格表示	指定なし
ランダム表示	指定なし

テスト表示ブロック5

カテゴリー	指定なし
商品数	指定なし
ソート	指定なし
セール中商品のみにするか？	指定なし
新入荷商品のみにするか？	する
価格表示	指定なし
ランダム表示	する

テスト表示ブロック6

カテゴリー	指定なし
商品数	指定なし
ソート	指定なし
セール中商品のみにするか？	指定なし
新入荷商品のみにするか？	指定なし
価格表示	指定なし
ランダム表示	指定なし