PHP+jQueryでつくられたDB不要の簡単カート、jCartは、シンプルで導入も簡単だが、シンプルだけに省略された機能がある。
そのひとつがカートに入れた商品を削除する時。
カートの金額欄の下に表示されている削除ボタンの処理(config.phpの設定によりremove)
ユーザーに優しい設計にしたい場合、ボタンを押したらそのまま削除ではなく、確認用のアラートを表示したいところ。
普通に考えれば、リンクタグ(a href=〜)の場合はonclick=’return confirm()を追加してあげればいいので、
/jcart/jcart.php 内にある
echo tab(7) . "<a class='jcart-remove' href='?jcartRemove={$item['id']}'>{$config['text']['removeLink']}</a>n";
の部分にonclickを追加し、
echo tab(7) . "<a class='jcart-remove' href='?jcartRemove={$item['id']}' onclick='return confirm("削除してよろしいですか?")'>{$config['text']['removeLink']}</ a>n";
のようにすればいいのだが、ajax環境下ではページ推移が無いこともあり、この方法では失敗しアラート画面が表示されることなく削除されてしまう。
jCartでカート(買い物カゴ)内のアイテムを削除する際にアラートを出したい場合は、以下の方法。
/jcart/js/jcart.js 内にある
function remove(link) { // Get the query string of the link that was clicked var queryString = link.attr('href'); queryString = queryString.split('='); // The id of the item to remove var removeId = queryString[1]; // Remove the item and refresh cart display $.ajax({ type: 'GET', data: { "jcartRemove": removeId, "jcartIsCheckout": isCheckout } }); }
にconfirm(‘削除してよろしいですか?’)を追加し、返り値がtrueだったら、削除を実行するようにする。
function remove(link) { // Get the query string of the link that was clicked var queryString = link.attr('href'); queryString = queryString.split('='); // The id of the item to remove var removeId = queryString[1]; if(confirm('削除してよろしいですか?')){ // Remove the item and refresh cart display $.ajax({ type: 'GET', data: { "jcartRemove": removeId, "jcartIsCheckout": isCheckout } }); } }
これにより、商品選択ページの右に表示されるカートの「削除(remove)」リンク、およびcheckout.phpページのアイテム表示の「削除(remove)」リンク、どちらもリンクをクリックした時アラート画面が表示されるようになる。