CODEWITHSUNDEEP
javascriptjqueryhtml
RonTheOld
RonTheOld

Reputation: 777

Javascript how to update a cart number

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

Upvotes: 1

Views: 2584

Answers (1)

someRandomSerbianGuy
someRandomSerbianGuy

Reputation: 491

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>

Upvotes: 2

Related Questions