My Cart Div is not refreshing until i press refresh symbol [closed] - php

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am starting a cart session on my cart page but cart dropdown is not updating with a count until I refresh the page. I just want to update the div without reloading.
I am using foreach but it doesn't work. What should I do now.
<?php
session_start();
require_once("product.php");
?>
<li class="header-cart dropdown default-dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<div class="header-btns-icon">
<i class="fa fa-shopping-cart"></i>
<?php
if(isset($_SESSION['cart'])){
?>
<span class="qty"><?php echo count($_SESSION['cart'])?></span>
<?php
}else{
?>
<span class="qty">0</span>
<?php
}
?>
</div>
<strong class="text-uppercase">My Cart:</strong>
<br>
<span>Shop Now</span>
</a>
<div class="custom-menu">
<div id="shopping-cart">
<div class="shopping-cart-list">
<?php
#$cart = unserialize(serialize($_SESSION['cart']));
$total = 0;
if($cart){
foreach($cart as $k=>$v)
{
$total += $v->price * $v->quantity;
?>
<div class="product product-widget">
<div class="product-thumb">
<img src="<?php echo $v->img;?>" height="50" width="60" alt="">
</div>
<div class="product-body">
<h3 class="product-price"><?php echo $v->price;?> <span class="qty">x1</span></h3>
<h2 class="product-name"><?php echo $v->name;?></h2>
</div>
<button class="cancel-btn" style="margin-right:8px;"><i class="fa fa-trash"></i></button>
<?php }
?>
<div class="shopping-cart-btns">
<button class="main-btn">View Cart</button>
<button class="primary-btn" style="margin-left:15px;">Checkout <i class="fa fa-arrow-circle-right"></i></button>
</div>
<?php
}
else{
echo '<p style="color: red;">No Product is added in your cart</p>';
}
?>
</div>
</div>
</li>
I want to update the cart div when I click on Add to cart.

Answer 1

As you have not provided enough code to work with, I will post the concept and hope you will be able to do it, also comment if you have any more doubts I'm always open to help
So firstly you need to write a function that asynchronously fetches
the data - Which means it fetches the data without having the page to
reload.
So you need to write the PHP code in a PHP file instead of in the HTML page, for example,
cart.php or where ever you have written your query to fetch the count
of the cart from database.
Once you have done that then you need to write an AJAX call to the
button of Add to Cart, So when you click on add to cart, it triggers
the ajax request and fetches the data from the backend which is
passed from your cart.php
for example , write this code inside your add to cart button
fetch("cart.php")
.then(res=>res.json)
.then(res=>{
//You will get the count here and just append it inside the tag where your count is displayed
//For example :
count.innerHTML = res
})
Don't forget to json_encode($count); in the PHP file so that you can receive the data in JSON format