ShoppingCartの設置事例 最終更新日:2003/08/23



 

ShoppingCart とは…

  ■ニフティの設置事例サンプル (商品の登録、編集は出来ません)

スクリプトの入手方法
  ※オリジナル版は「KENT WEB」の「ShoppingCartの解説」ページからDownLoad出来ます。

  ■ニフティ版Cart Ver0.9(配付は中止しました)
  ■ニフティ版Cart Ver1.11(メールデコード対応) - 2002/08/17 Update -
  ■ニフティ版Cart Ver1.21(並び替え機能追加) - 2003/04/26 Update -
  ■ニフティ版Cart Ver2.11(在庫管理機能追加) - 2003/08/23 Update -

 ニフティ版Cartの圧縮ファイルの中には、以下の9個のファイルが入ってます。
cartini.cgi …初期設定スクリプト
admin.cgi …管理者用スクリプト
cart.cgi …CGIスクリプト本体(ニフティ版)
data1.cgi 商品情報ログファイル
data2.cgi 注文情報ログファイル
stock.dat 商品在庫情報ファイル
raw.txt 「特定商取引に関する法律」の表示内容ファイル
Thanks.html …メール送信後の表示ページ
jcode.pl …日本語コードライブラリ


@nifty対応のディレクトリ構造
   @niftyには、cgi-binにおけるファイルに制限があります。(共通事項
   まず、ShoppingCartを設置する為に以下の様なディレクトリを作成して
   作業を進めます。

   Root/ ←あなたのルートパス
   |
   +--cgi-bin/ ←http://hpcgi▲.nifty.com/■■■■■■ 
   |       |
   |       +--shop/(cgi本体を設置する場所)
   |           
   |
   +--homepage/ ←http://homepage▲.nifty.com/■■■■■■ 
        |
        +--shop/(画像ファイル等を設置する場所)


スクリプトの変更箇所
  ■cartini.cgiの設定変更
  テキストファイルの扱えるエディタ等でcartini.cgiを開きます。  
  以下の説明を読んであなたの環境に合わせて各種の設定を変更して下さい。

以下の設定例は、スクリプト本文内の記載順で設定項目を説明しています。
尚、設定例の文字の色の意味は以下の通りです。
●黒い文字…「スクリプトの本文」です。
●青い文字…「通常は変更する必要がない」設定です。
●赤い文字…「ユーザーが任意に変更できる」設定です。
●緑の文字…「設定項目の説明文章」です。
●紫の文字…「設定項目の注意事項」です。

1行目 … perlのパスを@nifty用にする(変更の必要はありません!)
#!/usr/local/bin/perl
#┌─────────────────────────────────
#│ Shopping Cart v2.11 (2003/06/03)
#│ Copyright(C) Kent Web 2003
#│ webmaster@kent-web.com
#│ http://www.kent-web.com/
#│
#│ ■ニフティ向け改造バージョン
#│ sendmailの代りにニフティのメールデコードを使用する
#│ 改造版に関するお問い合わせは先は以下の通りです
#│ Edit by 我楽多cgi@nifty
#│ HomePage http://homepage1.nifty.com/mystaff/
#│ E-Mail  season.aki@nifty.com
#└─────────────────────────────────
#   :
# <中間省略>
#   :
#------------#
# 基本設定 #
#------------#

# ライブラリ取り込み
require '
./jcode.pl';
※jcode.plをcart.cgiと同じディレクトリに置く場合はこのままでOKです。(設置事例の指定はこの通りです)

# 管理パスワード(英数字で8文字以内)
$pass = '
0123';
※管理者モードに入室するときに使用するパスワードです、必ず変更して下さい。

# タイトル
$title = "
Shopping Cart";
※掲示板のタイトルを指定します。この指定は掲示板の<title>タグにも用いられますので、
  タイトルに画像を用いる場合でもこの変数は設定して下さい。

# タイトル文字のサイズ
$t_size = '
24px';
※タイトル文字の大きさをポイント数で指定します。

# タイトルの色
$t_color = '
#400000';
※掲示板のタイトル色を指定します。

# タイトルに画像を使用する場合
# → http://から画像のURLを指定
$t_image = '';
タイトルに画像を使用する場合にタイトル画像ファイル(GIF,JPG,PNG等)のURLをhttp://から指定します。
  タイトル画像を指定する例は以下の通りです。
  $t_img = "http://homepage.nifty.com/■■■■/shop/title.gif";
            ■■■■の部分は、あなたのホームページアドレスに合わせて変更します。
             (ファイル名「title.gif」は、タイトル画像ファイル名を指定する)
※タイトル画像を設定したのに表示されない時は?
  @niftyでは、CGIと同じ場所に画像ファイルを置けません。
  この設置事例では、FTPで/homepage/(URLは、http://homepage▲.nifty.com/■■■■/)という
  ディレクトリの中にタイトル用の画像ファイルを転送することを前提に説明しています。
  タイトル用の画像ファイルの転送先URLをhttp://から正しく指定して下さい。
  大抵の場合、タイトル画像ファイルの転送先URLの指定間違いです。


# 文字サイズ
$b_size = '
13px';
※本文の文字の大きさをポイント数で指定します。

# 文字フォント
$face = '
MS UI Gothic, Osaka';
※文字のフォント種別を指定します。

# 戻り先
$home = '
http://homepage▲.nifty.com/■■■■/index.html';
※トップに戻るページ(貴方のトップページ等)のURLアドレスを指定して下さい。
 @niftyの場合、CGIとHTMLファイルのURLが異なりますので、戻り先のページアドレスをhttp://からフルで指定して下さい。
 尚、URL表記の
■■■■■■の部分は、貴方のホームページアドレスに合わせて変更して下さい。

# スクリプトURL
$script = '
./cart.cgi';

# 管理ファイルURL
$admin = '
./cartadm.cgi';
※この設定は、特に変更の必要がありません。

# 商品情報ログファイル
$logfile = '
./data1.cgi';
※この設定は、特に変更の必要がありません。

# 注文情報ログファイル
$ordfile =
'./data2.cgi';
※この設定は、特に変更の必要がありません。

# 在庫管理を行う (0=no 1=yes)
$stock =
1;
※商品の在庫管理機能(売切れチェック)をしゆする場合は、この設定を有効にします。
  商品登録画面で在庫数を登録(又は修正)することがで来ます。

# 在庫ファイル
$stkfile = '
./stock.dat';
※商品在庫数のデータファイル名です。 特に変更の必要はありません。

# 注文情報ログの最大保持数
# → これを超えると古い順に削除します
$max =
100;
※注文情報の記録件数です(data2.cgiというファイルに保存されます)
 あまり大きな数字を指定すると動作が遅くなります(300件以下が推奨)

# カテゴリー分け
# 0 : 行わない(トップメニューは「商品単品」表示)
# 1 : 行う(トップメニューは「商品単品」表示)
# 2 : 行う(トップメニューは「カテゴリー」表示)
$category =
1;
※商品にカテゴリ(分類)情報を付加します。
 「0」に設定するとカテゴリを使用しません。
 「1」に設定すると商品表示欄にカテゴリも表示します。
 「2」に設定すると階層メニュー(カテゴリ一覧→商品表示)となります。


# カテゴリ表示でトップに画像を使う場合 ($category=2; のとき)
# → 例 @cateImg = ('img/a.jpg','img/b.jpg','img/c.jpg','img/d.jpg');
# → 画像を非表示の場合は何も記述しない
#@cateImg = (
#     '
http://homepage▲.nifty.com/■■■■/img/cate01.jpg',
#     'http://homepage▲.nifty.com/■■■■/img/cate02.jpg'',
#     'http://homepage▲.nifty.com/■■■■/img/cate03.jpg''
#     );
※商品にカテゴリ表示(設定2)の時に、カテゴリボタンの横に商品カテゴリのイメージ画像を表示します。
  この機能を使用する場合は、行頭のコメント記号を外してイメージファイルを、http://からURLでフル
  で指定してください。

# カテゴリー分けする場合、内容を指定
# → 商品もこの順にソート表示されます
@cate = (
'今週の特価品', '紳士用', '婦人用', 'その他');
※商品のカテゴリ(分類)を定義します。
  カテゴリは、左から右に向かって0、1、2、3…と順番が付けられます。
 商品バスケットも>カテゴリ>新しい登録、順番で表示されます。


# カテゴリ内の1ページ当り表示件数
$pageView = 10;
※商品のカテゴリ毎の1ページ単位の表示件数を指定します。(ニフティ版では使用しません)

# 画像の表示方式
# 0 : 商品名にリンク
# 1 : 画像を表示
$imgview =
1;
0 : 商品名にリンクを選択した場合は、商品名に画像表示のリンクが張られます。
1 : 画像を表示を選択した場合は、商品の画像が表示されます。

# 商品単品表示の場合バスケットの「行列数」(1ページ当り)
$gview =
2; # 行数
$rview =
2; # 列数
※メニュー画面に商品バスケットを1列にいくつ、1ページに何行表示するのか指定します。
  初期値では、1列に2つ×1ページに2行=1ページに4つの商品を表示する設定になってます

# 商品単品表示の場合バスケットの横幅
$cell =
340;
※商品バスケットを表示するテーブルの横幅をピクセル単位で指定します(大きいほど横幅が長くなります)

# 消費税率
$pertax =
0.05;
※消費税率を指定します。((初期値は、5%です)

# 商品の第1属性
# → セレクトボックスで選択させます
$attr1 = '
サイズ';
※商品を新規登録する時の入力項目名その1を定義します。

  ここで定義した入力項目は商品メニューではセレクトBOXで選択入力となります。

# 商品の第2属性
# → セレクトボックスで選択させます
$attr2 = '
';
※商品を新規登録する時の入力項目名その2を定義します。
  ここで定義した入力項目は商品メニューではセレクトBOXで選択入力となります。

# 検索窓の利用 (0=no 1=yes)
$find =
1;
※1を設定すると商品名検索の入力フォームを上段に表示します。

# リスト表示時の2色を指定
$lin1 = '
#FFFFFF';
$lin2 = '
#F7F7FF';
※買い物カゴの中身を一覧表示する時のリストの背景色の指定です。
  リストを見やすくする為に行の背景色を上記設定の2色で1行毎に変更する仕様となっています。


# bodyタグ
$body = '
<body bgcolor="#F5EEE7" text="#000000">';
※画面の背景や色やテキスト,リンクの色を指定します。
 壁紙を使用したい場合は、以下の様に指定します。
 例>$body = '<body background="http://homepage.nifty.com/■■■■/back.gif" text="black">';
           ■■■■■■の部分は、あなたのホームページアドレスに合わせて変更します。
             (ファイル名「back.gif」は、壁紙の画像ファイル名を指定する)
※壁紙を設定したのに表示されない時は?
  @niftyでは、CGIと同じ場所に画像ファイルを置けません。
  この設置事例では、FTPで/homepage/(URLは、http://homepage▲.nifty.com/■■■■/)という
  ディレクトリの中に壁紙用の画像ファイルを転送することを前提に説明しています。
  壁紙用のGIF画像ファイルの転送先URLをhttp://から正しく指定して下さい。
  大抵の場合、壁紙用GIF画像ファイルの転送先URLの指定間違いです。


# 数量の入力桁数の制限(最大桁数を記述)
# 例: 2 → 項目当り 99個 まで入力可
# 3 → 項目当り 999個 まで入力可
$maxlen =
3;
※注文数の入力桁の制限です。
 常識的に考えて2桁以上の個数の商品注文がありえない場合は「1」を設定します。

# 郵便番号の入力必須 (0=no 1=yes)
$postno =
0;
※注文者の住所入力画面で「郵便番号」を入力必須にする時には「1」に設定します。

# 支払方法の選択 (0=no 1=yes)
$payment =
1;
※注文者の住所入力の時に代金の支払方法を選択させる場合は1にします。

# 支払方法の内容記述 ( $payment=1; のとき )
@payment = (
'代金引換', '銀行振込', '郵便振替');
※代金支払方法の種類を指定します。

# 送料の表示 (0=no 1=yes)
$postage =
1;
※住所入力画面で送料を表示する指定です。

# 送料の内容 ( $sending=1; のとき )
$postage2 = <<'EOM';
<!-- ここから -->
<table border=1 cellspacing=1 bordercolor="green">
<tr><td>本州</td><td>¥1,000</td></tr>
<tr><td>九州、四国、北海道</td><td>¥1,400</td></tr>
<tr><td>離島、沖縄</td><td>¥1,800</td></tr>
</table>(1個口につき)
<!-- ここまで -->

EOM
※住所入力画面で送料の表示内容を定義します(HTMLタグが使えます)

# 配達日時の表示 (0=no 1=yes)
$deliver =
1;
※住所入力画面で「配達希望日時」の入力欄を表示(する/しない)を指定します。

# 配達時間の選択
@deli = (
'午前中', '12-14時', '14-16時', '16-18時', '18-20時', '20-21時');
※住所入力画面で「配達希望日時」の時間帯の選択データを定義します。

# 注文の受理方式
# 1 : メール送信する (メールデコードを使用)
# 2 : ログ記録方式 (手動で注文内容を確認)
$ordertype =
1;
※注文の受理内容をメール送信する指定です。
  ニフティ版では、sendmailが使用できないのでメールデコードを使用します。

# 管理者メールアドレス
$mailto = '
abcxxx@nifty.com';
※注文の受理内容のメールを受信するアドレスを指定します。
  ニフティのメールデコードサービスを利用するのでニフティのメールアドレスを指定して下さい。
  他プロパイダのメールアドレスを指定しても正常に動作しません。

# 注文受理後に表示するページ($ordertype=1の場合に表示する)### 2002/07/07 by Season
$OK_Page = "
http://homepage▲.nifty.com/■■■■/shop/Thanks.html";
※注文の受理内容のメール送信後に表示するページのURLを指定します。
 ↑ニフティのメールデコードでは、メール送信後に表示するページを指定する必要があります。
  配付アーカイブに同梱されている"Thanks.html"というファイルを使用してください。
  もちろん、自分でカスタマイズしたHTMLページを指定することも出来ます。

# ロックファイル機構 (0=no 1=symlink 2=mkdir)
$lockkey =
1;
※ファイルロック機能を使用する場合は「$lockkey = 1;」として下さい。
  symlink関数とmkdir関数が選択できますが、@niftyではsymlink関数が使えますので「1」を選択します。

# ロックファイル
$lockfile = '
./lock/cart.lock';
※設置事例通りであれば、この設定は特に変更の必要がありません。

# テーブル内・項目の色
$tblCol1 = "
#ffffff"; # 文字色
$tblCol2 = "
#666666"; # 下地色

# テーブル内・値の色
$tblCol3 = "
#000000"; # 文字色
$tblCol4 = "
#ffffff"; # 下地色

# メニュー部・ボタンの色
$tblCol5 = "
#400000"; # 文字色
$tblCol6 = "
#F5EEE7"; # 下地色
※カート画面の色デザインの指定です。

# サブメッセージ欄
# → タイトル下部にメッセージを表示します。
$sub_msg = <<'EOM';
<!-- ここから -->
<UL>
<LI>数量を記入し、お好きな商品をカゴに入れてください。
<LI>注文画面で確定処理するまでは注文の受付はされません。
</UL>
<!-- ここまで -->

EOM
※タイトルの下に表示するメッセージを定義します(HTMLタグ使用可)

# 「特定商取引に関する法律」の表示内容
# → 引用: http://www.jadma.org/kisei/jyouhou/seibi.html
$rawfile = '
./raw.txt';
 ↑この設定は特に変更する必要はありません。
※「特定商取引に関する法律」の必要事項を記載したファイル名を指定します。
 表示する内容を変更したい場合は、"raw,txt"、をエディタで編集してアップロードします。
 
 "raw,txt"、の中身は以下の通りです。
<!-- ここから -->
販売業者名
○○○○○○○○○○

責任者氏名
○○ ○○

所在地
○○○○○○○○○○○○○○○○○

電話番号
00-0000-0000

販売価格
商品毎に掲載

商品代金・配送料以外の必要料金
消費税、振込手数料及び代金引換手数料

注文方法
インターネット

支払方法
銀行振込または代金引換。(手数料はお客様負担)

支払期限
銀行振込をご利用の場合には、注文確認メール発信日から10営業日までに
商品代金を弊社指定銀行口座にお振込みください。
当該期日までにお振込みを確認できない場合、契約をキャンセルさせて
いただく場合があります。

販売数量
商品毎に掲載。

配送先
日本国内。

商品のお届け日
支払方法または在庫状況により異なります。

返品・交換
商品が不良品の場合、商品お届け日から
○○日以内に不良商品をご返送
ください(不良商品の返送に係る送料は、お客様負担とさせていただき
ます)。弊社より代替品を配送させていただきます。

保証
商品に係る保証条件については、商品に添付される保証書に定めるところ
によります。
<!-- ここまで -->

※「特定商取引に関する法律」の表示内容を記述します。
  記述内容については、「インターネット通販に関する法律整備について」などをご参考にしてください。


ファイルのアップロード
  スクリプトの変更が完了したら、以下のディレクトリにアップロードして
  各ファイルのパーミッションを下記の通り変更します。

   Root/ ←あなたのルートパス
     |
     +--cgi-bin/
     |       | 
     |       +--shop/(任意のディレクトリ名)
     |           |  cartini.cgi パーミッション[644]
     |           |  admin.cgi  パーミッション[755]
     |           |  cart.cgi   パーミッション[755]
     |           |  data1.cgi   パーミッション[666]
     |           |  data2.cgi   パーミッション[666]
     |           |  stock.dat   パーミッション[666]
     |           |  raw.txt    パーミッション[644]
     |           |  jcode.pl    パーミッション[644]※
     |           |
     |           +--lock/パーミッション[777]
     +--homepage/
           |
           +--shop/(任意のディレクトリ名)
                 Thanks.html (メール送信後の表示ページ)     
                     *.jpg  (商品用の画像ファイル)  

 ※jcode.plはVer2.13以上を使用してください(同梱されています)
 


リンクの方法
  CGIスクリプトの設定が完了したら、以下の様にホームページからリンクを貼って下さい。
  <a href="http://hpcgi.nifty.com/■■■■/shop/cart.cgi">買い物カゴ</a>
  <a href="http://hpcgi.nifty.com/■■■■/shop/admin.cgi">管理者用</a>

  ※URLアドレスの■■■■の部分は、自分の@niftyのURLに読み替えて下さい。
  ※商品の登録・修正・削除は、管理者用画面(admin.cgi)から行います

メール送信後の表示ページの修正について
 配付アーカイブに同梱されているThanks.htmlを使用する場合は、 Thanks.htmlをテキストの扱える
 エディタで開いて以下の例の様に青字赤字の部分を修正してから使用してください。
※URLアドレスの■■■■の部分は、自分の@niftyのURLに合わせて変更して下さい。

<<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" content="text/css">
<STYLE type="text/css">
<!--
body,tr,td,th { font-size:13px; font-family:"MS UI Gothic, Osaka"; }
a:hover { color:#dd0000 }
span { font-family:century }
.tbl {
color: #000000;
padding: 10px;
background-color: #FFFFFF;
border-top: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
border-bottom: 1px solid #C0C0C0;
}
.l { background-color: #666666; color: #ffffff; }
.r { background-color: #ffffff; color: #000000; }
.f { background-color: #F5EEE7 ; color: #400000; }
-->
</STYLE>
<title>Shopping Cart</title></head>
<body bgcolor="#F5EEE7" text="#000000">
<form action="
http://hpcgi.nifty.com/■■■■/shop/cart.cgi" method="POST" target="_blank">
<input type=hidden name=mode value=note>
<input type=hidden name=job value=blank>
<input type=submit value='特定商取引法の表示'></form>
<div align='center'>
<table bgcolor="black"><tr>
<td align=center nowrap><font color="#808080">内容確認</font></td><td></td>
<td align=center nowrap><font color="#808080">住所入力</font></td><td></td>
<td align=center nowrap><font color="#808080">注文確認</font></td><td></td>
<td align=center nowrap><font color="white">確定</font></td>
</tr><tr>
<th width="70"><font color="#808080">●</font></th>
<th><font color="#EEEEEE">→</font></th>
<th width="70"><font color="#808080">●</font></th>
<th><font color="#EEEEEE">→</font>
<th width="70"><font color="#808080">●</font></th>
<th><font color="#EEEEEE">→</font>
<th width="70"><font color="yellow">●</font></th>
</tr></table>
<P>ありがとうございます。注文を受け付けました。

<h3>ご利用ありがとうございました。</h3>
<form action="
http://homepage.▲nifty.com/■■■■/index.html"><input type=submit value='トップページに戻る'></form>
</div>
</body></html>

制限事項について
  ニフティ版のShoppingCartは、ニフティのメールデコードサービスを用いて注文内容のメール送信処理を行ってます。
  つきましては、以下の制限事項がある事にご留意して下さい。
  (1) ブラウザのJavaScriptが無効の場合は、正常にメール送信されません(注文ログは記録されます)
     ニフティ版のShoppingCartは、メールデコードCGIの呼出部分をJavaSvcriptで記述している為です。
     相手方(注文者)のブラウザがJavaScriptを無効にしている場合はタイトルの上に注意メッセージを表示します。

  (2) 送信先メールアドレスには、ニフティのメールアドレス(@nifty.com)以外は指定出来ません。
     # 管理者メールアドレス
      $mailto = '
abcxxx@nifty.com'; ←ここに設定するメールアドレスはニフティのモノを使用して下さい。

  (3) 将来ニフティのメールデコードサービスの仕様変更があった場合は正常な動作は保証出来ません。
     基本的にHTMLから使用するのと同じ方法で動作させてますので大丈夫だと思いますが、ニフティ側が
     メールデコードの仕様を変更したりサービスを中止した場合は、メール送信機能が動作しなくなる恐れ
     がある事を予めご了承下さい。



CGI設置でお困りの方へ、ニフティの自作CGIの代行設置もおまかせ下さい!


CGIのカスタマイズをご希望の方は「カスタマイズサービス」をご利用下さい。