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