CPIまるわかりガイド--Online Help

 


マルウェア診断

商品一覧ページのテンプレートHTML

ストアカートでは「大分類一覧ページ」「小分類一覧ページ」「商品一覧ページ」「商品詳細ページ」の4種類の商品関連データ表示用のテンプレートHTMLがあります。(その他にもカゴの中身表示ページやお客様情報入力ページがあります)
ここでは商品一覧ページのテンプレートの作成方法をご説明致します。まず下記の「変数」が変数のままの状態の画面をご覧下さい。


商品一覧ページのテンプレートHTML


クリックすると拡大します。

商品分類一覧ページと作り方はほとんど変わりませんが少し変数が増えます。
では商品一覧ページで使われている変数の役割を説明していきます。

変数について
#shoptitle# これはストアカートに登録されたお店の名称に変換されます。HTML的には<title>#shoptitle#</title>というような記述をします。ページタイトルの部分ですね
#shopbana# これはストアカートに登録されたお店のタイトル画像に変換されて表示されます。
#newcategory# これは現在のページの位置、つまり今どこの商品分類のページを表示しているかが表示されリンクが貼られます。またその左側に大分類一覧 と表示されていますね。これは今いる場所からすぐに大分類一覧ページへ戻れるようにするリンクです。HTMLタグ的には<a href="shop.cgi">大分類一覧</a>このようになっています。
#returnlist#▲上の分類リストに戻る#end# これは現在表示されている分類のひとつ上の階層に戻るためのリンクに変換されて表示されます。
▲上の分類リストに戻るという文字列は変更可能です。
#CHK:Keys#allsch.gif/casch.gif#end# これは商品検索フォームに変換されて表示されます。1画面につき、一つしか使えません。
#headmassage# これは管理画面のページ編集のデザイン簡単編集で登録されたヘッダーメッセージ文章が表示されます。
#footmassage# これは管理画面のページ編集のデザイン簡単編集で登録されたフッダーメッセージ文章が表示されます。
#incart# #num# #price# #/incart# これは現在のカゴの中身の商品の個数と金額を表示します。#num#が個数で#price#が金額になります。個数と金額の変数を #incart# #/incart# で囲むように配置してください。
#chk#買い物カゴの中身をチェック#end# これはカゴの中身ページへのリンクになります。文字列は変更可能です。
#hitnum# #page##backpage##nextpage# この変数は、#hitnum#が商品点数、#page#が商品一覧ページのページ数&指定ページへのダイレクトリンク、#backpage##nextpage#がそれぞれ、前のページへ、次のページへのリンクに変換されて表示されます。
#main# #/main# この変数は他の変数とは少し役割が違います。この変数は登録されているデータの表示に使用するものではありません。上の大分類一覧ページの画像を良く見てください。#main#と#/main#の変数が、商品分類が表示される部分の上下に置かれていますね?この変数は、この変数で囲まれた領域を、登録されているデータの件数分繰り返して表示するという指定を宣言する変数です。ちょっとわかりにくいかもしれませんが、要は繰り返し表示される部分を囲むように上下に置いておく変数ということです。
HTMLタグでいうと、#main#が<table><tr>で、#/main#が</tr></table>と思っていただくといいかもしれません。
#body# #/body# この変数も#main# #/main#と同じような役割をする変数です。#body#と#/body#で囲んでいる領域をご覧下さい。商品分類の表示欄1個を囲んでいます。この変数は#body#〜#/body#の間にデータが入りますよーということを宣言する変数です。上のテンプレートでは1行に2件のデータが表示されるように変数が置かれています。これを1行に1件表示するような形式にしたい場合は、1行に一組の#body#〜#/body#とその間に囲まれたデータ表示領域をレイアウトすればOKです。また逆に、1行に5件のデータを表示したい場合は、5組の#body#〜#/body#とその間に囲まれたデータ表示領域5個をレイアウトしてあげればいいわけです。
#main#と同様、HTMLタグでいうと、#body#が<td>で、#/body#が</td>と思っていただくといいかもしれません。
この部分は少し難しいかもしれないので、実際にテンプレートHTMLを作りながら試してみてください。
※ここから下の変数は#body#〜#/body#で囲まれた中でしか使えません。
#itemphoto# この変数は、登録されている商品の商品一覧用画像ファイルに変換されて表示されます。
また表示される画像は商品詳細へのリンクがつけられます。
#itemname# この変数は、登録されている商品の名前に変換されて表示されます。
また表示される名前は商品詳細へのリンクがつけられます。
#itemurl# この変数は、商品詳細へのリンクURLに変換されます。
例:<a href=#itemurl#>リンク</a>
#newmark# #/newmark# この変数で囲まれた画像又は文字列が、商品登録時にNEWマークを表示するを選択した際に表示されます。NEWなどの画像ファイルを入れると良いでしょう。
例:#newmark#<img src=new.gif>#/newmark#
#itempricename# この変数は、登録されている商品の価格項目名称に変換されて表示されます。
#itemprice# この変数は、登録されている商品の販売価格に変換されて表示されます。
#iteminprice# この変数は、上のサンプル画像や説明では使用されてないですが、登録されている定価に変換されて表示されます。
#CHK:varie# この変数は、登録されている商品のバリエーションの選択肢に変換されて表示されます。
#itemrec#look.gif#end# この変数は、商品詳細ページへのリンクに変換されて表示されます。
#gift#ラッピング#end# この変数は、ラッピング指定のチェックボックスに変換されて表示されます。
#CHK:Quantity# この変数は、注文個数の選択肢に変換されて表示されます。
#itemcoment2list# この変数は、登録されている商品説明文(一覧ページ用)に変換されて表示されます。
#itemgo#sbin.gif/timsaleout.gif#end# この変数は、買い物カゴに入れるボタンに変換されて表示されます。
#itemcoment2list# この変数は、商品一覧用の説明文に変換されて表示されます。


以上の変数が、商品一覧ページを作成するために必要な変数になります。分類ページより掲載する情報が多いので変数が多くなってしまいましたが,基本的には分類ページの作成方法と一緒です。
文字列に変換されて表示されるものは、それぞれフォントの色やサイズの設定、CSSの設定などが可能です。
(例:<font size="4">#categoryname#</font>など)
変数の文字列さえ間違えなければ、あとは自由に場所を変えたりデザインを大幅に変更したり、FLASHムービーやGIFアニメの挿入などが出来ます。またデータ表示部分などは、ショップの雰囲気や運営方針に合わせ、1行につき1件だけの表示にしたり、1行に5件とか6件の表示にしたりも簡単に出来ます。ただこの部分は、#main#〜#/main# #body#〜#/body# の変数の役割を良く理解してチャレンジしてみてください。


Copyright 2024 KDDI Web Communications Inc. All Rights Reserved.