SQL見るだけクエリ#144 PHPとJavaScriptを使用してAJAXで非同期にカートの中身を再計算・表示する方法

PHPとJavaScriptを使用してAJAXで非同期にカートの中身を再計算・表示する方法を解説してみようと思います。

この記事を読むと（約5分）
PHPとJavaScriptを使用してAJAXで非同期にカートの中身を再計算・表示する方法をイメージできます。

以下のコード例では、送信側では配列データをJSON形式に変換し、HTTPリクエストのボディに埋め込んで送信しています。受信側では受け取ったJSONデータを解析し、商品IDと数量を表示しています。

ただし、上記の例ではエラーハンドリングやセキュリティ対策などは考慮されていません。実際のシステムでは、エラーチェックやバリデーション、認証、データベースへの書き込みなどの処理を適切に実装する必要があります。また、セキュリティ上の懸念がある場合は、HTTPSの使用や認証情報の暗号化などの対策も検討してください。

以下のコードは、商品の一覧とショッピングカート機能を持つウェブページです。

ユーザーが商品をカートに追加すると、カートの内容がセッションに保存されます。
ユーザーが商品をカートから削除すると、セッションから該当する商品が削除されます。
カートの合計金額は、セッション内の商品の価格を合計して計算されます。
ウェブページは、商品一覧とカートの内容を表示します。
ユーザーが商品をカートに追加したり削除したりすると、ページのリロードなしにカートの内容が更新されます（Ajaxを使用）。

これにより、ユーザーは商品を選択し、カートに追加・削除することができます。
カートの内容と合計金額はリアルタイムに表示され、ユーザーエクスペリエンスが向上します。

session_start();

// 商品一覧
$products = [
    ['id' => 1, 'name' => '商品A', 'price' => 1000],
    ['id' => 2, 'name' => '商品B', 'price' => 2000],
    ['id' => 3, 'name' => '商品C', 'price' => 1500]
];

// カートに商品を追加
if (isset($_POST['product_id'])) {
    $productId = $_POST['product_id'];
    $product = getProductById($productId);

    if ($product) {
        addToCart($product);
    }
}

// カートから商品を削除
if (isset($_POST['remove_id'])) {
    $removeId = $_POST['remove_id'];
    removeFromCart($removeId);
}

// カートの合計金額を計算
function calculateTotalPrice()
{
    $total = 0;

    if (isset($_SESSION['cart'])) {
        foreach ($_SESSION['cart'] as $item) {
            $total += $item['price'];
        }
    }

    return $total;
}

// 商品IDで商品を取得
function getProductById($id)
{
    global $products;

    foreach ($products as $product) {
        if ($product['id'] == $id) {
            return $product;
        }
    }

    return null;
}

// カートに商品を追加
function addToCart($product)
{
    if (!isset($_SESSION['cart'])) {
        $_SESSION['cart'] = [];
    }

    $_SESSION['cart'][] = $product;
}

// カートから商品を削除
function removeFromCart($id)
{
    if (isset($_SESSION['cart'])) {
        foreach ($_SESSION['cart'] as $index => $item) {
            if ($item['id'] == $id) {
                unset($_SESSION['cart'][$index]);
                break;
            }
        }
        $_SESSION['cart'] = array_values($_SESSION['cart']);
    }
}

// カートのアイテムを表示するHTMLを生成
function renderCartItems()
{
    $html = '';

    if (isset($_SESSION['cart'])) {
        foreach ($_SESSION['cart'] as $item) {
            $html .= '<li>';
            $html .= $item['name'] . ' - ' . $item['price'] . '円';
            $html .= '<button class="remove-from-cart" data-remove-id="' . $item['id'] . '">削除</button>';
            $html .= '</li>';
        }
    } else {
        $html .= '<li>カートは空です</li>';
    }

    return $html;
}


// JSONレスポンスを返す
function jsonResponse($data)
{
    header('Content-Type: application/json');
    echo json_encode($data);
    exit();
}

// Ajaxリクエストかどうかをチェック
function isAjaxRequest()
{
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
}

// カートの内容と合計金額を返す
function getCartData()
{
    $cartItems = renderCartItems();
    $totalPrice = calculateTotalPrice();

    return [
        'cartItems' => $cartItems,
        'totalPrice' => $totalPrice
    ];
}

// カートに商品を追加または削除した後、Ajaxリクエストかどうかをチェックしてレスポンスを返す
if (isset($_POST['product_id']) || isset($_POST['remove_id'])) {
    $cartData = getCartData();

    if (isAjaxRequest()) {
        jsonResponse($cartData);
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>商品一覧</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // カートに追加ボタンがクリックされた時の処理
            $(document).on('click', '.add-to-cart', function() {
                var productId = $(this).data('product-id');
                $.ajax({
                    type: 'POST',
                    url: 'index.php',
                    data: {product_id: productId},
                    dataType: 'json',
                    success: function(response) {
                        // カートの内容を更新
                        $('.cart-items').html(response.cartItems);
                        $('.total-price').html(response.totalPrice);
                    }
                });
            });

            // カートから削除ボタンがクリックされた時の処理
            $(document).on('click', '.remove-from-cart', function() {
                var removeId = $(this).data('remove-id');
                $.ajax({
                    type: 'POST',
                    url: 'index.php',
                    data: {remove_id: removeId},
                    dataType: 'json',
                    success: function(response) {
                        // カートの内容を更新
                        $('.cart-items').html(response.cartItems);
                        $('.total-price').html(response.totalPrice);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h1>商品一覧</h1>

    <ul>
        <?php foreach ($products as $product): ?>
            <li>
                <?php echo $product['name']; ?> - <?php echo $product['price']; ?>円
                <button class="add-to-cart" data-product-id="<?php echo $product['id']; ?>">カートに入れる</button>
            </li>
        <?php endforeach; ?>
    </ul>

    <h2>カート</h2>
    <div>
        <h3>カートの中身</h3>
        <ul class="cart-items">
            <?php echo renderCartItems(); ?>
        </ul>

        <h3>合計金額: <span class="total-price"><?php echo calculateTotalPrice(); ?></span>円</h3>
    </div>
</body>
</html>