Javascript だけで簡易ショッピングカートを作りました。
jQuery と Javascript そのモノの勉強になりました。

Javascript Cart – Download

誰でも利用できるかは分かりませんが、もし使えたら使ってください。

簡単な仕組み

Cookie に最大20個まで商品を入れることができます。
HTML を書く段階で、決まった書き方をしていただければタグの中の情報を自動的に取得してショッピングカート機能を実装できます。
IE6、IE7、IE8、Safari、Firefox、Mac 版 Firefox、Google Chrome で動作確認済みです。

以下、使い方を説明していきます。

商品を用意する

以下は解説用にコードを最も短くしています。実際は table タグなどに summary などを指定したり、内容を増やしてコンテンツを充実させるなどしていただいても問題ありません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<table id="cart_1">
   <tr>
      <th><img src="img/cake_1.jpg" alt="cake" /></th>
      <td>
         <h2>テスト商品名</h2>
         <p class="price">価格  &yen;<span>2,625</span></p>
         <dl>
            <dt class="item_1">テスト項目</dt>
            <dd>
               <select>
                  <option value="テスト1">テスト1</option>
                  <option value="テスト2">テスト2</option>
                  <option value="テスト3">テスト3</option>
               </select>
            </dd>
            <dt class="item_2">数量</dt>
            <dd>
               <select>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
               </select>
            </dd>
         </dl>
         <input type="button" tabindex="1" class="cart_button" value="買い物カゴに入れる" />
      </td>
   </tr>
</table>

#1 table に id 名を付ける

table に id 名を付けます。id 名は固定で cart_x としていきます。x は数値で連番が好ましいです。制限はありません。
また、id に cart_x と付いていれば table でなくても構いません。
ひとつずつの商品は、この id で区切って行きます。

#5 h2 に商品名を入れる

#cart_x 内の h2 内のテキストを商品名として取得します。
そのため、#cart_x 内では h2 要素を1回までの使用に制限してください。

先程の HTML であれば、商品名は「テスト商品名」です。

#6 p.price span 内に価格を書く

#cart_x 内の p.price の中の span 内に入っている数値を価格として取得します。
価格はひとつしか設定できません。また、#cart_x 内では span 要素の使用を一回に制限してください。

先程の HTML であれば、価格は ¥2,625 です。

#8 定義リストに項目名と項目を設定する

dt に class 名 item_x を付けます。
こちらにはいくつか制限があります。

• item_x の x は1から始まり、連番である必要があります。item_1 の次の値は item_2 、item_9 の次の値は item_10 です。この連番に最大値制限はありません。
• 項目の中で、どこでも良いので必ず数量という項目を作ります。数量によって金額の計算を行います。

dt のテキストを項目名、dd のオプションを選択項目として取得します。

#25 買い物カゴに入れるボタン

input type=”button” に対して、class 名 cart_button を付けます。
また、tabindex には最初の1行目で設定した cart_x の x の部分を入れます。
先程の HTML であれば 1 を入れる必要がありますので、1 が入っています。

ちなみに、class=”cart_button” と tabindex=”x” が付いていれば、input type=”button” である必要はありません。

ショッピングカートの設定

ショッピングカートの中身を確認する方法です。

中身を確認するだけで良い場合

以下のようなタグをどこかに書いてください。

1

<input type="button" id="print_cookie" value="Cookie Open" />

こちらをクリックしますと、アラートによって簡単なカートの中身が確認できます。ただし、金額の計算や文字列の処理などは行われません。かなり簡易的なものです。

中身を確認しつつ削除などをする場合

以下のようなタグをどこかに書いてください。

1
2
3
4

<h2>カートの状況</h2>
<div id="cart_body">
</div>
<p><input type="button" id="cookie_all_clear" value="カートを空にする" /></p>

h2 を書いておくと分かりやすくなります。
#cart_body の中に以下のように定義リストで商品が表示されます。

1
2
3
4
5
6

<dl>
  <dt class="clearfix"><input type="button" value="削除" id="cart_0_delete" class="delete_button">テスト商品1</dt>
  <dd>項目1:テスト1 / 数量:1 / ¥2,625</dd>
  <dt class="clearfix"><input type="button" value="削除" id="cart_0_delete" class="delete_button">テスト商品2</dt>
  <dd>項目1:テスト1 / 数量:1 / ¥2,625</dd>
</dl>

HTML の中に input タグがあるかと思いますが、こちらをクリックしますと、その商品をカートから削除することが可能です。

商品を注文する

簡易ショッピングカートなので注文はメールで行います。
以下の textarea タグなどを書いて起きますと、簡単にメール用の書式にした注文内容を挿入することが可能です。ユーザには、メール用書式の注文内容を確認してもらい、送信ボタンを押すことで注文をしてもらいます。

1
2
3
4
5
6
7

<div id="textcart">
   <form method="post" action="./">
      <div id="textarea"><textarea rows="10" cols="5">カートの内容をテキストベースで挿入してください。</textarea></div>
      <input type="button" id="cart_text" value="カートの内容をテキストベースで挿入" />
      <input type="submit" value="注文をする" />
   </form>
</div>

#cart_text と #textarea、それらの親である #textcart は必須です。
カートの内容をテキストベースで挿入をクリックしますと、textarea の部分にテキストベースの注文内容が挿入されます。
こちらをお好きなように加工するなり送信するなりしてください。

以上、Javascript Cart の説明でした。