よくある質問 - 新着商品やおすすめ商品等の商品一覧を簡単に作成する [HTML5テンプレート用]

ID #1983

新着商品やおすすめ商品等の商品一覧を簡単に作成する [HTML5テンプレート用]

2016-10-19 11:08

HTML5テンプレート(パソコン表示)用のFAQです。
レスポンシブテンプレートはこちらのFAQをご覧ください。

商品一覧を簡単なdivタグだけで表示させることができます。
カテゴリ指定商品一覧、グループ指定商品一覧、新着商品、おすすめ商品、ランキング商品、検索結果商品等を指定して表示させることができます。

表示サンプル
https://cafe0101.ocnk.net/page/4
https://cafe0101.ocnk.net/page/6

ご利用に際して

ajaxを利用した商品一覧は、サーバーとのデータのやり取りが発生します。
そのため、トップページで多数の商品一覧を設置した場合、サーバーへの影響が出る可能性がありますので、ご注意ください。
※フリーページに関しては、問題ありません

カテゴリ｜グループ｜新着｜おすすめ｜ランキング｜最近チェック｜商品指定｜検索結果｜data属性一覧

カテゴリ指定用 htmlタグサンプル

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属性一覧

▲トップへ

グループ(特集)指定用　htmlタグサンプル

グループ一覧/スライド表示/サムネイル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属性一覧

▲トップへ

新着商品用 htmlタグサンプル

新着商品/スライド表示/サムネイル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属性一覧

▲トップへ

おすすめ商品用 htmlタグサンプル

おすすめ商品/静止一覧表示/サムネイル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属性一覧

▲トップへ

人気ランキング商品用 htmlタグサンプル

人気ランキング商品/静止一覧表示/サムネイル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属性一覧

▲トップへ

最近チェックしたアイテム用 htmlタグサンプル

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属性一覧

▲トップへ

カスタム商品一覧(商品IDを指定)用 htmlタグサンプル

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属性一覧

▲トップへ

検索結果用 htmlタグサンプル

[!]フリーページのみ利用可。
※トップページ等で利用した場合、サイト表示が重くなる可能性があります。

検索した商品を商品一覧として表示できます。
例）赤　※赤というキーワードで検索した際に表示される商品の一覧を作成できます。
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_item" data-mode="new" data-area="main" data-title="新着商品" data-img="120" data-cols="4" 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>

▲トップへ

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", "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の場合、リセットボタンのラベル文字指定
data-reset-text	未設定値	"Clear All"
data-random	機能	ランダム表示するかどうか (※ランダム時はブラウザのキャッシュを使用しない)
	値	"on", "off"
	未設定値	"off"
data-available	機能	在庫ありの商品のみ表示するかどうか
	値	"on", "off"
	未設定値	"off"
data-more	機能	「もっと見る」のリンク先
data-more	値	"http://〜"
data-more-text	機能	「もっと見る」リンクの文字指定
data-more-text	未設定値	"View more items"
data-zero-text	機能	件数が0件の場合に表示する文字
data-zero-text	未設定値	"No Items."
data-view	機能	モードがcategoryかgroupの場合、新着/おすすめに該当する商品に絞り込み
data-view	値	"new" (※新着商品絞り込み), "recommend" (※おすすめ商品絞り込み)
data-blank	機能	リンクを別タブ(_blank)で開くかどうか
	値	"on", "off"
	未設定値	"off"
data-sort	機能	モードがcategory/group/search/new/pickupの場合の並び順 (※フリーページのみ利用可、トップページ等は、動作が重くなるため非推奨)
data-sort	値	"featured" (※おすすめ順), "rank" (ランキング順), "price" (※安い順), "price-desc" (※高い順),
data-keyword	機能	モードがsearchの場合の検索文字 (※フリーページのみ利用可、トップページ等は、動作が重くなるため非推奨)
data-fade-in-fade-out	機能	スライド時の画像切り替えをフェードイン・フェードアウトにするか (※1列の場合のみ)
	値	"on", "off"
	未設定値	"off"
data-skip-expansion	機能	次へ/前へボタンのクリック領域を縦領域全体にするかどうか
	値	"on", "off"
	未設定値	"off"
data-skip-padding	機能	次へ/前へボタンのクリック領域を横に広げるpaddingの数値 (※1カラムでdata-skip-expansionが"on"の場合のみ)
	値	"0"～
	未設定値	"30"
data-hide-zero	機能	件数が0の場合に、Ajax一覧の枠自体を非表示しないかどうか
	値	"on", "off"
	未設定値	"off"

▲トップへ