新着商品やおすすめ商品等の商品一覧を簡単に作成する [HTML5テンプレート用]
商品一覧を簡単なdivタグだけで表示させることができます。
カテゴリ指定商品一覧、グループ指定商品一覧、新着商品、おすすめ商品、ランキング商品、検索結果商品等を指定して表示させることができます。
そのため、トップページで多数の商品一覧を設置した場合、サーバーへの影響が出る可能性がありますので、ご注意ください。
※フリーページに関しては、問題ありません
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
カテゴリ一覧/静止表示/サムネイル200px | |
data-mode | categoryを指定。 |
data-id | カテゴリページのURLをご覧いただき、URL内の数字を指定。 https://cafe0101.ocnk.net/product-list/2 の場合 data-id="2" |
data-slide | スライド表示しない:off ※利用しない場合も未設定値がonのためoffを指定 |
data-autoplay | スライド利用時の自動再生 自動再生しない:off |
data-position | スライド送りボタンの位置 スライド左右に乗せて表示 :on |
data-area | メインエリア:main |
data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
data-img | サムネイルのサイズ:200 |
data-cols | 表示列数:3 |
data-more | もっと見るボタンからのリンク先を指定。 |
↓data属性一覧 |
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
グループ一覧/スライド表示/サムネイル200px | |
data-mode | groupを指定。 |
data-id | グループページのURLをご覧いただき、URL内の数字を指定。 https://cafe0101.ocnk.net/product-group/1 の場合 data-id="1" |
data-slide | スライド表示:on |
data-autoplay | スライド利用時の自動再生 自動再生する:on |
data-position | スライド送りボタンの位置 スライド左右に乗せて表示 :on |
data-area | メインエリア:main |
data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
data-img | サムネイルのサイズ:200 |
data-cols | 表示列数:3 |
data-more | もっと見るボタンからのリンク先を指定。 |
↓data属性一覧 |
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
新着商品/スライド表示/サムネイル120px | |
data-mode | newを指定。 |
data-slide | スライド表示:on |
data-autoplay | スライド利用時の自動再生 自動再生しない:off |
data-position | スライド送りボタンの位置 スライド左右に乗せて表示 :on |
data-area | メインエリア:main |
data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
data-img | サムネイルのサイズ:120 |
data-cols | 表示列数:5 |
data-more | もっと見るボタンからのリンク先を指定。 |
↓data属性一覧 |
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
おすすめ商品/静止一覧表示/サムネイル160px | |
data-mode | pickupを指定。 |
data-area | メインエリア:main |
data-slide | スライド表示しない:off ※利用しない場合も未設定値がonのためoffを指定 |
data-autoplay | スライド利用時の自動再生 自動再生しない:off |
data-position | スライド送りボタンの位置 スライド左右に乗せて表示 :on |
data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
data-img | サムネイルのサイズ:160 |
data-cols | 表示列数:4 |
data-more | もっと見るボタンからのリンク先を指定。 |
↓data属性一覧 |
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
人気ランキング商品/静止一覧表示/サムネイル120px | |
data-mode | rankingを指定。 |
data-id | ランキングページのURLをご覧いただき、URL内の数字を指定。 https://cafe0101.ocnk.net/ranking?unit=1 の場合 data-id="1" |
data-slide | スライド表示しない:off ※利用しない場合も未設定値がonのためoffを指定 |
data-autoplay | スライド利用時の自動再生 自動再生しない:off |
data-position | スライド送りボタンの位置 スライド左右に乗せて表示 :on |
data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
data-img | サムネイルのサイズ:160 |
data-cols | 表示列数:4 |
data-more | もっと見るボタンからのリンク先を指定。 |
↓data属性一覧 |
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
※商品名と商品画像のみ表示されます。
最近チェックした商品/スライド表示/サムネイル120px | |
data-mode | recentlyを指定。 |
data-area | メインエリア:main |
data-slide | スライド表示:on |
data-autoplay | スライド利用時の自動再生 自動再生しない:off |
data-reset | リセットボタンの表示 表示する :on |
data-position | スライド送りボタンの位置 スライド左右に乗せて表示 :on |
data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
data-img | サムネイルのサイズ:120 |
data-cols | 表示列数:5 |
data-more | もっと見るボタンからのリンク先を指定。 |
↓data属性一覧 |
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
※商品名と商品画像のみ表示されます。表示させたい場合は、専用のグループを作成し「グループ(特集)指定用」タグを貼り付けてご利用ください。
カスタム商品一覧/スライド表示/サムネイル200px | |
data-area | メインエリア:main |
data-slide | スライド表示:on |
data-autoplay | スライド利用時の自動再生 自動再生する:on |
data-position | スライド送りボタンの位置 スライド左右に乗せて表示 :on |
data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
data-img | サムネイルのサイズ:200 |
data-cols | 表示列数:3 |
data-id | 商品IDを指定:1,3,4,6,7 商品詳細ページのURLをご覧いただき、URL内の数字を指定。 https://cafe0101.ocnk.net/product/1 の場合 data-id="1" ※複数指定は、カンマ区切り |
data-more | もっと見るボタンからのリンク先を指定。 |
↓data属性一覧 |
[!]フリーページのみ利用可。
※トップページ等で利用した場合、サイト表示が重くなる可能性があります。
検索した商品を商品一覧として表示できます。
例)赤 ※赤というキーワードで検索した際に表示される商品の一覧を作成できます。
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
検索結果/静止一覧表示/サムネイル120px | |
data-mode | searchを指定。 |
data-keyword | 検索するキーワードを指定。 |
data-area | メインエリア:main |
data-slide | スライド表示しない:off ※利用しない場合も未設定値がonのためoffを指定 |
data-autoplay | スライド利用時の自動再生 自動再生する:off |
data-position | スライド送りボタンの位置 スライド左右に乗せて表示 :on |
data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
data-img | サムネイルのサイズ:120 |
data-cols | 表示列数:4 |
data-more | もっと見るボタンからのリンク先を指定。 |
↓data属性一覧 |
例)data-sort="price" を指定すると、カテゴリID1の商品一覧が価格が安い順で表示できます。
deta-modeが、category/group/search/new/pickupの場合に利用可能です。
data-sortの他の属性については、 data属性一覧をご覧ください。
ajax_itemが指定されている<div>タグの閉じタグ</div>に続いて、下記のdivタグで囲んでコメントを記載してください。
<div class="ajax_comment_box"> ここにコメントを入れることができます。</div>
<div class="ajax_comment_box"> ここにコメントを入れることができます。</div>
data属性一覧 | ||
data-mode | 機能 | 表示モード |
値 | "custom" (※ID個別指定), "recently" (※最近チェックしたアイテム), "category" (※カテゴリ), "group" (※グループ), "search" (※検索結果), "new" (※新着商品), "pickup" (※おすすめ), "ranking" (※ランキング) |
|
未設定値 |
"custom" | |
data-area | 機能 | 表示カラム |
値 | "main" (※メインエリア), "side" (※サイドエリア), "wide" (※ワイド表示) |
|
未設定値 |
"main" | |
data-title | 機能 | タイトルに表示する文字 (※空の場合、".section_title" の部分からカットされてタイトルなし) |
data-slide | 機能 | スライドにするかどうか |
値 | "on", "off" | |
未設定値 |
"on" | |
data-autoplay | 機能 | スライドを自動再生するかどうか |
値 | "on", "off", "notStop" (※操作しても自動停止しない) | |
未設定値 |
"on" | |
data-position | 機能 | スライド送りボタンの位置 |
値 | "bottom" (※スライド下部に表示), "on" (※スライドの左右に乗せる), "in" (※スライドの内側に入れる), "out" (※スライドの外側に出す) |
|
未設定値 |
"on" | |
data-pointer | 機能 | スライドのポインターを自動生成するかどうか |
値 | "auto"(※必要に応じて自動生成), "off", "CSSセレクタ"(※自作のポインターのCSSセレクタを記載) |
|
未設定値 |
"auto" | |
data-interval | 機能 | スライド自動再生の間隔 |
値 | "3000", "5000", "7000" (※ミリ秒) | |
未設定値 |
"5000" | |
data-duration | 機能 | スライド送り動作の速度 |
値 | "0", "100", "350", "1000", "2000" (※ミリ秒) | |
未設定値 |
"350" | |
data-adjustment | 機能 | スライドで画像の高さを自動的に揃えるかどうか |
値 | "on" (※余白を加えて揃える), "off" (※全て同じ画像サイズの場合), "min" (※最小の高さに合わせる) |
|
未設定値 |
"auto" | |
data-cols | 機能 | 商品の表示列数 |
値 | "1"〜 | |
未設定値 |
"5" | |
data-img | 機能 | 商品画像の幅 |
値 | "120", "160", "200" | |
未設定値 |
"160" | |
data-id | 機能 | categoryモードのカテゴリID / グループモードのグループID /ランキングのページID/customモードのID(カンマ「,」区切り) |
data-cnt | 機能 | 表示件数 |
値 | "1"〜"30" | |
未設定値 |
"30" | |
data-name | 機能 | モードがrecentlyかcustomの場合、商品名を表示するかどうか |
値 | "on", "off" | |
未設定値 |
"on" | |
data-abbr | 機能 | モードがrecentlyかcustomの場合、商品名が折り返す場合に省略表示するかどうか |
値 | "on", "off" | |
未設定値 |
"off" | |
data-reset | 機能 | モードがrecentlyの場合、リセットボタンを表示するかどうか |
値 | "on", "off" | |
未設定値 |
"on" | |
data-reset-text | 機能 | モードがrecentlyの場合、リセットボタンのラベル文字指定 |
未設定値 |
"Clear All" | |
data-random | 機能 | ランダム表示するかどうか (※ランダム時はブラウザのキャッシュを使用しない) |
値 | "on", "off" | |
未設定値 |
"off" | |
data-available | 機能 | 在庫ありの商品のみ表示するかどうか |
値 | "on", "off" | |
未設定値 |
"off" | |
data-more | 機能 | 「もっと見る」のリンク先 |
値 | "http://〜" | |
data-more-text | 機能 | 「もっと見る」リンクの文字指定 |
未設定値 |
"View more items" | |
data-zero-text | 機能 | 件数が0件の場合に表示する文字 |
未設定値 |
"No Items." | |
data-view | 機能 | モードがcategoryかgroupの場合、新着/おすすめに該当する商品に絞り込み |
値 | "new" (※新着商品絞り込み), "recommend" (※おすすめ商品絞り込み) | |
data-blank | 機能 | リンクを別タブ(_blank)で開くかどうか |
値 | "on", "off" | |
未設定値 |
"off" | |
data-sort | 機能 | モードがcategory/group/search/new/pickupの場合の並び順 (※フリーページのみ利用可、トップページ等は、動作が重くなるため非推奨) |
値 | "featured" (※おすすめ順), "rank" (ランキング順), "price" (※安い順), "price-desc" (※高い順), |
|
data-keyword | 機能 | モードがsearchの場合の検索文字 (※フリーページのみ利用可、トップページ等は、動作が重くなるため非推奨) |
data-fade-in-fade-out | 機能 | スライド時の画像切り替えをフェードイン・フェードアウトにするか (※1列の場合のみ) |
値 | "on", "off" | |
未設定値 |
"off" |