add to cart in shopping cart using php and jquery

Question

Hi Team

I am unable to achieve this logic, where an input field as a number in the form, and when i refreshed its defaults to 2 and 1 than 0. When it's increased, it must be updated to the shopping cart and display a message to alert the user. I need some help to achieve this and I'm using php pdo, jquery, and HTML.

 

// php code

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;
}
?>

// jquery logic

// 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');
            }
          }
        });
      });
    });

// html code

<div id="basket-overview" class="navbar-collapse collapse d-none d-lg-<pre lang="HTML">block"><a " 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 ><img src="img/detailsquare.jpg" alt="White Blouse Armani"></a></td>
                          <td><a >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 ><i class="fa fa-trash-o"></i></a></td>
                        </tr>
                        <tr>
                          <td><a ><img src="img/basketsquare.jpg" alt="Black Blouse Armani"></a></td>
                          <td><a>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 ><i class="fa fa-trash-o"></i></a></td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr>
                          <th colspan="5">Total</th>
                          <th colspan="2"></th>
                        </tr>
                      </tfoot>
                    </table>
                  </div>