Title: How to get shopping cart quantity count to not require page reload or different page to count
Tags: javascript;php;jquery;html;ajax
Question: I have the following code that gives me a live count of how many items are in the shopping cart. The issue is, it is not so live. I have to either reload the page or go to another page for it to show.

The way I have this is the following code is in a page called loadProducts.php. On every page I use the required function to load it.

```//Shopping Cart Quantity Count

    if(isset($_SESSION['shopping_cart']) &amp;&amp; is_array($_SESSION['shopping_cart'])) {
    $totalquantity = 0;
    foreach($_SESSION['shopping_cart'] AS $product) {
        $totalquantity = $totalquantity + $product['quantity'];
    }
   }


 else {
       $totalquantity = 0;
  }
```

I do not know much about Ajax at all, but I'm thinking this may be the only option. 

Does it matter that this is ran with a session? How could I get a live element of this to show up on every page so when I click add to cart, it happens right then?

Comment: As you called it, you need AJAX. And even with AJAX you'll need additional techniques to keep a truly live count at all times, stuff like meteor, long polling or even setInterval


Here is another answer: You need to add one more line to update the DOM element that displays the shopping cart number.

For example if your shopping cart element is as follows:

```<button class="shopping-cart"&gt;Shopping cart (<span class="cart-item-count"&gt;0</span&gt;)</button&gt;
```

Then you just need to update it with:

```$('.cart-item-count').text($totalquantity);
```

In your javascript code on the success response where you send a request to add a product to your cart. You must be using an ajax request already in your page to add products to cart, since if that were not the case you would be submitting a page already and reloading thus the count already updating.


Here is another answer: Assuming you are familiar with jQuery you can use the following jquery ajax call:

```$("#yourFormId").submit(function(){ // or if you have link use click function

    var jqxhr = $.ajax({
        method: "POST", // or GET
        url: "Your PHP to find count", 
        data: // any request param you want to send to your PHP

    })
    .done(function(content) {

        // display the count
    })
    .fail( function(xhr, textStatus) {
        // display the error
    })
    .always(function() {

    });


});
```

Comment for this answer: When it comes to a code that will be repeated, you either have to create a template and let every page to use the template or create an include file and include to your pages. I'm not familiar with PHP, I advice to look into the API.
Comment for this answer: Where would I house this though? I have my current count file required on every page? Would I have to put this in every page or where?

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:06/01/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><php><jquery><html><ajax>', 'Title': 'How to get shopping cart quantity count to not require page reload or different page to count', 'ViewCount': 2256, 'id': 30581618, 'user_AboutMe': None, 'user_AccountId': 6255680.0, 'user_DisplayName': 'Paul', 'user_Reputation': 3248.0, 'user_Views': 515.0, 'user_id': 4864334.0}}