JavaScriptショッピングカート

minicart.zip（zip形式・無料・ダウンロード）

設定・設置方法について
2007.09.17
OfficeGLOS
http://officeglos.com

１：著作権・著作権の表示について

http://officeglos.com

宛のリンクを貼っておいて下さい。

例）
<a href="http://officeglos.com" target="_blank" title="格安ホームページ作成代行・ホームページ用プログラム">
Powered by OfficeGLOS
</a>

<a href="http://officeglos.com" target="_blank" title="格安ホームページ作成代行・ホームページ用プログラム">
<font size="1">格安ホームページ作成代行</font>
</a>

２：責任範囲について

バグやご要望には随時対応しますが、フリーソフトの為改良完成の時期については確約出来かねます。
販売した商品・サービスによっておきた不利益・紛争は、利用者の責任下において処理してください。
当方は一切責任を負いません。
動作はWindows版IE6、FireFox2、マック版Safari2、FireFox2で確認しています。
改造は自由に行ってください。あまり難しいことはしていない、上から実行の簡単なプログラムです。

３：設置

３−１：ファイル構成

サンプルのファイル構成は以下の様になります。

各ファイルは下記設定や作成が完了後、ＦＴＰソフトにてアップロードしてください。
サーバー上にデーターの保存は行いませんので、パーミッションの設定は必要ありません。
貴方のサイトの文字エンコードがShift_Jisでない場合は、データーファイルとsendmail.phpを除くすべてのファイルのエンコードを貴方のサイトの文字エンコードと同じものにそろえてください。（jsファイルを含む。プログラム内部で全角日本語が使用されています）

３−２：データーファイルの構成

items.htmlがデモ用のデーターファイルです。
形式は、半角カンマ　または　全角スペース　または　半角スペース　または　タブで区切られた、ＵＴＦ−８で保存されたテキストデーターです。
必ずＵＴＦ−８で保存してください。（それ以外では全角文字が文字化けします）
なお、マッキントッシュのSafari2の場合、ＢＯＭ付きＵＴＦ−８で保存しないと文字化けします。

ＢＯＭ付きＵＴＦ−８で保存可能なエディタの例：サクラエディタ

データーの並び順は、

タイトル、価格、詳細ページのＵＲＬ、一覧表示や籠の中身表示用のサムネイルファイル

となります。

同封のサンプルファイルの中身）

アイテム１,1000,item1.html,cart_thumb/image1.jpg
アイテム２,1500,item2.html,cart_thumb/image2.jpg
アイテム３,2000,item3.html,cart_thumb/image3.jpg

３−３：共通項

３−３−１：かごの中身へのリンク

<form action="cart.html">
<input type="submit" value="かごの中身を見る" />
</form>

の様に、htmlファイルを呼び出してください。
お好みでファイル名を変えていただいてもかまいません。

３−３−２：レジに進むへのリンク

サンプルにある、

<form action="accurate.html" onsubmit="return checkCartItems();">
<input type="submit" value="レジに進む" />
</form>
<form action="sendmail.html" onsubmit="return checkCartItems();">
<input type="submit" value="レジに進む・フォーム版" />
</form>

の様に、ＨＴＭＬを呼び出すと同時に、onsubmit="return checkCartItems();"を付け加えます。
この関数はかごの中身にものが入っているかをチェックするもので、無くても動作はしますが何も注文内容がないメールが送信されることになります。
画像ボタンを使うなら、<input type="image" src="画像ファイル名" alt="レジに進む"　onsubmit="return checkCartItems();" />などを使用します。
ファイル名はお好みで変えてください。

サンプルのaccurate.htmlはＰＨＰメール送信プログラムを使わず、メーラーを起動する場合の例です。IE6+Outlook Express、FireFox2+Outlook Expressで正常動作を確認していますが、マッキントッシュでは正常動作しません。また、Outlook Express以外のメーラーでの動作は確認しておりません。

sendmail.htmlは、ＰＨＰ版メール送信プログラムを使用する場合の入力画面です。
フォーム内に設定が必要な項目があります。

３−３−３：詳細を見るへのリンク

自動的に生成する場合を除き、作成した詳細画面のＨＴＭＬに普通にリンクして下さい。

３−３−４：かごに入れるボタン

<select id="num{id}">
<option value="1">1</option>
<option value="2">2</option>
　　　・
　　　・
　　　・
</select>個
<input type="button" value="かごに入れる" onclick="addItem('{id}');" />

<select id="num3">
<option value="1">1</option>
<option value="2">2</option>
　　　・
　　　・
　　　・
</select>個
<input type="button" value="かごに入れる" onclick="addItem(3);" />
等と、addItem(番号)を呼び出します。num番号は数量の選択肢ですが、通常のテキスト入力でもかまいません。num番号が存在しない場合は1個がかごに入ります。

