Home > 買物カゴシステム > WEB MART
|
- クッキーを使った買物カゴシステムで、WEBショッピングを行うためのプログラムです。
- サンプルは以下にあります。
- WEB MARTの機能的な特長は以下のとおりです。
- 消費税は、外税・内税の両方式はもちろん、「軽減税率」にも対応しています。
- 全画面はレスポンシブ対応になっていますので、スマホからのアクセスにも最適化された画面幅に自動対応します。
- すべての注文画面(メール本文含む)がテンプレート式のため、自由にデザインやレイアウト変更を行うことができます。
- 買物情報としてのクッキーは、セッション・クッキーを利用するため、利用後ブラウザを閉じると買物情報は自動消去されます。
- 都道府県別の送料計算、一定以上の送料サービス計算、支払い別の手数料計算(代引き等)などが可能です。
- 商品の検索が可能です。検索結果を、低価格順や高価格順にソート表示することができます(v4以降)。
- 商品データをCSV形式でダウンロードしたり、逆にCSVからアップロード更新することも可能です(v4以降)。
- 商品の属性情報(サイズやカラー指定等)を、制限なしに設定できます(v4以降)。
- オプションで在庫管理が行うことができ、在庫が「0」になると販売を自動停止します。
- 注文ログを自動保存し、管理画面から過去の履歴注文を閲覧することができます。
- 郵便番号を入力すると、ワンタッチで都道府県以下の住所をプレ入力します(株式会社人気組提供の「AjaxZip3」を利用)。
- 配達日入力は、datepickerにより、日付をワンタッチ入力することができます。
- クレジット/銀行/コンビニ決済連携により、ワンストップで販売から決済までを行なうことができます (クレジット/銀行/コンビニ決済連携を行なうためには、別途ゼウス社との個別契約が必要)。
- このプログラムを利用する上での利用規定です。必ず目を通しておいて下さい。プログラムをダウンロードする場合、「利用規定」に同意したものとみなします。
ゼウス社との提携について
- CGIショッピングカートの利用について、これまでネットショップ様からご要望の多かった「クレジット/銀行/コンビニ決済」を可能とするために、クレジットサービス会社の「ゼウス社」と提携しました。
- 設定ファイル init.cgi で所定の設定を行うことにより、ショッピングカートでの商品販売時に支払方法で「クレジット決済」、「銀行決済」又は「コンビニ決済」を選択すると自動的に決済画面を表示させ、クレジット/銀行/コンビニ決済までを自動完結します。
- クレジット/銀行/コンビニ決済サービスを利用するには、ゼウスとの契約が別途必要です。詳細は以下のページをご覧ください。
ゼウス社クレジットカード決済代行システムのご案内
- 以下の書庫ファイルをダウンロードします。文字コードはUTF-8になっていますので、秀丸、Terapad等のUTF-8に対応したエディタで編集してください。
- ダウンロード後、解凍 します。解凍すると以下のファイルが展開されます。
init.cgi ------------- 設定ファイル mart.cgi ------------- 買物カート本体プログラム order.cgi ------------ 買物カート注文プログラム check.cgi ------------ 動作チェック用プログラム admin.cgi ------------ 管理用プログラム index.html ----------- 買物カゴ画面(サンプル) data/*.* ------------- データファイル data/log ------------- ログ格納ディレクトリ data/ses ------------- セッションディレクトリ data/pwd ------------- パス用ディレクトリ lib/CGI/Minimal.pm --- データ受理モジュール [入手元] lib/CGI/Session.pm --- セッション管理モジュール [配布元] lib/jacode.pl -------- 文字コード変換モジュール [入手元] lib/*.pl ------------- 各処理モジュール lib/Crypt/RC4.pm ----- 暗号化モジュール [入手元] lib/Digest/SHA/PurePerl.pm -- 暗号化モジュール [配布元] tmpl/*.* ------------- テンプレートファイル img/ ----------------- 画像格納ディレクトリ(検索画面用) cmn/style.css -------- スタイルシート cmn/admin.css -------- 管理画面スタイルシート cmn/mart.js ---------- javascriptファイル cmn/red.png ---------- アイコン画像 [入手元] cmn/picker/*.* ------- datepicker動作ファイル [入手元]
- 全体のディレクトリ構成とファイル位置の設置例は以下のとおりです(かっこ内はパーミッションの設定値)。
ディレクトリ構成例
public_html / (ホームディレクトリ) | +-- mart / mart.cgi [705] | order.cgi [705] | find.cgi [705] | admin.cgi [705] ... 管理画面 | init.cgi [604] ... 設定ファイル | index.html ........ 買物カゴページ(サンプル) | +-- lib / jacode.pl | | login.pl | | | +-- CGI / *.* | +-- Crypt / *.* | +-- Digest / *.* | +-- data / mart.dat [606] | | stock.dat [606] | | num.dat [606] | | law.dat [606] | | rtax.dat [606] | | pass.dat [606] | | | +-- log [707] / | +-- pwd [707] / | +-- ses [707] / | +-- cmn / style.css | | admin.css | | mart.js | | red.png | | | +-- picker / *.* | +-- tmpl / *.html *.txt
- init.cgi を エディタ で開いて以下の箇所を修正します。
- $cf{tax_per} = 0;
- (消費税方式にて、内税方式の場合は「0」とします。外税方式の場合は、その税率を%単位で指定します)
- $cf{passphrase} = "passphrase";
- (顧客情報のクッキーを暗号化するキーです。適当な英数字で指定しますが、1度決めた文字列は以後変更しないように注意してください。クッキーの復号化ができなくなります)
- $cf{master} = 'xxx@xxx.xx';
- (注文メールの送信先アドレスを指定します)
- $cf{sendmail} = '/usr/lib/sendmail';
- (サーバで定められたsendmailのパスを指定します。不明な場合は、必ずプロバイダへ確認します)
- $cf{sendm_f} = 0;
- (sendmailの仕様として、-fオプションが必要な場合「1」とします。不明な場合は、必ずプロバイダへ確認します)
- $cf{stock} = 0;
- (在庫管理を行う場合は「1」とします)
- $cf{ssl_cookie} = 0;
- (SSLモードの使用時において、顧客情報のクッキーにsecure属性を付加する場合には「1」とします。これによりクッキー情報の送受信が暗号化されます。SSLモードで使用しない場合にはここは「0」のままにします)
- $cf{pref} = [
'北海道,1080',
'青森県,1080',
: - (都道府県名の設定です。県別に送料を指定する場合には、県名の後のコンマに続けて送料を記入します。もし、送料が不要な場合には「0」とします)
- $cf{cari_serv} = 10000;
- (一定金額以上の場合に送料を無料にする場合にその金額指定します。もし、この機能を使用しない場合には「0」とします)
- $cf{payment} = [
'銀行振込,0',
'郵便振替,0',
'代金引換,525',
); - (支払方法の選択肢を設定します。支払い別に手数料を指定する時はコンマの後に送料を指定します。送料が不要な場合は手数料部分を「0」とします)
- $cf{options} = [
'color,カラー',
'size,サイズ',
]; - (登録商品の属性情報を指定します。それに対応するフォーム側のフィールドのname値とその名称をコンマで区切ります。設定個数に制限はありません。
- $cf{max_failpass} = 5;
- (管理パスワードの最大間違い制限を指定します。この回数以上になるとログインがロックされます。
※運用の注意点は右のリンクをご覧ください: 管理パスワードについて) - $cf{zeus_serv} = 0;
- (ゼウス社による決済代行サービスを行なう場合に設定します。クレジットのみは「1」を、クレジット及び銀行決済サービスは「2」を、クレジット及びコンビニ決済サービスは「3」を、クレジット・銀行・コンビニ決済サービスは「4」とします。この機能を利用する場合には、別途ゼウス社との契約が必要です。 詳細は「ゼウス社クレジットカード決済代行システムのご案内」を参照)
- $cf{zeus_num} = '11111';
- (ゼウス社との契約完了時に発行されるクレジット用IPコードを記入します。$cf{zeus_serv}の値が「1」又は「2」又は「3」又は「4」の場合に必須)
- $cf{zeus_bip} = '22222';
- (ゼウス社との契約完了時に発行される銀行用IPコードを記入します。$cf{zeus_serv}の値が「2」又は「4」の場合に必須)
- $cf{zeus_cip} = '33333';
- (ゼウス社との契約完了時に発行されるコンビニ用IPコードを記入します。$cf{zeus_serv}の値が「3」又は「4」の場合に必須)
- mart.cgi, order.cgi, admin.cgi, check.cgi を エディタ で開いて以下の箇所を修正します。
- #!/usr/local/bin/perl
- (プロバイダで定められたPerlへのパスを指定します)
- 以上、修正が完了したら各ファイルを所定のディレクトリへFTP転送し、以下のとおり アクセス権 (パーミッション) を設定します。
ファイル名 パーミッション 転送モード 一般サーバ suEXECサーバ
CGIWrapサーバmart.cgi
order.cgi
find.cgi
admin.cgi
check.cgi755 or 705 701 or 700 アスキー init.cgi 644 or 604 600 アスキー lib/*.pm
lib/jacode.pl
lib/Crypt/*.*
lib/CGI/*.*cmn/style.css
cmn/admin.css
cmn/mart.js- - アスキー mart.dat
stock.dat
num.dat
law.dat
pass.dat
tmpl/*.*666 or 606 600 アスキー cmn/red.png - - バイナリ data/logディレクトリ
data/pwdディレクトリ
data/sesディレクトリ777 or 707 700 - Tips:ファイル転送の仕方は以下のページを参考にしてください。
FTP : Windows編 FTP : Macintosh編 - 以上、作業が完了したら「チェックモード」で動作チェックを行ないましょう。「check.cgi」に直接アクセスすることで、簡易的なチェックを行うことができます。なお、動作チェック後はcheck.cgiはファイル削除しておきます。
- ファイル構成上、アクセスするファイルは以下の通りです。
買物ページ : index.html (買物カゴ画面)
管理ページ : admin.cgi (管理用パスワードを入力してログインします)
- v3より、文字コードが「UTF-8」になりました。v2以前からv3以降にバージョンアップする場合、データファイルの文字コードを変換する必要があります。
【変換方法】
(1) data/mart.dat をFTPでダウンロードします。
(2) TeraPad等のUTF-8対応のエディタで、文字コードをUTF-8に変更します。 -
v4より、商品の登録情報の内容が次のとおり変更になりました。v3以前で属性情報を利用している場合は、管理画面から追加登録するか、又はCSVデータから一括登録する必要があります。
【変更情報(右図参考)】
(1) 属性情報(サイズ・カラー等)を利用する場合は、その情報を指定する必要があります。
(2) 検索機能を使用する場合は、「戻り先URL」を指定する必要があります。
- 商品登録について
最初に商品を登録する必要があります。商品登録は admin.cgi から1点ずつ行う方法と、CSV形式で一括登録する方法があります。
- 買物カゴ画面のフォームの書き方 (同梱の index.html も参考にしてください)
項目 必須・任意 name属性 value属性 type属性 買物カゴ 商品コード 必須 code admin.cgiで登録した「商品コード」 hidden 数量 必須 num 初期値としてセットする「数量」 text, select, radio 戻り先 必須 back 買物カゴのあるHTMLページの「URL」
(※必ずhttp://からの絶対パスで記述します)hidden 属性情報
(色・サイズ等)任意 color, size等 選択させたい属性情報(色・サイズ等) text, select, radio 中身確認 戻り先 必須 back 買物カゴのあるHTMLページの「URL」
(※必ずhttp://からの絶対パスで記述します)hidden 商品検索 戻り先 必須 back 買物カゴのあるHTMLページの「URL」
(※必ずhttp://からの絶対パスで記述します)hidden 並び替え 必須 sort 並び替えを指定
1 : 価格の安い順
2 : 価格の高い順
3 : 登録の新着順
4 : 登録の古い順
select, radio キーワード 任意 word 商品情報の内、「商品名」と「備考」のキーワードを検索 text ※属性情報は、v4からは init.cgi の $cf{options} で指定し(name属性含む)、種類は無制限に設定可能です。記述例(1) 属性情報(色・サイズ等)を指定しない例
■高級ペンケース
<form action="http://www.example.com/mart/mart.cgi" method="post">
<input type="hidden" name="code" value="0001">
<input type="hidden" name="back" value="http://www.example.com/mart/mart.html">
単価 : ¥1,200<br>
数量 : <input type="text" name="num" value="1" size="4">
<br><br>
<input type="submit" value="購入する">
</form>記述例(2) 属性情報(色・サイズ等)を指定し、個数をセレクトボックスで指定する例
■高級ファイルケース
<form action="http://www.example.com/mart/mart.cgi" method="post">
<input type="hidden" name="code" value="0002">
<input type="hidden" name="back" value="http://www.example.com/mart/mart.html">
単価 : ¥1,500<br>
カラー :
<select name="color">
<option value="ブルー">ブルー
<option value="ブラック">ブラック
<option value="グリーン">グリーン
</select><br>
サイズ :
<select name="size">
<option value="S">S
<option value="M">M
<option value="L">L
</select><br>
数量 :
<select name="num">
<option value="">▼選択
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
</select><br>
<br><br>
<input type="submit" value="購入する">
</form>記述例(3) 買物カゴ中身確認用フォーム
■買物カゴ中身確認
<form action="http://www.example.com/mart/mart.cgi" method="post">
<input type="hidden" name="back" value="http://www.example.com/mart/mart.html">
<input type="submit" value="中身を確認">
</form>記述例(4) 商品検索用フォーム
■商品検索
<form action="http://www.example.com/mart/find.cgi" method="post">
<input type="hidden" name="back" value="http://www.example.com/mart/mart.html">
並び替え:
<select name="sort">
<option value="1">価格の安い順
<option value="2">価格の高い順
<option value="3">登録の新着順
<option value="4">登録の古い順
</select>
<br>
キーワード:
<input type="text" name="word" size="25">
<input type="submit" value="商品検索">
</form> - テンプレートファイルについて
・注文画面およびメール本文はテンプレート式となっていますので、レイアウトや画面を自由にカスタマイズすることができます。
・テンプレートファイルは、すべて tmplディレクトリ に置かれています。ファイル名 用途 備考 mart.html 買物カゴ画面 find.html 検索結果画面 addr.html 注文者情報入力画面 conf.html 確認画面 send.html 送信後画面 send-credit.html 送信後、クレジット決済連携画面 ゼウス社契約のとき send-bank.html 送信後、銀行決済連携画面 ゼウス社契約のとき send-conv.html 送信後、コンビニ決済連携画面 ゼウス社契約のとき error.html エラー画面 reply.txt 注文メール本文 注文者宛のメール order.txt 注文メール本文 管理者宛のメール