Add to cart using jquery and PHP pdo in shopping cart

See more:

PHP

MySQL

jQuery

HTML5

Hi Team

I have an input as a number and want to add to cart, each time a user clicks it to increase message must be displayed and shopping cart icon must add this value to it as a basket with it. The code has no error just i am struggling to achieve this using jquery and php pdo need help from my existing code to achieve this.

What I have tried:

// html code

<div id="basket-overview" class="navbar-collapse collapse d-none d-lg-<pre lang="HTML">block"><a href="basket.html" class="btn btn-primary navbar-btn">class="fa fa-shopping-cart"><span></span></a></div>

<div id="basket" class="col-lg-9">
              <div class="box">
                <form method="post" action="add_to_cart.php">
                  <h1>Shopping cart</h1>
                  <p class="text-muted">You currently have <span id="cart-count"><?php echo count($_SESSION['cart']); ?></span>
                  <p id="cart-message" class="text-success" style="display: none;"></p>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th colspan="2">Product</th>
                          <th>Quantity</th>
                          <th>Unit price</th>
                          <th>Discount</th>
                          <th colspan="2">Total</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><a href="#"><img src="img/detailsquare.jpg" alt="White Blouse Armani"></a></td>
                          <td><a href="#">White Blouse Armani</a></td>
                          <td>
                            <input type="number" name="product1" value="2" min="1" class="form-control product-quantity">
                          </td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td><a href="#">class="fa fa-trash-o"></a></td>
                        </tr>
                        <tr>
                          <td><a href="#"><img src="img/basketsquare.jpg" alt="Black Blouse Armani"></a></td>
                          <td><a href="#">Black Blouse Armani</a></td>
                          <td>
                          <input type="number" name="product2" value="1" min="1" class="form-control product-quantity">
                          </td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td><a href="#">^__i class="fa fa-trash-o"></a></td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr>
                          <th colspan="5">Total</th>
                          <th colspan="2"></th>
                        </tr>
                      </tfoot>
                    </table>
                  </div>

// jquery logic

<pre>// Listen for form submit event
 $(document).ready(function(){
      $('.add-to-cart-btn').click(function(){
        var product_id = $(this).attr('data-product-id');
        $.ajax({
          url: 'add_to_cart.php',
          method: 'post',
          data: {
            product_id: product_id
          },
          success: function(response){
            $('#cart-count').text(response);
            if(response == 1) {
              $('#cart-message').show().text('1 item added to cart');
              $('#basket-overview').removeClass('d-none');
            }
          }
        });
      });
    });

// php logic

<pre>session_start();

require_once 'dbconn.php';

// add to cart
if(isset($_POST['product_id'])) {
  $product_id = $_POST['product_id'];
  if(isset($_SESSION['cart'][$product_id])) {
    $_SESSION['cart'][$product_id]++;
  } else {
    $_SESSION['cart'][$product_id] = 1;
  }
  echo count($_SESSION['cart']);
  exit;
}
?>