商品一覧ページの個別テンプレートHTMLの作成方法と適用方法
HELP TOP > テンプレートHTML > 商品一覧ページの個別テンプレートHTML
  
個別テンプレートHTMLは「小分類一覧ページ」「商品一覧ページ」「商品詳細ページ」の3種類の商品関連データ表示用のテンプレートHTMLの作成・使用が出来ます。
商品一覧ページの個別テンプレートの作成方法と適用方法をご説明致します。
基本的なテンプレートHTMLの作成方法は、標準テンプレートHTMLの作成方法と全く変わりません。
作成した個別テンプレートHTMLの適用方法についてご説明致します。
まず、作成した個別テンプレートHTMLファイルとそのHTMLファイルで利用する画像ファイル等の外部ファイルを、WEBサーバの指定されたフォルダへFTPでアップロードを行います。アップロードするフォルダは下記のフォームの赤枠で囲まれた部分に表示されます。
個別テンプレートHTMLのファイル名は半角英数スペース無しで作成してください。
個別テンプレートHTMLファイルを指定のフォルダへアップロードが完了したら、管理画面へログインし個別テンプレートを適用したい小分類を選択して個別テンプレートファイル名の入力欄に、先ほどアップロードしたファイルのファイル名を入力してください。
入力が終わりましたら、個別テンプレート使用の項目の選択肢を「使用する」に変更してください。
使用するに変更したら、後はこの小分類の登録／更新をしたら適用完了です。この小分類に登録されている商品一覧ページは指定した個別テンプレートHTMLを利用して表示されるようになります。

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

この変数は、商品一覧用の説明文に変換されて表示されます。
#pointmsg#
ポイント対象商品です#/pointmsg#

この変数は、表示された商品がポイント割引対象商品の場合は　#pointmsg#　#/pointmsg#　に囲まれた文字列を表示します。
#footmassage#

この変数は、管理画面のページ編集のデザイン簡単編集で登録されたヘッター部分のコメントが表示されます。
#iteminprice#

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


▲ページトップへ