たくさんのファイルがあって、どこから手を付けたらいいのかわからない･･･そんな方のために、設定の順番と注意点を説明します。

ここで書かれている順に設定しなくてはいけないわけではありませんが、慣れるまではこの手順に従ったほうがスムーズに設置できるでしょう。

ここからは、｢簡易版」をベースに説明してきます。

最初に動作テストを行います。解凍して出てきた「shopv2_r」などのフォルダをそのままアップロードします。エラーが出る場合は、「まずはアップロード」に戻って、チェックしましょう。必要に応じてset.plを編集します。

スクリプトと商品ページは同じフォルダにアップロードすることをお勧めします。別フォルダにアップロードする場合は、パス設定に注意してください。

>>パスについてはこちらを・・・

管理モードにアクセスし、メール設定、送料設定を行います。管理モードにアクセスするには、サーバーにアップロードした「admin.html」へアクセスし、set.plで設定したパスワードを入力します。

設定方法は、管理モード内に記載していますので、そちらをご覧ください。

簡易版では、最初に商品購入ページを作成します。このページは純粋なHTMLファイルで、CGIが読み込むテンプレートではありませんから、余分な記号もありません。感性の赴くまま、気の向くままに自由に作成してください。

このスクリプトでは、CGIが生成するかご内ページや最終確認画面もある程度自由に作成できますので、CGIのことはいったん忘れて、ページ作りに没頭しましょう。

最初から全ての商品分を作成する必要はありません。どこかで間違えたら後が大変ですから、5つくらいにしておきましょう。この段階では見栄えを重視します。

最も楽しく時間を忘れる仕事です(^^)
先々のことは置いておいて、今はひたすら商品ページに専念します。

さて、商品購入のためのタグを記述するとき、以下の点に注意してください。

1. 固定タグの項目名は必ず半角英数で記述します。
   例:amount goods setumei
   
   
2. IDは必ず半角アルファベットと数字で記述します。必要に応じて備考を記述します。
   例：A-001 B-123　C-001-赤
   
   
3. 画像ファイル名<input type="hidden" name="gazou" value="xxxx">を指定するタグでは、画像ファイル名だけ記述します。パスは入れないでください。
   
   
   例：○pine.gif ×image/paine.gif
   
   
4. mode=regist mode=viewなどの「mode」タグは最も重要です。「mode」と「regist」などの記述を間違えると「hidden属性を指定してください」エラーになります。文字が半角になっているかも確認してください。
   
   
5. 金額を指定したり、計算したりする場合、解説ページに書かれている｢規則」をつど確認します。一つ作って、後はコピーして・・・とやっていると、一箇所間違えたらドツボです。
   
   
6. 商品画像は縦横最大200ピクセル程度までにします。ブロードバンド全盛の現在ですから、ファイルサイズは気にする必要はないかもしれません。(私はまだ56kモデムですが･･･)でも、以後のテンプレート作成時に、思わぬ苦労を強いられるかもしれませんので、大きな画像は使わないほうがいいでしょう。
   
   どうしても、大きな画像で細部まで見てもらいたい場合は、写真に大きい画像へのリンクを貼ります。

出来上がったら、作成した商品ページをサーバーにアップロードします。
ファイル名はとりあえず「index.html」としておきましょう。

では、実際に動かして見ましょう。

まだ画像をアップロードしていませんので、かご内ページに商品写真は表示されませんが、それ以外は、正しく表示されたでしょうか?

最終確認画面もチェックし、メール送信もしてみましょう。

配布ファイルをそのままアップロードした状態で正常に動作しているのに、きちんと計算しないような場合は、タグの記述にミスがあります。もう一度フォームタグを一つ一つチェックしてください。

次に、商品画像をアップロードします。特にset.plに変更を加えていなければ、商品画像は、「image」フォルダ内にアップロードします。

画像が表示されない場合は、set.plで指定されている「image」フォルダのパスが正しいか確認します。また、実際のイメージファイル名と、商品購入ページで記述したファイル名が一致しているか、大文字小文字が正しいか、全角を使っていないかも含めてチェックします。

いったん最終確認画面へ行き、そこから戻ってきた状態と、商品を削除して戻ってきた状態でも画像がきちんと表示されるかどうかも確認しましょう。

かご内画面で画像が表示されたら、次はテンプレートの作成です。

さて、いよいよテンプレートの作成です。作成するのは以下の5つのページです。

それぞれのテンプレートの書き方は、解説ページの「テンプレートの作成」をご覧ください。
ここではいくつかの注意点を説明します。

