#####################################
#                                   #
#   Cart Z  (C)CGI Pal              #
#   設置の仕方とマニュアル          #
#                                   #
#####################################


cart.html、enter.htmlなどHTMLファイルはすべてDreamweaverで作成しているので、
formタグや<!--name-->のような挿入文字のタグ、#nameのように#の付いた値などをいじらなければ
ホームページビルダーのような作成ソフトでも簡単にデザイン変更できます。

========================================================================================
◇ 更新情報
========================================================================================

ver.17--購入ボタンを押したときの動作を戻した 複数同時購入を廃止
ver.16.5--requireするファイルのパスを.から記入するように変更 を改行コードをLFに統一
ver.16--ZとZ-Bを1つにした Webレスポンシブ化 デザインの変更 カート表示部分のコードを1つにまとめた その他変更多数

========================================================================================
◇ ファイルの説明
========================================================================================

(※)は在庫管理を使わない場合は不要なファイルです。

cart/
   |--catalog.html(商品一覧ぺージ)
   |
   +--cart_css/
   |          |-- cart.css(cart.html、enter.html、comfirm.html、thanks.htmlのスタイルシート)
   |          |-- catalog.css(商品一覧ページのスタイルシート)
   |          +-- common.css(カート画面のスキン)
   |
   +--cart_js/
   |         |-- cart.js(JavaScriptファイル)
   |         +-- goods.js(在庫管理用JavaScript)(※)
   |
   +--cart_img/ (画像ディレクトリ)
   |
   +--cart_cgi/
             |-- cart.cgi(スクリプト本体)
             |-- admin.cgi(管理用スクリプト)(※)
             |-- cart.html(カート画面のスキン)
             |-- enter.html(入力画面のスキン)
             |-- confirm.html(確認画面のスキン)
             |-- thanks.html(終了画面のスキン)
             |
             +--log/ (ログファイルのディレクトリ)
             |     |-- .htaccess(アクセス制限用ファイル)
             |     |-- goods.log(在庫数記録用ファイル)(※)
             |     |-- lock(同時書き込み防止用ファイル)
             |     +-- count.log(購入番号記録用ファイル)
             |     |
             |     +-- tmp/(購入ファイルの一時保存ディレクトリ)
             |
             +--lib/ (機能ファイルをまとめたディレクトリ)
                  |-- functions.pl(機能をまとめたライブラリ)
                  |-- mail.pl(メール送信用ライブラリ)
                  |-- CDB_Perl.pm(郵便番号検索用ライブラリ)
                  |-- postal.cdb(郵便番号検索用データベース)
                  |-- postal.pl(郵便番号検索用ライブラリ)
                  |-- purchase.pl(購入のクラスオブジェクト用ライブラリ)
                  |
                  +--deliver/ (送料計算用ライブラリのディレクトリ)
                  |         |-- yupack.pl(ゆうパック送料計算用ライブラリ)
                  |         |-- kuroneko.pl(クロネコヤマト送料計算用ライブラリ)
                  |         |-- sagawa.pl(佐川急便送料計算用ライブラリ)
                  |         |-- teikeigai.pl(定形外郵便計算用ライブラリ)
                  |         +-- mailbin.pl(メール便送料計算用ライブラリ)
                  |
                  +--CDB_Perl/ (郵便番号検索用ライブラリのディレクトリ)
                            |
                            +-- Read.pm (郵便番号検索用ライブラリ)


========================================================================================
◇ 設置の仕方
========================================================================================

※基本的にはそのままアップしてパーミッションを設定すれば動くように作っていますので、
 まずはそのまま設置して商品がカゴに入るか試してみてください。

１.ダウンロードしたファイルを解凍してください。cartフォルダができます。

２.cart.cgiをテキストエディタで開くと上のほうに設定項目がありますので、
  まず$mailto='xxx@xxx.xxx';この部分にあなたのメールアドレスを設定してください。
  他の項目は動作確認されてから変更されるといいです。

