Javascript how to update a cart number

Question

Hi guys I've decide to try and build an E-commerce site rather then use Shopify just so i can get some experience, however i am trying to get it so that the cart quantity updates when the user clicks "Add to cart" but i cant seem to get it to work

HTML:

<a class="shopping-cart" href="#"><i class="fa fa-shopping-cart"></i> <span class="cart-badge">1</span></a>
<button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button>

Javascript:

   $(document).ready(function(){
       $(".accordion-heading").click(function(){  
             if($(".accordion-body").is(':visible')){  /* check the condition accordion-body is visible or not */
                 $(".accordion-body").slideUp(200);  /*if content is visible then close accordion-body with specific time duration */
               $(".plusminus").text('+')    /* add plus sign */
           }
           else{
               $(this).next(".accordion-body").slideDown(200); /*if content not visible then 
                                                                                                           show the accordion-body */
               $(this).children(".plusminus").text('-');  /* add minus sign */
           }
       });
   });

I tried to use this example to help me : Link So I just want it so that then the user clicks the "Add to cart" it will update the counter i have built

But javascript isn't my strongest skill set so any help would be amazing , thanks

Answer 1

I added variable to keep track on how many items you have in cart. Every time you click add to cart button variable goes +1 and changes displayed text in span.

 var currentItems = 0; $(document).ready(function(){ $(".accordion-heading").click(function(){ if($(".accordion-body").is(':visible')){ /* check the condition accordion-body is visible or not */ $(".accordion-body").slideUp(200); /*if content is visible then close accordion-body with specific time duration */ $(".plusminus").text('+') /* add plus sign */ } else{ $(this).next(".accordion-body").slideDown(200); /*if content not visible then show the accordion-body */ $(this).children(".plusminus").text('-'); /* add minus sign */ } }); $(".add-to-cart").click(function(){ currentItems++; $(".cart-badge").text(currentItems); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="shopping-cart" href="#"><i class="fa fa-shopping-cart"></i> <span class="cart-badge">0</span></a> <button class="addcart btn btn-danger add-to-cart" type="button">Add to cart</button>