1. 記号を消さない。かご内画面の「備考」を除き、削除すると動作に不具合が発生することがあります。
2. 記号のスペルを間違えない。
3. 記号は半角アルファベットで記述する。
4. 隣り合う記号がある場合は、テーブルに入れるか、HTMLソース内で改行する。
   
   記号がきちんと記述されているのに、データが差し込まれず記号のまま表示される場合は、HTMLソースの1行に2つ以上の記号が含まれていることが原因です。
   
   HTMLソースから該当する記号を探して改行してください。なお、ソース上で改行しても、ブラウザ上では改行されません。
   
   HTMLソースがわからない場合はテーブルを作って、その中に入れるとよいでしょう。
   
   

   $記号1$

   $記号2$

   
   もちろん、テーブルの枠線(border)は0にします。
   
   
5. クッキーによる自動入力フォームの作成では、決められた規則をしっかり確認すること。
6. 送信フォームで必須項目にする場合は項目名の先頭に「_アンダーバー」をつけること。
7. OP1の、配送先フォームのタグの規則をしっかり確認すること。
   
   必須項目は「_h_項目名」
   必須項目以外は「h_項目名」
   
   
8. テーブルに入れた記号がスクリプト上では違う場所に表示される場合は、HTMLソースを開き、記号だけ改行します。
   
   例：
   <td>$記号$</td>でおかしくなる場合は・・・
   
   <td>
   $記号$
   </td>
   
   とします。
   ホームページ作成ソフトによっては、自動で余分な改行や、スペースを空けることがあり、それが原因でデザインが崩れることがあります。ソフトが作る、これら改行やスペースは、記号の前後からできるだけ排除してください。
   
   
9. テンプレート内のフォーム関連タグを削除しないこと。ボタンに表示される文字の変更はOKです。

テンプレートが完成したら、早速サーバーにアップロードします。

記号の位置に、正しいデータ表示されたでしょうか?もし表示されず、記号がそのまま出てきてしまう場合は、記号のスペルをチェックします。

購入からメール送信まで、一連の動作テストを行います。メールが送信されなかったり、最終確認ページで合計が表示されない場合は、フォームタグが削除されたか、フォームタグの中にあるはずの記号が外に出ているなどの原因が考えられます。

オリジナルのテンプレートと見比べながらチェックしてください。

ここまでできたら、完成したも同然です。後は、残された商品ページをどんどん作って行くだけですね。
でも、本当に大切なのはここからです。

商品数が1ページに収まるくらいの少数であれば問題はありませんが、たくさんの商品があったり、たくさんの種類がある場合は、それらの商品をいかにわかりやすく配置するか。ここで失敗すると、わかりにくい買い物かごになってしまいます。

そこで必要になるのがカテゴリわけです。

1ページに20も30もの商品があると、表示されるにも時間がかかりますし、ユーザーがかごから戻ってきたとき、どこまで見たかわかりにくくなってしまいます。

お勧めとしては、写真を使う場合は1ページに5〜10商品程度でしょうか。
そして、ページ上部に次のようなリンクを記述します。

A-001〜A-005｜A-006〜A-010｜A-011〜A-015｜A-016〜A-020

かご内ページの上部にも同じリンクをはり、｢最新のご注文商品」で商品IDを目立たせれば、、ユーザーにとって、自分がどのページからかごへ移動したかわかりやすくなります。

ジャンプ元ページのリンクをはずしたり色を変えたりすることはできませんが、利用上問題はありません。

商品を種類別に分類する場合は一般的にフレームが使われますね。フレームを使うととてもわかりやすい買い物かごになります。

フレームの使う場合は、左フレームに商品の種類別のリンクを、右フレーム上部に、今表示しているカテゴリのIDを表示するとよいでしょう。

カテゴリ A：家具 B：洋服 C：ペット ・ ・ ・ かごTop Home

洋服　B-001〜B-005｜B-006〜B-010 商品：ID　B-004　たぬきの鉢巻セット

こんな感じでしょうか･･･

カテゴリの移動は、IDを変更したりと大変面倒なので、できるだけ変更の少ないカテゴリ設定を考えましょう。

一つのカテゴリをさらに分類したい・・・そんなときが来るかもしれませんね。
そんなときは、カテゴリの数字を一気にとばすこともできます。

例：
洋服　カテゴリB　子供服：B-001〜B-099 紳士服：B-100〜B-199 婦人服：B-200〜B-399
実際の洋服点数はそれぞれ30点程度しかなくても、スクリプトの動作上特に問題は発生しません。

（ただし、「Shop System Type 1」を除く)

ざっと、駆け足で設置方法を説明しました。

次は、買い物かごを構成するそれぞれのファイルの役割を説明します。

設置には直接関係ありませんが、不慮の事故により(サーバークラッシュとか)管理データが消滅した場合の用心に、どのデータをバックアップするべきかもあわせて説明します。