Skip to content
Advertisement

my add to cart and increment and decrement button are not working

i am trying to make an add to cart button and i am not having any errors but the button is not showing anything when i press it as i was testing it with the alert function and the increment and decrement buttons for the quantity are not working either so i think there is a problem with the whole jquery code but i can’t know what is it

<div class="row mt-2">
                           <div class="col-md-3">
                               <input type="hidden" value="{{$products->id}}" class="prod_id">
                               <label for="Quantity"> Quantity</label>
                               <div class="input-group text-center mb-3 " style="width: 110px">
                                   <button class="input-group-text decrement-btn">-</button>
                                   <input type="text" name="quantity " class="form-control qty-input text-center" value="1"/>
                                   <button class="input-group-text increment-btn">+</button>
                               </div>
                           </div>
                           <div class="col-md-9">
                           <br>
                           <button type="button" class="btn btn-success me-3  float start"> Add to wishlist</button>
                           <button type="button" class="btn btn-success me-3 addtoCartbtn float-start"> Add to cart</button>
                           </div>
                       </div>
                    </div>
               </div>
           </div>
           <div class="col-md-12">
               <hr>
               <h3>Description</h3>
               <p class="mt-3">
                   {!! $products->desc!!}
               </p>
           </div>
               </div>
           </div>
       </div>
   </div>
</div>
@endsection

@section('scripts')
   <script>
       $(document).ready(function {

           $('.addtoCartbtn').click(function (e) { 
               e.preventDefault();
               var product_id= $(this).closest('.product_data').find('.prod_id').val();
               var product_qty= $(this).closest('.product_data').find('.qty-input').val();
               alert(product_id);
               alert(product_qty);

           });
           $(".increment-btn").click(function (e) { 
               e.preventDefault();
               var inc_value=$(".qty-input").val();
               var value= parsint(inc_value,10);
               value= isNaN(value) ? '0': value;
               if(value < 10){
                   value++;
                   $(".qty-input").val(value);
               }
           });
           $('.decrement-btn').click(function (e) { 
               e.preventDefault();
               var dec_value= $('.qty-input').val();
               var value= parsint(dec_value,10);
               value= isNaN(value) ? '0': value;
               if(value > 1){
                   value--;
                   $('.qty-input').val(value);
               }
           });
       });

   </script>
@endsection

Advertisement

Answer

Add missing () after function like below:

$(document).ready(function(){
   //Write here
})

Correct spelling for ‘parsint’ to ‘parseInt’.

$(document).ready(function() {

       $('.addtoCartbtn').click(function (e) { 
           e.preventDefault();
           var product_id= $('.prod_id').val();
           var product_qty= $('.qty-input').val();
           alert(product_id);
           alert(product_qty);

       });
       $(".increment-btn").click(function (e) { 
           e.preventDefault();
           var inc_value=$(".qty-input").val();
           var value= parseInt(inc_value,10);
           value= isNaN(value) ? '0': value;
           if(value < 10){
               value++;
               $(".qty-input").val(value);
           }
       });
       $('.decrement-btn').click(function (e) { 
           e.preventDefault();
           var dec_value= $('.qty-input').val();
           var value= parseInt(dec_value,10);
           value= isNaN(value) ? '0': value;
           if(value > 1){
               value--;
               $('.qty-input').val(value);
           }
       });
   });
Advertisement