My Cart Div is not refreshing until i press refresh symbol

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"><a href="#"><?php echo $v->name;?></a></h2>
                                            </div>
                                            <button class="cancel-btn" style="margin-right:8px;"><a href="cart.php?rem_id=<?php echo $v->id;?>"><i class="fa fa-trash"></a></i></button>
                                          <?php } 

                                    ?>
                                    <div class="shopping-cart-btns">
                                        <a href="cart.php"><button class="main-btn">View Cart</button></a>
                                        <a href="checkout1.php"><button class="primary-btn" style="margin-left:15px;">Checkout <i class="fa fa-arrow-circle-right"></i></button></a>
                                    </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.

It's not clear what you mean by "tried some Java coding", can you exemplify? I woul obviously post an answer if I had one for you. — tripleee, Sep 20 '19 at 06:16
@tripleee i delete java coding just see the above coding and tell me my errors — Areeb Nasir, Sep 20 '19 at 06:17
[Difference between server side and client side programming](https://stackoverflow.com/q/13840429/4202224) — empiric, Sep 20 '19 at 06:18
I assume you tried some javascript not java? I don't think java and php go well together — empiric, Sep 20 '19 at 06:20
@empiric I want to update div with session count without reloading — Areeb Nasir, Sep 20 '19 at 06:22
You cannot refresh your cart with php without reloading the page, your would need JS and ajax for that — empiric, Sep 20 '19 at 06:22
@empiric On behalf of above coding can you tell me the JS and ajax coding please — Areeb Nasir, Sep 20 '19 at 06:23
@tripleee Can you tell me the JS and Ajax coding to refresh it — Areeb Nasir, Sep 20 '19 at 06:25
The solution to this is to use Javascript and Fetch() or something like AJAX, So when you click on a button to increate the cart count you need to pass that data and access it using Fetch or AJAX and then append it — Thanveer Shah, Sep 20 '19 at 06:28

Thanveer Shah · Answer 1 · 2019-09-20T07:03:45.050

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

edited Sep 20 '19 at 07:03

answered Sep 20 '19 at 06:57

Thanveer Shah

3,250
2
15
31

i will try and let you know – Areeb Nasir Sep 20 '19 at 07:05
If it works out then you can accept my answer by clicking on the tick icon – Thanveer Shah Sep 20 '19 at 07:08
How to do this in JavaScript? – AnonymousUser Nov 22 '21 at 05:32
Create a question and share me the link here, I"ll try to answer @AnonymousUser – Thanveer Shah Nov 22 '21 at 18:57
I have reached my question limit. – AnonymousUser Nov 23 '21 at 03:20

My Cart Div is not refreshing until i press refresh symbol

1 Answers1