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">価格 ¥<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 の説明でした。
Javascript Cart というものを作成しました。
既に使い方について説明した記事があります。
Javascript だけで動作する簡易ショッピングカート Javascript Cart | ウェブル
私は今まで PHP ばかり触ってきたので、今回のような Javascript だけっていうのは初めての体験でした。正直なところ、触るのは面倒だったし、PHP でやればいいのに、なんて思ってはいましたが、一日中触ってみて、Javascript にハマッてしまいました。
ですが、Javascript が楽しいという話をしても何も意味がないので、今回は Javascript Cart を作る上で遭遇したバグについてまとめていきたいと思います。ちなみに制作にあたって jQuery を使っていますので、Javascript の話の中に jQuery が普通に出てきますのでよろしくお願いします。
Javascript のデバッグ
Javascript のデバッグは Firebug が便利です。
Firebug を起動して、コンソールを有効にすることでエラーが発生している行などが分かります。
私は Javascript を本格的に触るまでは、適当な場所で alert() して、ここまでの行は問題ないな！なんていうテストをしていました…。
要素内のテキストを取得する text() の IE シリーズでの挙動
jQuery で要素内のテキストを取得することができます。
例えば以下のようなタグがあるとします。
これは、Javascript の方で以下のように書けば、テキストという部分だけを取得することができます。
通常こうすれば、テキストという文字が取得できるとは思うんですが、IE シリーズで実行するとテキスト という、半角スペースが入った値が返ってきます。
とても繊細な処理、例えば文字列と文字列の比較を行う場合、半角スペースが入っていると問題が発生してきますね。
解決策ですが、私の場合は以下のように文字列内の半角スペースを全て除去するようにしています。
1
| hoge.replace(/ /g, ""); |
textarea 内を Javascript や Ajax などで動的に文字列の書き変えを行うと改行コードが消滅する
textarea の中に改行を含めた文章を入れますと、改行コードが全て吹っ飛びます。
その場合の解決策が textarea ごと書き変えるというものがあります。
また、他の方からお聞きしたんですが、textarea に ja を設定すれば良いのではないかという話ですが、試す気力がないのでやっていません。次同じ問題にぶつかったら真っ先に試します。
Cookie の限度
Javascript とは関係のない話になってしまいますが、Cookie にも制限があります。配列にしてデータを入れたとしても、ある程度量が多くなるとエラーでページにアクセスできなくなってしまいます。
解決策としては、Cookie に情報を書き込む段階で20配列程度で、これ以上追加できませんと表示することです。
これくらいですかね。
他にもいろいろとバグがありましたが、わざわざ報告するほどでもないので割愛させていただきます。
誰かの参考になれば幸いです。
普段は PHP ばかり書いていますが、今日は要求があったので Javascript 書いてみました。気分的に jQuery は使いません。
以下の CSS を用意しておきます。
1
2
3
| .rand_item {
display: none;
} |
HTML に .rand_item と付加すればデフォルトで非表示になりますね。
要はこれを Javascript で表示に変更、class を変更してしまえば良いのですよ。
ちなみに、各項目には id で rand_01 と識別番号を付けておく必要がありますよ。
1
2
3
4
5
6
7
8
9
10
11
| <ul>
<li id="rand_01" class="rand_item">テスト</li>
<li id="rand_02" class="rand_item">テスト</li>
<li id="rand_03" class="rand_item">テスト</li>
<li id="rand_04" class="rand_item">テスト</li>
<li id="rand_05" class="rand_item">テスト</li>
<li id="rand_06" class="rand_item">テスト</li>
<li id="rand_07" class="rand_item">テスト</li>
<li id="rand_08" class="rand_item">テスト</li>
<li id="rand_09" class="rand_item">テスト</li>
</ul> |
それで以下が Javascript のコード。
ページを読み込むと自動的に起動して、ランダムに3個表示します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| window.onload=function() {
var randnum = 0;
var exist = new Array();
var count = 0;
var run = 0;
get_rand:
while(run < 3) {
randnum = 1+Math.floor(Math.random()*9);
exist[count] = randnum;
count++;
for(var i = 0, n = exist.length; i < n-1; i++) {
if(randnum == exist[i]) {
continue get_rand;
}
}
document.getElementById('rand_0' + randnum).className = 'rand_item_open';
run++;
}
} |
基本的にコードにコメント書くの好きじゃないのでごめんなさい。
こういうのは裏で function とかにしておいて、そこではコメント盛りだくさんってのが私の趣味というかやり方です。
必要に迫られ物凄い勢いで書きました。
Ktay style の中で WordPress のタグを使います。
かなり力不足なコードですが、Ktai style を使いたい場合、最悪これで道は開けそうです。何かもっと良いコード教えてください。
1
2
3
4
5
6
7
| function noimg($html) {
$html = preg_replace('/(<img\s[^>]*?alt\s*=["\']?)/i', '', $html);
return preg_replace('/(["\']\s\/>?)/i', '', $html);
}
$ks_body = get_the_content();
$ks_body = noimg($ks_body);
echo apply_filters('the_content', $ks_body); |
設置してから写真撮ったので狭くて申し訳ない。
FON って何
FON は世界中で無線 LAN アクセスポイントを共有できるサービスです。自分が FON を無料で公開することによって、自分も他の FON を無料で使えるという画期的なサービスです。機器さえ購入してしまえば日本中の FON が無料で使えると言うのはなかなか良い話です。
機器にはいろいろな種類がある
機器にはいろいろ種類があるので、用途にあったものを購入するのがベストです。ちなみに私が購入したのは以下の機器で、この価格帯ではずば抜けて高機能です。個人的に気に入ってるのは USB で接続するだけでプリンターや HDD が共有できたりする機能。
FON FONERA 2.0n (フォネラ 2.0n) FON機能搭載 無線LANルータ FON2303
今回はいろいろと設定する上で気付いたこと、難しかったこと、気を付けなきゃいけないことをまとめておきましたので、ご参考にどうぞ！
あと日本語の wiki もあるようなので、どんどん参加ですね。
Main Page/ja – FON Wiki Beta
個人情報あれこれ
多分どこかでユーザ名や Web サイトの URL を入力するところがあると思いますが、そこで入力した情報が FON Maps に出てくるので、Web 上での活動名とは区別した情報を入れておくべきだと思います。やっぱり普段の生活と現実の生活は分けるべきだと思う今日この頃。
FON のアクセスポイントには誰でも接続できる
FON のアクセスポイントには FON のユーザーではない人でも誰でも接続ができます。
ただし、FON のユーザーではない人は Google のサービス (Gmail など) しか使えません。
さらに使いたい人は FON のユーザーになってお金を払うか、自分も FON を設置して Linus になってねということだそうですね。以下が詳しいです。
さつまTIPS FONスポットでGmailはFONにログインせずに使えます
家族や友人に簡単にアクセスしてもらいましょう
お友達やご家族にあなたのFONルーターへのアクセス権をプレゼントしましょう。あなたのFONスポットに、ニックネームとパスワードを入力して招待しましょう。
FON スポットにニックネームとパスワードだけで簡単に接続できるようになります。
もちろん普通のルーターとしても使えるので、キーで接続したりしても良いんですが、ネットワークに接続する必要がなかったり、ちょっとインターネットやりたいだけーなんていう場合は、パブリックから接続してしまうのも手です。
以下も目を通してみましょう。
FON 良くある質問とその回答集（ FAQs ） :: 家族で使うには？
30日以上アクセスポイントとして稼働していなかった場合はフリーローミングの権利を失います
30日を過ぎるとフリーローミングの権利を失い、あなたのFONアカウントではFONスポットにログインできなくなります。ただアカウント自体は利用停止中リストに載りますが、FONプロファイルのステータスは’Bill’や’Linus’のままです。
Roaming/ja – FON Wiki Beta
プリンタ共有
ネットワークプリンター (LA FONERA 2.0 情報サイト)
できませんでした。残念です。