３.サーバーにcartフォルダごとをアップロードして、
   cart.cgiのパーミッションを700にします。

４.http://あなたのサイトのURL/cart/catalog.html
   にアクセスして、「カゴに入れる」ボタンを押してカゴに入るか、
   きちんと計算されるか、送られてくるメールは文字化けしていないか確認してください。

========================================================================================
◇ 商品ページの作り方
========================================================================================

catalog.htmlを参考に商品のHTMLページを作ってください。

<form method="POST" action="cart_cgi/cart.cgi">
<input type="hidden" name="mode" value="regist">
<input type="hidden" name="name" value="商品名">
<input type="hidden" name="number" value="商品番号">
<input type="hidden" name="price" value="価格">
<input type="hidden" name="image" value="http://あなたのサイトのURL/xxx.jpg">
<input type="hidden" name="page" value="http://あなたのサイトのURL/catalog.html">(*)
<input type="hidden" name="stock" value="">
<input type="hidden" name="tax" value="">

<input type="text" name="amount" size="1" value="0">
<div class="button_box">
	<input type="button" class="up" onclick="Spinner('up',this)">
	<input type="button" class="down" onclick="Spinner('down',this)">
</div>
<input type="submit" value="カゴに入れる" class="btn">
</form>

というformタグを各商品ごとに記入します。
商品名
商品番号
価格
のところにはその商品の商品名と商品番号と価格を設定します。

商品番号は半角英数字と_と-で記入してください。
(例)001 G001 G-001 G_001

商品名は日本語でその商品名を記入します。

価格は半角数字で記入します。カンマなどは入れないでください。
(例)1000

http://あなたのサイトのURL/xxx.jpg
のところには商品の画像のURLを設定します。
設定しなくて空でもいいです。
../img/xxx.jpg
のように
cart.cgiからみたパスで記入してもいいです。

http://あなたのサイトのURL/catalog.html
ここのところには商品ページのURLを記入します。
カート画面で「お買い物を続ける」ボタンをクリックしたとき
ここに戻ってきます。
設定しなくて空でもいいです。
../catalog.html
のように
cart.cgiからみたパスで記入してもいいです。

<input type="hidden" name="tax" value="">
ここはcart.cgiの設定の
$taxrate_betu='0';
に設定した税率を使うときは
<input type="hidden" name="tax" value="1">
にします。

<input type="text" name="amount" size="1" value="0">
<div class="button_box">
	<input type="button" class="up" onclick="Spinner('up',this)">
	<input type="button" class="down" onclick="Spinner('down',this)">
</div>
この部分は注文個数の入力フォームですが、
プルダウンにしたいときは、
<select name="amount">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
のようにします。

宅配便の送料計算用に重量を設定したいときは、
<input type="hidden" name="tax" value="">
の下に
<input type="hidden" name="weight" value="重量">
と追加します。
重量のところに
"500"のように
その商品の重量をg単位で、
設定します。

パックサイズを設定したいときは、
<input type="hidden" name="tax" value="">
の下に
<input type="hidden" name="pack" value="パックサイズ">
と追加します。
パックサイズ
のところには
"60"
のようにサイズを設定します。

重量もパックサイズも、
設定しないときは
deliver/yupack.plなどに設定した料金の
一番左側の料金が適用されます。

商品に送料を設定するときは、
<input type="hidden" name="tax" value="">
の下に
<input type="hidden" name="postage" value="1200">
のように送料を設定します。

サイズ、色などのオプションを選択させたいときは、

<select name="op1">
<option value="">サイズ</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
</select>

<select name="op2">
<option value="">カラー</option>
<option value="赤">赤</option>
<option value="青">青</option>
<option value="黄">黄</option>
</select>

のようなタグをformタグの中に記入します。

op1とop2のどちらにカラーやサイズを設定するかは
決まっていません。どちらでもいいです。

