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


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

cart_js/
      |--cart.html(カート画面のスキン)
      |--cart.css(スタイルシート)
      |--cart.js(JavaScriptファイル)
      |--catalog.html(商品一覧ページ)
      |--check.html(確認画面のスキン)
      |--enter.html(入力画面のスキン)
      |--functions.js(機能をまとめたjsファイル)
      |--jquery-1.8.2.min.js(jQueryファイル)
      |--set.js(設定ファイル)
      |--thanks.html(終了画面)
      |
      +--img/ (画像ディレクトリ)

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

①まず使用するフォームデコード(メールデコード)のサービスを決めます。
規約でカートのようなものに使うことを禁止していないことはもちろん、
送信後に戻ってくるページが設定できるところがお勧めです。

②ダウンロードしたzipファイルを解凍してください。 
cart_jsフォルダができて、そのなかにファイルがありますので、
set.jsをテキストエディタで開いて
フォームデコードの設定
にフォームデコードサービスのマニュアルを見てパラメータなどを設定します。
それから、送料などを設定します。

③catalog.htmlが商品の購入ページのサンプルになります。
商品の購入ボタンのタグが記入してありますので参考にしてください。
商品の購入ボタンは

<form>
<input type="hidden" name="mode" value="regist">
<input type="hidden" name="number" value="a1">          商品名を入力(必須)
<input type="hidden" name="name" value="ピアス">        商品番号をvalue=""に入力(必須)
<input type="hidden" name="price" value="1000">         価格を入力(必須)
<input type="hidden" name="image" value="img/acce.jpg"> 画像
<input type="hidden" name="weight" value="">            重さ(配送方法によって計算する場合は必要)
<input type="hidden" name="postage" value="">           送料(送料を商品ごとに設定する場合は必要)
<input type="hidden" name="page" value="catalog.html">  戻るページ(httpからでもOK)
<select name="amount">
<option disabled>個数
<option value="1">1
<option value="2">2
<option value="3">3
</select>
<input type="button" value="かごへ" onClick="Regist(this.form)">
</form>

というformタグを各商品に対して記入します。
<input type="hidden" name="weight" value="">
<input type="hidden" name="postage" value="">
のタグは使わない場合は削除しても構いません。

色やサイズの選択もできます。その場合は、

<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="blue">blue</option>
<option value="red">red</option>
<option value="pink">pink</option>
</select>

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


④サーバーに転送します

public_html/
           |--cart.html
           |--cart.css
           |--cart.js
           |--catalog.html
           |--check.html
           |--enter.html
           |--functions.js
           |--jquery-1.8.2.min.js
           |--set.js
           |--thanks.html
           |
           +--img/ (画像ディレクトリ)

catalog.htmlにアクセスしてカートが動けばOKです。
cart.jsの
1088行の
$('#enter').html(foline);
の上などに
alert(foline);
と記入すると、
フォームデコードに送信するタグが表示されますので、
それでパラメータなどが正しいか確認できます。
もちろん確認できたらalert(foline)は削除します。


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

ラッピングを使用するときは、
set.jsの
const WRAPPING="0";
を"1"にして、
enter.htmlの
<tr> 
	<td bgcolor="#EBEBEB" class="pad">要望など</td>
	<td> 
		<textarea name="message" rows="4" cols="35" wrap="soft" id="message"></textarea>
	</td>
</tr>

の上などに
<tr> 
	<td bgcolor="#EBEBEB" class="pad">ラッピング</td>
	<td>
		<input type="checkbox" name="wrapping" value="yes" id="wrapping">ラッピング必要
	</td>
</tr>

と記入してください。

========================================================================================
◇ デザインの変更について
========================================================================================

cart.htmlなどhtmlファイルを直接変更してください。
id="total"のようなid属性や
<form action="cart.cgi" method="POST" style="margin:0" name="fo" onSubmit="return MCheck()">
のようなformタグを変更しなければ動きます。