Web Cart 機能解説

機能解説

基本設定について
商品注文の設定について
送信メールの設定について
カートに入れるボタンの設置について
商品オプションの追加について
SSLの利用について
デザインの変更について

基本設定について

初期設定ファイルの基本設定について紹介します。

商品情報: 商品の識別コード、商品名、価格をそれぞれセットで設定します。識別コードは、商品をカートに入れるボタンを設置する際、商品を識別するための文字列です。識別コードは半角英数字で設定してください。
それぞれ '商品の識別コード' => ['商品名', 価格] という形式で設定します。
なお、商品はいくつでも設定する事ができます。
注文メールの送信先: 商品注文時にメールを送信するアドレスを指定します。
カートのURL: cart.cgi のURLを http:// から指定します。この項目は必ず設定してください。
カートのSSL用URL: cart.cgi のURLを https:// から指定します。SSLを使用する場合に設定してください。（SSLを使用しない場合、空欄のままでOKです。）
Sendmailのパス: 商品注文時にメール送信を行うため、Sendmailのパスを指定します。
カートからの戻り先: 商品一覧ページへのURLを指定します。
ページ更新方法: 商品をカートに入れてもページの更新が行われない場合、0 に設定してみてください。

商品注文の設定について

選択可能な支払方法: 選択可能な支払方法と手数料をコンマ区切りで指定します。代金引換,350 の場合、「代金引換には350円の手数料が必要」という意味になります。
選択可能な配達方法: 選択可能な配達方法を指定します。冊子小包 や メール便 など、配達方法の名前を指定します。また、この項目を指定した場合「選択可能な都道府県」でそれぞれの送料も指定する必要があります。
配達日時の指定: 1 にすると、注文時に配送日時を指定できるようになります。
選択可能な配達時間: 「配達日時の指定」を 1 にしている場合、ここで指定した配送時間が選択できるようになります。
選択可能な都道府県: 選択可能な都道府県と送料をコンマ区切りで指定します。北海道,1260 の場合、「北海道には1260円の送料が必要」という意味になります。また、「選択可能な配達方法」を複数指定している場合、それぞれの送料を「/」で区切ってすべて指定します。※
送料が無料になる商品金額: 商品金額がここで指定した以上になると、送料が無料になります。0 にすると送料が必須になります。

※ 例えば「選択可能な配達方法」に以下の設定を行ったとします。

@{$init->{order_delivery}} = (
  '冊子小包',
  'メール便',
  'EXPACK500',
  '',
  ''
);

この場合、「選択可能な都道府県」を以下のように設定すると

@{$init->{order_pref}} = (
  '北海道,1260/180/500',
  '青森県,1050/160/500',
  '岩手県,1050/160/500',
  '宮城県,1050/160/500',
  '秋田県,1050/160/500',
  ～ 省略 ～
  '熊本県,1050/160/500',
  '大分県,1050/160/500',
  '宮崎県,1050/160/500',
  '鹿児島県,1050/160/500',
  '沖縄県,1260/240/500'
);

北海道への送料は「冊子小包 → 1260円、メール便 → 180円、EXPACK500 → 500円」。青森県への送料は「冊子小包 → 1050円、メール便 → 160円、EXPACK500 → 500円」…。という意味になります。「選択可能な配達方法」が上から順に対応するよう、左から順にスラッシュで区切って指定します。

「どの配達方法を選んでも金額は同じ」という場合でも、すべての送料をそれぞれ指定します。

送信メールの設定について

注文完了時に送信されるメールの内容は、自由に変更する事ができます。送信メールの件名 と送信メールの内容をサイトに合わせて変更してください。

また、メールの送信者名・メールの送信元アドレス・メールに挿入する署名 もそれぞれ、サイトに合わせて設定してください。メールに挿入する署名 は、注文メールの末尾に挿入される文言です。お店の連絡先や簡単な案内などを記載しておくといいでしょう。

カートに入れるボタンの設置について

商品をカートに入れるボタンは、任意のHTMLページに手動で設置します。設置するには以下のHTMLを記述します。

<form action="http://～cart.cgiへのパス～/cart.cgi" method="post">
  <fieldset>
    <legend>商品購入フォーム</legend>
    <input type="hidden" name="mode" value="cart" />
    <input type="hidden" name="work" value="putin" />
    <input type="hidden" name="code" value="商品の識別コード" />
    <input type="hidden" name="amount" value="1" />
    <p><input type="submit" value="カートに入れる" /></p>
  </fieldset>
</form>

http://～cart.cgiへのパス～/cart.cgi の部分は cart.cgi へのパスを、商品の識別コード の部分にはカートに入れさせたい商品の識別コードをそれぞれ指定します。

また、上のコードだけだと「カートに入れる」ボタンが表示されるのみなので、実際はボタンとともに商品画像や説明も記載すると良いでしょう。フォームのHTMLも、ページに合わせてある程度変更する事は可能です。

商品オプションの追加について

商品をカートに入れる際、色やサイズなどを選択して入れる事ができます。

オプション項目を追加するには、商品をカートに入れるフォーム部分にオプション項目コードを追加します。具体的には、カートに入れるボタンがある直前の行に、以下のような内容を記述します。

<p>色：
  <select name="option">
    <option value="">選択してください</option>
    <option value="色：白">色：白</option>
    <option value="色：黒">色：黒</option>
    <option value="色：青">色：青</option>
  </select>
</p>

option タグの value 属性に記述した内容がカートに渡されます。

商品オプションを２つ以上設定したい場合も同じ手順で行います。その際、セレクトボックスの name はすべて option と設定しておきます。具体的には、以下のようになります。

<p>色：
  <select name="option">
    <option value="">選択してください</option>
    <option value="色：白">色：白</option>
    <option value="色：黒">色：黒</option>
    <option value="色：青">色：青</option>
  </select>
</p>
<p>サイズ：
  <select name="option">
    <option value="">選択してください</option>
    <option value="サイズ：Ｌ">サイズ：Ｌ</option>
    <option value="サイズ：Ｍ">サイズ：Ｍ</option>
    <option value="サイズ：Ｓ">サイズ：Ｓ</option>
  </select>
</p>

SSLの利用について

SSL対応サーバーでSSLを利用する場合、初期設定ファイルの『基本設定』にある『カートのSSL用URL』に、cart.cgi のURLを https:// から指定します。具体的には、https://www.xxx.com/cart/cart.cgi のような値です。

これで、お客様情報入力画面でSSLを使用することができます。

デザインの変更について

ショッピングカートを構成しているスキンファイルは、cart/skin/ 内にあります。これらのHTMLファイルを編集すれば、自由にデザインや文言を変更する事が可能です。
スタイルシートの知識があれば、cart/skin/common.css を編集するだけでも、色々なデザインにする事ができます。
「スキンを編集したら文字化けして表示された」「プログラムを編集したら動作しなくなった」という場合、文字コードをUTF-8Nに指定して保存してください。（TeraPadなら、『ファイル』→『文字/改行コード指定保存』で『UTF-8N』を指定します。）

Web Liberty

サイト内検索

目次