オプションが1つだけてなおかつ在庫機能を使っていないときだけ
オプションに価格を設定できます。

<select name="op1">
<option value="">サイズ</option>
<option value="S:1000">S</option>
<option value="M:2000">M</option>
<option value="L:3000">L</option>
</select>

のように価格を設定します。

配布しているcatalog.htmlのformタグには
<form method="POST" action="cart_cgi/cart.cgi" style="margin:0" onsubmit="return Check(this)">
のように
 onsubmit="return Check(this)"
がついていますが、
購入ボタンをクリックしたときに購入個数やオプションの選択をチェックしないときは
これは削除してもらって構いません。

========================================================================================
◇ 税率について
========================================================================================

消費税をかけるときは、cart.cgiの設定の
$taxrate='10';
ここのところに税率を半角数字で記入します。
税をかけないときは'0'としてください。
その下に
$taxrate_betu='0';
とありますがこちらに数字を設定すると別の税率を設定できます。
その場合は、商品ページの
<input type="hidden" name="tax" value="">
ここに
<input type="hidden" name="tax" value="1">
のように1と設定してください。その商品に別の税率が適用されます。
こちらに"1"を設定した商品は、カゴに入れると名前の前に※が付きます。

軽減税率を適用するときは、
軽減税率でない商品と、軽減税率の商品とどちらかが多いと思いますので
多いほうの商品の税率を
$taxrate='10';
に設定して、少ないほうの税率を
$taxrate_betu='0';
に設定するといいです。

========================================================================================
◇ お支払い方法・配送方法について
========================================================================================

お支払い方法・配送方法は

cart.cgiの設定の

@deliver=(
'ゆうパック',
'佐川急便',
'クロネコヤマト',
'定形外郵便',
'メール便',
);

@pay=(
'銀行振込',
'代金引換',
'eコレクト',
'クロネコWebコレクト',
);

この部分に設定します。
設定したものが、お客様情報入力画面で表示されます。
不要なものは削除するか、
#'ゆうパック',
のように先頭に#をつけてください。

========================================================================================
◇ 配送の料金設定について
========================================================================================

cart_cgi/lib/deliverフォルダに
yupack.pl(ゆうパック用)
kuroneko.pl(クロネコヤマト用)
sagewa.pl(佐川急便用)
mailbin.pl(メール便用)
teikeigai.pl(定型外郵便用)
の各ファイルがありますので、使用する配送方法のファイルを
テキストエディタで開いて料金を設定します。

重量やパックサイズにかかわらず、
送料が一定のときは、
yupack.plの
@{$JYU{'kanto'}}=('800','1000','1200','1400','1600','1800','2000');
などの一番左側の料金が適用されますので、一番左だけ料金を設定すればいいです。
その場合は商品ページに重量やパックサイズのタグを追加する必要はありません。
(初期状態のままでいいです)


========================================================================================
◇ 名前と住所の入力について
========================================================================================

初期状態では、
名前とフリガナの入力は一つのフォームにしていますが、
姓と名を二つのフォームに分けたいときは
enter.htmlの
<input name="name" type="text" value="#name" size="25"><div name="e_name" class="e"></div>
の後に
<input name="name2" type="text" value="#name2" size="25"><div name="e_name2" class="e"></div>
と追加して

<input name="kana" type="text" value="#kana" size="25"><div name="e_kana" class="e"></div>
の後に
<input name="kana2" type="text" value="#kana2" size="25"><div name="e_kana2" class="e"></div>
と追加して

<input name="name_rcpt" type="text" size="25"><div name="e_name_rcpt" class="e"></div>
の後に
<input name="name2_rcpt" type="text" size="25"><div name="e_name2_rcpt" class="e"></div>
と追加して

