Обновление корзины покупок с чистыми js ajax и php

Question

Я боролся с этим уже несколько дней, и после просмотра и прочтения некоторых уроков до сих пор не могу понять, как обновить мою корзину с помощью ajax (используя чистый js). Я был бы очень признателен за помощь.

У меня есть четыре продукта, отображаемые на одной странице с кнопкой «Добавить в корзину», и я хотел бы передать их в корзину без загрузки всей страницы. Продукты отображаются из базы данных MySQL.

Вот мой php, смешанный с html (название файла 'shop. php')

<?php
        $query = "SELECT * FROM cards ORDER BY id ASC";
        $result = $conn->query($query);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
        ?>
    <form>
        <div class="shop-pic-container">
            <div class="container">
                <span class="pic-side"> (Back) </span>
                <div class="vertical-line">
                    <img src="<?php echo $row['img_back_url']; ?>" alt="<?php echo $row['img_back_alt']; ?>">
                </div>
            </div>
            <div class="container">
                <span class="pic-side"> (Front) </span>
                <div class="vertical-line">
                    <img src="<?php echo $row['img_front_url']; ?>" alt="<?php echo $row['img_front_alt']; ?>">
                </div>
            </div>
            <div class="description-wrapper">
                <ul class="list-container">
                    <li class="card-description-title"><?php echo $row['product']; ?></li>
                    <li class="no-style-li"><span class="card-dimmensions">105 x 148 mm (4&frac18; × 5&frac78; in)</span></li>
                    <li class="card-description-price">Price: £ <?php echo $row['price']; ?>
                </ul>
                <span class="no-style-li"><input class="quantity" type="number" name="quantity" value="1" min="1" max="<?php echo $row['quantity']; ?>"></span>
                <input type="hidden" name="id" value="<?php echo $row['id']; ?>">
                <input type="hidden" name="hidden_photo" value="<?php echo $row['img_front_url']; ?>">
                <input type="hidden" name="hidden_photo_alt" value="<?php echo $row['img_front_alt']; ?>">
                <input type="hidden" name="hidden_name" value="<?php echo $row['product']; ?>">
                <input type="hidden" name="hidden_price" value="<?php echo $row['price']; ?>">
                <input type="hidden" name="hidden_quantity" value="<?php echo $row['quantity']; ?>">
                <input class="add-to-basket" type="submit" name="add" value="Add to basket">
                <div id="paypal-button-container" class="paypal-buy-it-now"></div>
            </div>
        </div> 
    </form>

PHP код, который я взял из онлайн-учебника. (Это отдельная страница, называемая «корзиной покупок». php '):

 if (isset($_POST['add'])) {
    if (isset($_SESSION['shop'])) {
        $item_array_id = array_column($_SESSION['shop'],'product_id');
        if (!in_array($_GET['id'], $item_array_id)) {
            $count = count($_SESSION['shop']);
            $item_array = array(
                'product_id' => $_GET['id'],
                'item_photo' => $_POST['hidden_photo'],
                'item_photo_alt' => $_POST['hidden_photo_alt'],
                'item_name' => $_POST['hidden_name'],
                'product_price' => $_POST['hidden_price'],
                'item_quantity' => $_POST['quantity'],
            );
            $_SESSION['shop'][$count] = $item_array;
            echo '<script>window.location="shopping-cart.php"</script>';
        }                 
    } else {
            $item_array = array(
                'product_id' => $_GET['id'],
                'item_photo' => $_POST['hidden_photo'],
                'item_photo_alt' => $_POST['hidden_photo_alt'],
                'item_name' => $_POST['hidden_name'],
                'product_price' => $_POST['hidden_price'],
                'item_quantity' => $_POST['quantity'],
            );
            $_SESSION['shop'][0] = $item_array;
    }    
}
if (isset($_GET['action'])) {
    if ($_GET['action'] == 'delete') {
        foreach ($_SESSION['shop'] as $keys => $value) {
            if ($value['product_id'] == $_GET['id']) {
                unset($_SESSION['shop'][$keys]);
                if (empty($_SESSION['shop'])) {
                echo '<script>window.location="shopping-cart.php"</script>';
                }    
            }
        }
    }
}
?>

И мой код JS, который, как мне кажется, работает, когда я go на вкладке Сеть в Firefox Dev Tools, в Params я вижу все значения, передаваемые на сервер. Я просто не знаю, как их обработать в PHP, чтобы отобразить их в корзине. php. (На данный момент код JS находится внизу страницы 'shop. php'.)

<script>
    "use strict";
    const form = document.querySelectorAll("form");
    form.forEach((frm) => {
      frm.addEventListener("submit", addProduct);
    });
    function addProduct(event) {
      event.preventDefault();
      const formElements = document.querySelectorAll("input[type='hidden']");
      const formData = new FormData();
      formElements.forEach((element) => {
        formData.append(element.name, element.value);
      });
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "shopping-cart.php");
      xhr.send(formData);
    }
    </script>