新着商品やおすすめ商品等の商品一覧を簡単に作成する [レスポンシブテンプレート用]
2023-04-13 10:48
レスポンシブテンプレート用のFAQです。
HTML5テンプレート(パソコン表示)用はこちらのFAQをご覧ください。
商品一覧を簡単なdivタグだけで表示させることができます。
カテゴリ指定商品一覧、グループ指定商品一覧、新着商品、おすすめ商品、ランキング商品、検索結果商品等を指定して表示させることができます。
ご利用に際して
ajaxを利用した商品一覧は、サーバーとのデータのやり取りが発生します。そのため、トップページで多数の商品一覧を設置した場合、サーバーへの影響が出る可能性がありますので、ご注意ください。
※フリーページに関しては、問題ありません
カテゴリ指定用 htmlタグサンプル
<div class="ajax_item" data-mode="category" data-id="2" data-area="main" data-title="カテゴリTOPSの商品一覧" data-cols="2" data-up-to="5" data-slide="off" data-autoplay="off" data-position="on" data-cnt="12" data-zero-text="0件" data-available="off" data-random="off" data-more="https://cafe-responsive.ocnk.net/product-list/2" data-more-text="もっと見る"></div>
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
| カテゴリ一覧/静止表示/最小列数2列/最大列数5列 | |
| data-mode | categoryを指定。 |
| data-id | カテゴリページのURLをご覧いただき、URL内の数字を指定。 https://cafe-responsive.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-cols | 最小列数：2 |
| data-up-to | 最大列数：5 |
| data-more | もっと見るボタンからのリンク先を指定。 |
| ↓data属性一覧 | |
グループ(特集)指定用 htmlタグサンプル
<div class="ajax_item" data-mode="group" data-id="4" data-area="main" data-title="グループ春夏コレクションの商品一覧" data-cols="2" data-up-to="4" data-sneak="on" data-slide="on" data-autoplay="on" data-position="on" data-cnt="12" data-zero-text="0件" data-available="off" data-random="off" data-more="https://cafe-responsive.ocnk.net/product-group/4" data-more-text="もっと見る"></div>
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
| グループ一覧/スライド表示/最小列数2列/最出し列数4列 | |
| data-mode | groupを指定。 |
| data-id | グループページのURLをご覧いただき、URL内の数字を指定。 https://cafe-responsive.ocnk.net/product-group/4 の場合 data-id="4" |
| data-slide | スライド表示：on |
| data-autoplay | スライド利用時の自動再生 自動再生する：on |
| data-position | スライド送りボタンの位置 スライド左右に乗せて表示 ：on |
| data-area | メインエリア：main |
| data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
| data-cols | 最小列数：2 |
| data-up-to | 最大列数：4 |
| data-sneak | 右端を半分だけ表示：on |
| data-more | もっと見るボタンからのリンク先を指定。 |
| ↓data属性一覧 | |
新着商品用 htmlタグサンプル
<div class="ajax_item" data-mode="new" data-area="main" data-title="新着商品に指定している商品一覧" data-cols="2" data-up-to="3" data-slide="on" data-autoplay="off" data-position="on" data-cnt="12" data-zero-text="0件" data-available="off" data-random="on" data-more="https://cafe-responsive.ocnk.net/new" data-more-text="もっと見る"></div>
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
| 新着商品/スライド表示/最小列数2列/最大列数3列 | |
| data-mode | newを指定。 |
| data-slide | スライド表示：on |
| data-autoplay | スライド利用時の自動再生 自動再生しない：off |
| data-position | スライド送りボタンの位置 スライド左右に乗せて表示 ：on |
| data-area | メインエリア：main |
| data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
| data-cols | 最小列数：2 |
| data-up-to | 最大列数：3 |
| data-more | もっと見るボタンからのリンク先を指定。 |
| ↓data属性一覧 | |
おすすめ商品用 htmlタグサンプル
<div class="ajax_item" data-mode="pickup" data-area="main" data-title="おすすめ商品に指定している商品一覧" data-cols="3" data-up-to="5" data-slide="off" data-autoplay="off" data-position="on" data-cnt="12" data-zero-text="0件" data-available="off" data-random="on" data-more="https://cafe-responsive.ocnk.net/pickup" data-more-text="もっと見る"></div>
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
| おすすめ商品/静止一覧表示/最小列数3列/最大列数5列 | |
| data-mode | pickupを指定。 |
| data-area | メインエリア：main |
| data-slide | スライド表示しない：off ※利用しない場合も未設定値がonのためoffを指定 |
| data-autoplay | スライド利用時の自動再生 自動再生しない：off |
| data-position | スライド送りボタンの位置 スライド左右に乗せて表示 ：on |
| data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
| data-cols | 最小列数：3 |
| data-up-to | 最大列数：5 |
| data-more | もっと見るボタンからのリンク先を指定。 |
| ↓data属性一覧 | |
人気ランキング商品用 htmlタグサンプル
<div class="ajax_item" data-mode="ranking" data-id="1" data-title="ランキング商品に指定している商品一覧" data-cols="3" data-up-to="5" data-disabled-breakpoint-width="840" data-sneak="on" data-slide="on" data-autoplay="off" data-position="on" data-cnt="12" data-zero-text="0件" data-available="off" data-more="https://cafe-responsive.ocnk.net/ranking?unit=1" data-more-text="もっと見る"></div>
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
| 人気ランキング商品/横幅840px以下でスライド表示/最小列数3列/最大列数5列 | |
| data-mode | rankingを指定。 |
| data-id | ランキングページのURLをご覧いただき、URL内の数字を指定。 https://cafe-responsive.ocnk.net/ranking?unit=1 の場合 data-id="1" |
| data-slide | スライド表示：on |
| data-autoplay | スライド利用時の自動再生 自動再生しない：off |
| data-position | スライド送りボタンの位置 スライド左右に乗せて表示 ：on |
| data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
| data-cols | 最小列数：3 |
| data-up-to | 最大列数：5 |
| data-disabled-breakpoint-width | 指定幅以上の場合スライドを無効化し通常のリスト表示 指定幅：840px |
| data-sneak | 右端を半分だけ表示：on |
| data-more | もっと見るボタンからのリンク先を指定。 |
| ↓data属性一覧 | |
最近チェックしたアイテム用 htmlタグサンプル
<div class="ajax_item" data-mode="recently" data-area="main" data-title="最近チェックしたアイテム" data-cols="3" data-up-to="6" data-slide="on" data-autoplay="off" data-reset="on" data-name="on" data-abbr="off" data-position="on" data-cnt="30" data-reset-text="リセット" data-zero-text="0件"></div>
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
※商品名と商品画像のみ表示されます。
| 最近チェックした商品/スライド表示/最小列数5列/最大列数6列 | |
| data-mode | recentlyを指定。 |
| data-area | メインエリア：main |
| data-slide | スライド表示：on |
| data-autoplay | スライド利用時の自動再生 自動再生しない：off |
| data-reset | リセットボタンの表示 表示する ：on |
| data-position | スライド送りボタンの位置 スライド左右に乗せて表示 ：on |
| data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
| data-cols | 最小列数：3 |
| data-up-to | 最大列数：6 |
| data-more | もっと見るボタンからのリンク先を指定。 |
| ↓data属性一覧 | |
カスタム商品一覧(商品IDを指定)用 htmlタグサンプル
<div class="ajax_item" data-title="カスタム商品一覧" data-area="main" data-slide="off" data-autoplay="off" data-position="on" data-cols="3" data-up-to="5" data-name="on" data-abbr="on" data-zero-text="件数: 0件" data-id="1,3,4,6,7"></div>
data属性で表示方法を設定することができます。
下記一覧には、このサンプルで利用している最小限のdata属性となります。
詳細なdata属性については、こちらをご覧ください。
※商品名と商品画像のみ表示されます。価格などを表示させたい場合は、専用のグループを作成し「グループ(特集)指定用」タグを貼り付けてご利用ください。
| カスタム商品一覧/静止一覧表示/最小列数3列/最大列数5列 | |
| data-area | メインエリア：main |
| data-slide | スライド表示しない：off ※利用しない場合も未設定値がonのためoffを指定 |
| data-autoplay | スライド利用時の自動再生 自動再生しない：off |
| data-position | スライド送りボタンの位置 スライド左右に乗せて表示 ：on |
| data-title | 商品一覧の帯タイトルに表示する文言を指定。 |
| data-cols | 最小列数：3 |
| data-up-to | 最大列数：5 |
| data-id | 商品IDを指定：1,3,4,6,7 商品詳細ページのURLをご覧いただき、URL内の数字を指定。 https://cafe-responsive.ocnk.net/product/1 の場合 data-id="1" ※複数指定は、カンマ区切り |
| data-more | もっと見るボタンからのリンク先を指定。 |
| ↓data属性一覧 | |
検索結果用 htmlタグサンプル
[!]フリーページのみ利用可。
※トップページ等で利用した場合、サイト表示が重くなる可能性があります。
<div class="ajax_item" data-mode="search" data-keyword="赤" data-area="main" data-title="検索結果" data-cols="3" data-up-to="5" data-slide="off" data-autoplay="off" data-position="on" data-cnt="12" data-zero-text="0件" data-available="off" data-random="off"></div>
検索した商品を商品一覧として表示できます。
例）赤 ※赤というキーワードで検索した際に表示される商品の一覧を作成できます。
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-cols | 最小列数：3 |
| data-up-to | 最大列数：5 |
| data-more | もっと見るボタンからのリンク先を指定。 |
| ↓data属性一覧 | |
その他オプションについて
並び順指定を適用する
各商品一覧に、商品一覧のソート部分にある並び順を適用できます。例）data-sort="price" を指定すると、カテゴリID1の商品一覧が価格が安い順で表示できます。
deta-modeが、category/group/search/new/pickupの場合に利用可能です。
data-sortの他の属性については、 data属性一覧をご覧ください。
<div class="ajax_item" data-mode="category" data-id="1" data-sort="price" data-area="main" data-title="カテゴリ商品: 安い順" data-cols="3" data-up-to="5" data-slide="off" data-autoplay="of" data-position="bottom" data-cnt="12" data-zero-text="0件" data-available="off" data-random="off"></div>
タイトル下コメントについて
各タイトルと商品一覧の間にコメントを入れることも可能です。ajax_itemが指定されている<div>タグの閉じタグ</div>に続いて、下記のdivタグで囲んでコメントを記載してください。
<div class="ajax_comment_box"> ここにコメントを入れることができます。</div>
<div class="ajax_item" data-mode="new" data-area="main" data-title="新着商品" data-cols="3" data-up-to="5"data-slide="off" data-autoplay="of" data-position="bottom" data-cnt="12" data-zero-text="0件" data-available="off" data-random="on" data-more="https://demo.ocnk.net/new" data-more-text="もっと見る"></div>
<div class="ajax_comment_box"> ここにコメントを入れることができます。</div>
<div class="ajax_comment_box"> ここにコメントを入れることができます。</div>
data属性について
| 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" | |
| 未設定値 |
"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-type | 機能 | 写真のみか説明付きかの表示形式 |
| 値 | "photo" "normal" | |
| 未設定値 |
"photo" | |
| data-cols | 機能 | 商品の最小表示列数 |
| 値 | "2"～"3" | |
| 未設定値 |
"3" | |
| data-up-to | 機能 | 商品の最大表示列数 |
| 値 | "3"〜"6" | |
| 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 | 機能 | 「もっと見る」のリンク先 |
| 値 | "https://〜" | |
| 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-hide-zero | 機能 | 件数が0の場合に、Ajax一覧の枠自体を非表示しないかどうか |
| 値 | "on", "off" | |
| 未設定値 |
"off" | |
| data-disabled-breakpoint-width | 機能 | レスポンシブテンプレでスライドの場合に、指定幅以上の場合にスライドを無効化して、通常のリスト表示にする |
| 値 | "840" | |
| data-sneak | 機能 | レスポンシブテンプレでスライドの場合に、右端を半分だけ表示するかどうか |
| 値 | "on", "off" | |
| 未設定値 |
"off" | |