<input name="kana_rcpt" type="text" size="25"><div name="e_kana_rcpt" class="e"></div>
の後に
<input name="kana2_rcpt" type="text" size="25"><div name="e_kana2_rcpt" class="e"></div>
と追加してください。

さらの、
enter.htmlの
50行の
'name' : 'お名前',
'kana' : 'フリガナ',
の下に

'name2' : 'お名前',
'kana2' : 'フリガナ',
と追加して

85行の
hissu['kana_rcpt']="お届け先フリガナ";
の下に
hissu['name2_rcpt']="お届け先お名前";
hissu['kana2_rcpt']="お届け先フリガナ";

と追加してください。

========================================================================================
◇ 在庫管理について
========================================================================================

在庫管理を使わないときは、
admin.cgiは不要ですので削除してください。
<script type="text/javascript" src="goods.js"></script>
のタグは不要ですので削除してもかまいません。
cart.jsの28行の
if(errmsg ==""){
	if(typeof(st) != "undefined"){
		errmsg+=StockCheck(fo);
	}
}
これも削除していいです。

在庫管理を使うときは、admin.cgiのパーミッションを700にして、
cart.cgiの$zaikoを1にして、admin.cgiにアクセスしてパスワードを入力して、
(初期値はadmin)
管理室に入り、「新規登録」をクリックすると入力フォームがでますので、
各商品に在庫を登録していきます。

admin.cgiの上のほうに設定がありますが、
$optionを0にしているときは、
商品番号に商品ページの
<input type="hidden" name="number" value="商品番号">
ここに設定したものと同じ商品番号を設定して、
在庫数を入力すればいいです。

$optionを1にしたときは、
オプション [値] [在庫数]
とフォームがでますので、
 [値]に商品ページの
<select name="size">
<option value="">サイズ</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
</select>
ここに設定した値を入力して(ここではS、M、L)、
[在庫数]にその在庫数を入力してください。
オプションの在庫数を入力すると、上のほうの[在庫数]の入力は無視されます。

$optionが2のときは、[値]のところに
 1: ①[   ]   1: Ⅰ[   ]
 2: ②[   ]   2: Ⅱ[   ]
 3: ③[   ]   3: Ⅲ[   ]
のように表示され、「在庫数」には
 1: ①-Ⅰ[   ]   4: ②-Ⅰ[   ]  7: ③-Ⅰ[   ]
 2: ①-Ⅱ[   ]   5: ②-Ⅱ[   ]  8: ③-Ⅱ[   ]
 3: ①-Ⅲ[   ]   6: ②-Ⅲ[   ]  9: ③-Ⅲ[   ]
のように表示されます。
[値]の★にL、☆にブルーと入力する場合、★-☆のフォームがLとブルーの組み合わせの在庫になります。
[値]の★にL、○に;レッドと入力する場合、★-○のフォームがLとレッドの組み合わせの在庫になります。

商品ページに在庫状況を表示したいときは
<script>StockWrite('商品番号')</script>
のようなタグを各商品に記入します。

セキュリティのためにadmin.cgiのファイル名はなるべくわかりにくいものに変更してください。
(例)UNeHftyW.cgi
ファイル名だけを変更するだけでよく
プログラムは特に変更する必要はありません。

========================================================================================
◇ ラッピングについて
========================================================================================

cart.cgiの設定のラッピングを設定したあと、
enter.htmlの配送方法の下あたりに

などと記入して、check.htmlの送料の下あたりに
<tr> 
<td colspan="2">ラッピング</td>
<td align="center"> 
<!--wrapping-->
</td>
</tr>
などと記入してください。

========================================================================================
◇ SSLについて
========================================================================================

商品のページを
https://xxx.xxx.xxx/catalog.html
のようにhttpsでアクセスすればあとはずっとSSLになります。

========================================================================================
◇ 著作権表示について
========================================================================================

cart.htmlの
<!--http://cgipal.com-->
ここのところが著作権表示になりますので、
この部分は削除してはいけません。
