大分類一覧ページのテンプレートHTML
HELP TOP > テンプレートHTML > 大分類一覧ページのテンプレートHTML
  
ストアカートBASICでは「大分類一覧ページ」「小分類一覧ページ」「商品一覧ページ」「商品詳細ページ」の4種類の商品関連データ表示用のテンプレートHTMLがあります。（その他にもカゴの中身表示ページやお客様情報入力ページ、個別テンプレートHTMLがあります）
ここではまず大分類一覧ページのテンプレートの作成方法をご説明致します。まず下記の「変数」が変数のままの状態の画面をご覧下さい。
●大分類一覧ページのテンプレートHTML
では大分類一覧ページで使われている変数の役割を説明していきます。
#shoptitle# これはストアカートBASICに登録されたお店の名称に変換されます。HTML的には<title>#shoptitle#</title>というような記述をします。ページタイトルの部分ですね。
#shopbana# これはストアカートBASICに登録されたお店のタイトル画像に変換されて表示されます。
#CHK:Keys#allsch.gif#end# これは商品検索フォームに変換されて表示されます。１画面につき、一つしか使えません。
#member##name# 様いらっしゃいませ！#/member# #headmassage# これは会員登録されたお客様がログインした状態でページを表示すると、「お客様名　様いらっしゃいませ！」と表示されます。いらっしゃいませの部分の文章は変更出来ます。#member#　#/member#で囲まれている部分が表示されます。
#headmassage# これは管理画面のページ編集のデザイン簡単編集で登録されたヘッダーメッセージ文章が表示されます。
#footmassage# これは管理画面のページ編集のデザイン簡単編集で登録されたフッダーメッセージ文章が表示されます。
#incart#　#num#　#price# #/incart# これは現在のカゴの中身の商品の個数と金額を表示します。#num#が個数で#price#が金額になります。個数と金額の変数を　#incart#　#/incart#　で囲むように配置してください。
#chk#買い物カゴの中身をチェック#end# これはカゴの中身ページへのリンクになります。文字列は変更可能です。
#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#とその間に囲まれたデータ表示領域をレイアウトすればＯＫです。また逆に、1行に5件のデータを表示したい場合は、5組の#body#〜#/body#とその間に囲まれたデータ表示領域5個をレイアウトしてあげればいいわけです。
#main#と同様、HTMLタグでいうと、#body#が<td>で、#/body#が</td>と思っていただくといいかもしれません。
この部分は少し難しいかもしれないので、実際にテンプレートHTMLを作りながら試してみてください。
※ここから下の変数は#body#〜#/body#で囲まれた中でしか使えません。
#categoryphoto1# この変数は、登録されている商品分類の画像ファイルに変換されて表示されます。
また表示される画像は小分類へのリンクがつけられます。
#categoryname2# この変数は、登録されている商品分類の名前に変換されて表示されます。
また表示される名前は小分類へのリンクがつけられます。
名前だけの表示にする場合には#categoryname#という変数で表示できます。
#categoryurl# この変数は、小分類へのリンクURLに変換されます。
例：<a href=#categoryurl#>#categoryname#</a>
#newmark#　#/newmark# この変数で囲まれた画像又は文字列が、商品分類登録時にNEWマークを表示するを選択した際に表示されます。NEWなどの画像ファイルを入れると良いでしょう。
例：#newmark#<img src=new.gif>#/newmark#
#categorycoment# この変数は、登録されている商品分類の説明文に変換されて表示されます。
以上の変数が、基本的な大分類一覧ページを作成するために必要な変数になります。文字列に変換されて表示されるものは、それぞれフォントの色やサイズの設定、CSSの設定などが可能です。（例：<font size="4">#categoryname#</font>など）
変数の文字列さえ間違えなければ、あとは自由に場所を変えたりデザインを大幅に変更したり、FLASHムービーやGIFアニメの挿入などが出来ます。またデータ表示部分などは、ショップの雰囲気や運営方針に合わせ、1行につき1件だけの表示にしたり、1行に5件とか6件の表示にしたりも簡単に出来ます。ただこの部分は、#main#〜#/main#　#body#〜#/body#　の変数の役割を良く理解してチャレンジしてみてください。
また、テンプレートHTML上で使用する各種外部ファイル（CSSファイルや、画像ファイルなど）は、WEBサーバにFTPで接続し、shopフォルダの中にアップロードして下さい。（テンプレートHTMLファイルもshopフォルダに存在します）


▲ページトップへ