jCartでカート（買い物カゴ）内のアイテムを削除する際にアラートを出したい場合

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）」リンク、どちらもリンクをクリックした時アラート画面が表示されるようになる。

Related posts: