category.php

<?php
    include_once("header.php");
    include('hms/include/config.php');

?>
  <!-- Section -->
  <section class="hero3">
    <a href="./index.php">HOME</a>/<a href="">SHOP</a>
   <?php 
   $idtext=$_GET['viewid'];
      $catslug=mysqli_query($con,"select catname,catslug from category where id='$idtext'");
      $row1=mysqli_fetch_array($catslug);
       ?>
        <h2><?php echo $row1['catname'] ?></h2>
  </section>
  <div class="sel">
    <div class="container">
      <div class="row">
      <?php
      $procat=$row1['catslug'];
$sql=mysqli_query($con,"select * from product where procat='$procat'");

while($row=mysqli_fetch_array($sql))
{ 
?>
        <div class="col-xs-12 col-md-12 col-ds-3 col-lg-3">
          <div class="card bs">
              <img src="hms/images/<?php echo $row['proimg'];?>" class="card-img-top" alt="Image of <?php echo htmlspecialchars($row['proname']); ?>" height="200px">
              <div class="card-body">
                <h5 class="card-title"><?php echo htmlspecialchars($row['proname']); ?>
                </h5>
                <b>Rs. <?php echo $row['proprice'];?></b>
                <a href="desc.php?id=<?php echo $row['id']; ?>"><button>Make Order</button></a>
                <form class="form-submit">
                                       <input type="hidden" class="pname" value="<?php echo $row['proname'];?>">
                                        <input type="hidden" class="pprice" value="<?php echo $row['proprice'];?>">
                                        <input type="hidden" class="pimage" value="<?php echo $row['proimg'];?>">
                                        <input type="hidden" class="pcode" value="<?php echo $row['id'];?>">

                                        <!-- <a href="cart.php?id=<?php echo $row['id']; ?>"><button>Add To Cart</button></a> -->
                                        <!-- <button id="addItem" class="addItem btn-success btn button" style="background-color:green;">Add To Cart</button> -->
                                                                              <div class="alert-message"></div>

                                      </form>
              </div>
          </div>
        </div>
        <!-- <div class="col-xs-12 col-md-12 col-ds-3 col-lg-3">
          <div class="card bs">
              <img src="Images/LycheeRoseStrawberry.jpg" class="card-img-top" alt="..." height="200px">
              <div class="card-body">
                <h5 class="card-title">Litchi Strawberry</h5>
                <b>Rs. 1,100.00</b>
                <a href=""><button>Add To Cart</button></a>
                <a href="./White-Strawberry.php"><button>Make Order</button></a>
              </div>
          </div>
        </div>
        <div class="col-xs-12 col-md-12 col-ds-3 col-lg-3">
          <div class="card bs">
              <img src="Images/LycheeCherryChantilly.jpg" class="card-img-top" alt="..." height="200px">
              <div class="card-body">
                <h5 class="card-title">Litchi Cherry Parfait</h5>
                <b>Rs. 550.00</b>
                <a href=""><button>Add To Cart</button></a>
                <a href="./Litchi-Cherry-Parfait.php"><button>Make Order</button></a>
              </div>
          </div>
        </div>
        <div class="col-xs-12 col-md-12 col-ds-3 col-lg-3">
          <div class="card bs">
              <img src="Images/lycheeCherryChantilly2.jpg" class="card-img-top" alt="..." height="200px">
              <div class="card-body">
                <h5 class="card-title">Litchi Craquelin</h5>
                <b>Rs. 750.00</b>
                <a href=""><button>Add To Cart</button></a>
                <a href="./Litchi-Au-Craquelin.php"><button>Make Order</button></a>
              </div>
          </div>
        </div>-->
        <?php } ?>
      </div>
    </div>
  </div> 
  <?php
    include_once("footer.php");
  ?>
<script>
  $(document).ready(function(){
 $(document).on('click','#addItem',function(e){
e.preventDefault();
// it find the nearest form when we clicking on button
var form=$(this).closest(".form-submit");
var pcode=form.find('.pcode').val();
var pname=form.find('.pname').val();
var pimage=form.find('.pimage').val();

var pprice=form.find('.pprice').val();
//var $this = $(this);
var alertmsg=form.find('.alert-message');
$.ajax({
url:'action.php',
method:'post',
data:{pcode:pcode,pname:pname,pimage:pimage,pprice:pprice},
success:function(response){
  console.log(response);
  alertmsg.html(response);

  // $this.closest('.alert-message').html(response)
  //$(this).closest('.alert-message').html(response);
 //alertmsg.html(response);
  //window.scrollto(0,0);
  load_cart_item_number();
}
});

 });

  load_cart_item_number();
function load_cart_item_number(){
  $.ajax({
url:'action.php',
method:'get',
// cart_item is a parameter pass to the load_cart_item_number()
data:{cartItem:"cart_item"},
success:function(response){

  $("#cart-item").html(response);
  
}
});
}

  });

  $(document).on('click','.addItem',function(e){
  // ...
});

</script>
<script>
$(document).ready(function() {
    // Add to cart
    $(document).on('click', '#addItem', function(e) {
        e.preventDefault();
        var form = $(this).closest(".form-submit");
        var pcode = form.find('.pcode').val();
        var pname = form.find('.pname').val();
        var pimage = form.find('.pimage').val();
        var pprice = form.find('.pprice').val(); // MRP
        var pdiscount = form.find('.pdiscount').val(); // Discounted
        var alertmsg = form.find('.alert-message');

        $.ajax({
            url: 'action.php',
            method: 'POST',
            data: {
                pcode: pcode,
                pname: pname,
                pimage: pimage,
                pprice: pprice,
                pdiscount: pdiscount
            },
            success: function(response) {
                alertmsg.html(response).fadeIn().delay(2000).fadeOut();
                load_cart_item_number();
            }
        });
    });

    // Load cart item count
    function load_cart_item_number() {
        $.ajax({
            url: 'action.php',
            method: 'GET',
            data: { cartItem: "cart_item" },
            success: function(response) {
                $("#cart-item").html(response);
            }
        });
    }

    load_cart_item_number();
});
</script>

<!-- category.php file -->