３−４：一覧表示画面

同封サンプルファイルの「index.html」が一覧表示画面のサンプルです。
ソース内にある、<div id="ichiran"></div>の中身がアイテムの数だけ繰り返され、下の一覧の様な規則でデーターファイル設定の値が挿入されます。

一覧表示用の画像は、<img src="" id="image{id}" alt="{title}" />等としておいて下さい。

詳細を見るへのリンクは、<input type="button" value="詳細を見る" onclick="getURL('{id}');" />等としておいてください。
<a hred="{url}">詳細を見る</a>はＩＥ６では動作しますが、FireFoxでは動作しません。

３−５：詳細画面

サンプルの様にはめ込みも出来ます。

一覧用画像を使用する場合は、<img src="" id="image{id}" alt="{title}" />等としておいて下さい。（item1.html）
ただし、下記の様に、一覧やかごの中身を同時表示する場合はidが重なる為自動挿入は出来ません。通常の画像貼り付けで使用してください。

たとえば商品詳細の下に、一覧も追加する場合は、３−４の一覧表示と同じように、<div id="ichiran"></div>で囲まれた部分を作っておきます。（item2.html)
かごの中身を追加する場合は３−６の様に<div id="cart"></div>で囲まれた部分を作っておきます。(item3.html)

３−６：かごの中身

同封サンプルファイルの「cart.html」がかごの中身画面のサンプルです。
ソース内にある、<div id="cart"></div>の中身がアイテムの数だけ繰り返され、下の一覧の様な規則でデーターファイル設定の値が挿入されます。

一覧表示用の画像は、<img src="" id="image{id}" alt="{title}" />等としておいて下さい。

詳細を見るへのリンクは、<input type="button" value="詳細を見る" onclick="getURL('{id}');" />等としておいてください。
<a hred="{url}">詳細を見る</a>はＩＥ６では動作しますが、FireFoxでは動作しません。

数量変更ボタンは、

<select id="num{id}">
<option value="1">1</option>
<option value="2">2</option>
　　　・
　　　・
　　　・
</select>個
<input type="button" value="数量変更" onclick="modItem('{id}');" />

等としておいてください。

削除ボタンは２種類があります。

（このアイテムを削除）
<input type="button" value="削除する" onclick="delItem('{id}');" />

（全削除）
<input type="button" value="すべてを削除する" onclick="delAllItem();" />

３−７：メールソフトによるメール送信

accurate.htmlがサンプルです。

<form action="mailto:glos@officeglos.com">
<input type="hidden" name="subject" id="subject" value="商品注文" />
<input type="hidden" name="body" id="dody" value="{message}" />
<input type="submit" value="注文を送信する" />
</form>

の様に、nameがsubjectである入力欄とnameがbodyである入力欄を用意し、前者にはメールのタイトル、後者には{message}を値として入れてメールアドレスをactionに設定しておきます。
対応できているメーラーであれば、タイトル、本分に情報が挿入された状態でメール作成画面が起動しますが、対応していないメールソフトでは文字化けします。

３−８：ＰＨＰプログラムによるメール送信

sendmail.htmlがサンプルです。
サーバーでＰＨＰが動作する場合か、OfficeGLOSの２サーバーのうちいずれかを使用してメールをフォーム送信する場合に使用します。

このファイル内に設定項目があり、また、minicart.jsの中にも設定項目があります。
minicart.js内部の設定は３−９で説明します。

このファイル内における設定項目

３−９：minicart.jsの設定

カートプログラム本体です。
プログラム冒頭に動作設定項目があります。

３−９−１：dataFileName='ファイル名';

データーファイル名を指定します。サンプルではitems.html。

３−９−２：noimage="ファイル名";

一覧やかごの中身用の画像が存在しない場合に、代わりに表示する画像ファイルの名前。
サンプルではspacer.gif（１ピクセルの透明なＧＩＦ）

３−９−３：入力チェックの指定類

７種類の入力チェック方法があります。
すべての方法で、

checkRequire[0]="name:お名前";
checkRequire[1]="ken:都道府県";
checkRequire[2]="address:住所";
　　　・
　　　・
　　　・
checkAlphabet[0]="name:お名前";
checkAlphabet[1]="ken:都道府県";
checkAlphabet[2]="address:住所";
　　　・
　　　・
　　　・

と、０から始まる番号をつけながら、フォームのname属性:エラー表示時の項目名として設定してください。設定しない入力はチェックされません。

Powered by OfficeGLOS