Обновление изменённой с помощью ajax сессии

Столкнулся с такой проблемой: в index.php передаю через ajax запрос данные в CreatingShoppingCart.php, где они записываются в сессию. Но на index.php эта сессия как была пустой, так и остаётся и чтобы она обновилась нужно перезапустить страницу, чего я хочу избежать.

index.php

<?php
session_start();
?>

<div class="box-container">
    <?php
    $sql1 = "SELECT * FROM coffee ORDER BY id ASC";
    
        if($result = $conn->query($sql1))
        {
            foreach($result as $row)
            {
                ?>
                    <div class="box" >
                            <img src="<?php echo $row["LinkToThePicture"]; ?>" alt="">
                            <h3><?php echo $row["Name"]; ?></h3>
                            <div class="price"><?php echo $row["Price"];?>₽</div>
                            <input type="submit" id="add-btn" name="add_to_cart" class="btn qwe" value="Добавить в карзину"/>
                            <input type="hidden" class="id" name="id" value="<?php echo $row["id"];?>"/>
                            <input type="hidden" class="linkToThePicture" name="linkToThePicture" value="<?php echo $row["LinkToThePicture"];?>"/>
                            <input type="hidden" class="name" name="name" value="<?php echo $row["Name"];?>"/>
                            <input type="hidden" class="price" name="price" value="<?php echo $row["Price"];?>"/>
                            <input type="hidden" class="quantity" name="quantity" value="1"/>
                    </div>
                <?php
            }
        }
    ?>
</div>
<script>
$(document).ready(function(){
    $('.qwe').on('click', function(){
    var id = $(this).closest('.box').find('input.id').val();
    var linkToThePicture = $(this).closest('.box').find('input.linkToThePicture').val();
    var name = $(this).closest('.box').find('input.name').val();
    var price = $(this).closest('.box').find('input.price').val();
    var quantity = $(this).closest('.box').find('input.quantity').val();
    console.log(id, linkToThePicture, name, price, quantity)
        $.ajax({
        method: "POST",
        url: "CreatingShoppingCart.php",
        data: { id: id, linkToThePicture: linkToThePicture, name: name, price: price, quantity: quantity }
        })
        
        .done(function(msg) {
        alert( "Data Saved: " + msg );
        });
    })
});

</script>

'тут просто вывод масива этой сессии приложил для наглядности'
<div class="cart-items-container">
    <?php       
    if(count($_SESSION["shopping_cart"]) > 0)
    {
        $total = 0;     
        foreach($_SESSION["shopping_cart"] as $key => $product)
        {
        ?>      
            <div class="cart-item">                         
                <a class="fas fa-times" href="index.php?action=delete&id=<?php echo $product["id"]; ?>">
                </a>
                <a class="fas fa-plus" href="index.php?action=plus&id=<?php echo $product["id"]; ?>">
                </a>
                <a class="fas fa-minus" href="index.php?action=minus&id=<?php echo $product["id"]; ?>">
                </a>
                <img src="<?php echo $product["linkToThePicture"];?>" alt="">
                <div class="content">
                    <h3><?php echo $product["name"];?></h3>
                    <div class="price"><?php echo $product["price"];?>₽</div>
                    <h3><?php echo $product["quantity"];?></h3>
                </div>              
            </div>
            <hr>
        <?php
        $total = $total + ($product["quantity"]*$product["price"]);         
        }
        ?><div class="price"><?php echo number_format($total, 2); ?>₽</div>
        <a href="#popup" class="btn">Оформить заказ</a><?php
        show();
    }
    else
    {   
        ?><h3>Карзина пуста</h3><?php
        show();
    }   
    ?>
</div>

CreatingShoppingCart.php

<?php

$id = $_POST["id"];
$name = $_POST["name"];
$price = $_POST["price"];
$quantity = $_POST["quantity"];
$linkToThePicture = $_POST["linkToThePicture"];

echo "$id $linkToThePicture $name $price $quantity<br>";

session_start();
$product_ids = array();
    
    
        if(isset($_SESSION['shopping_cart']))
        {
            $count = count($_SESSION['shopping_cart']);
            $product_ids = array_column($_SESSION['shopping_cart'], 'id');
            
            if (!in_array($_POST["id"],$product_ids))
            {
                $_SESSION['shopping_cart'][$count] = array
                (
                    'id' => $_POST["id"],
                    'name' => $_POST["name"],
                    'price' => $_POST["price"],
                    'quantity' => $_POST["quantity"],
                    'linkToThePicture' => $_POST["linkToThePicture"]
                );
            }
            
            else 
            {
                for($i = 0; $i < count($product_ids); $i++)
                {
                    if ($product_ids[$i] == $id)
                    {
                        $_SESSION['shopping_cart'][$i]['quantity'] += $quantity;
                    }
                }
            }
        }   
        else    
        {
            $_SESSION['shopping_cart'][0] = array
            (
                'id' => $id,
                'name' => $name,
                'price' => $price,
                'quantity' => $quantity,
                'linkToThePicture' => $linkToThePicture
            );
        }
 ?>

Ответы (1 шт):

Автор решения: pgood

В качестве быстрого решения предлагаю следующее: перенесите код, который формирует корзину из index.php в файл CreatingShoppingCart.php. При загрузке страницы и при каждом изменении корзины обращайтесь к нему по аякс и полученный HTML вставляйте на страницу. Хотя я бы сделал API, которое возвращает корзину в виде JSON, а для фронта задействовал фреймворк вроде VueJs.

→ Ссылка