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

 

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク