From 0433bab07882ea2e60a0726bd30ec560fdb39f4a Mon Sep 17 00:00:00 2001
From: Anshul Kansal <anshulkansal89@gmail.com>
Date: Wed, 29 Nov 2023 11:40:32 +0530
Subject: [PATCH] Added the cart option

---
 Customer/cart.html                 | 149 +++++++++++++----------------
 Customer/ssproduct/bread.html      |   8 +-
 Customer/ssproduct/capsicum.html   |   3 +-
 Customer/ssproduct/cart.js         |  88 +++++++++++++++++
 Customer/ssproduct/chili.html      |   3 +-
 Customer/ssproduct/cucumber.html   |   3 +-
 Customer/ssproduct/egg.html        |   3 +-
 Customer/ssproduct/ladyfinger.html |   3 +-
 Customer/ssproduct/milkpow.html    |   3 +-
 Customer/ssproduct/panner.html     |   3 +-
 Customer/ssproduct/rpaper.html     |   3 +-
 Customer/ssproduct/shirt2.html     |   3 +-
 Customer/ssproduct/shirt3.html     |   3 +-
 Customer/ssproduct/shirt4.html     |   3 +-
 Customer/ssproduct/sproduct.html   |   5 +-
 15 files changed, 182 insertions(+), 101 deletions(-)
 create mode 100644 Customer/ssproduct/cart.js

diff --git a/Customer/cart.html b/Customer/cart.html
index 02a9ffa..5584be6 100644
--- a/Customer/cart.html
+++ b/Customer/cart.html
@@ -10,7 +10,8 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
-    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -41,46 +42,7 @@
         <h2>#Read More</h2>
         <p>Read all case studies about our products!!</p>
     </section>
-    <!-- <section id="cart" class="section-p1">
-        <table width="100%">
-            <thead>
-                <tr>
-                    <td>Remove</td>
-                    <td>Image</td>
-                    <td>Product</td>
-                    <td>Price</td>
-                    <td>Quantity</td>
-                    <td>Subtotal</td>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td><a href="#"><i class="far fa-times-circle"></i></a></td>
-                    <td><img src="./img/products/asset 24.jpeg" alt=""></td>
-                    <td>Onion</td>
-                    <td>Rs. 70</td>
-                    <td><input type="number" value="1"></td>
-                    <td>Rs. 70</td>
-                </tr>
-                <tr>
-                    <td><a href="#"><i class="far fa-times-circle"></i></a></td>
-                    <td><img src="./img/products/f1.jpg" alt=""></td>
-                    <td>Cartoon Astronaut T-shirts</td>
-                    <td>Rs. 250</td>
-                    <td><input type="number" value="1"></td>
-                    <td>Rs. 250</td>
-                </tr>
-                <tr>
-                    <td><a href="#"><i class="far fa-times-circle"></i></a></td>
-                    <td><img src="./img/products/asset 16.jpeg" alt=""></td>
-                    <td>Lady Finger</td>
-                    <td>Rs. 40</td>
-                    <td><input type="number" value="1"></td>
-                    <td>Rs. 40</td>
-                </tr>
-            </tbody>
-        </table>
-    </section> -->
+
     <section id="cart" class="section-p1">
         <table width="100%" id="cartTable">
             <!-- Cart content will be dynamically generated here -->
@@ -90,23 +52,21 @@ <h2>#Read More</h2>
         <div id="cupon">
         </div>
         <div id="subtotal">
-            <h3>Cart total</h3>
+            <h3>Cart subtotal</h3>
             <table>
                 <tr>
-                    <td>Cart Subtotal</td>
-                    <td>Rs. 360</td>
-                </tr>
-                <tr>
-                    <td>Shipping</td>
-                    <td>Free</td>
+                    <td><strong>Subtotal</strong></td>
+                    <td id="subtotal">Rs. 0</td>
                 </tr>
+                <!-- Add any other rows for additional costs if needed -->
                 <tr>
                     <td><strong>Total</strong></td>
-                    <td><strong>Rs. 360</strong></td>
+                    <td id="total">Rs. 0</td>
                 </tr>
             </table>
-            <button class="normal" onclick="window.location.href='pay.html'">Proceed to checkout</button>
         </div>
+        <button class="normal" onclick="window.location.href='/Customer/pay.html'">Proceed to checkout</button>
+
     </section>
 
     <footer class="section-p1">
@@ -162,43 +122,62 @@ <h4>Install App</h4>
         </div>
     </footer>
     <script>
+        function calculateTotal() {
+            var cart = JSON.parse(localStorage.getItem('cart')) || [];
+            var total = 0;
+
+            cart.forEach(function (item) {
+                total += item.price * item.quantity;
+            });
+
+            return total;
+        }
+
+        // Function to display cart items on the cart.html page
         function displayCart() {
-        var cart = JSON.parse(localStorage.getItem('cart')) || [];
-        var cartTable = document.getElementById('cartTable');
-
-        // Clear existing table content
-        cartTable.innerHTML = '<thead><tr><td>Remove</td><td>Image</td><td>Product</td><td>Price</td><td>Quantity</td><td>Subtotal</td></tr></thead><tbody>';
-
-        // Loop through cart items and append to the table
-        cart.forEach(function (item) {
-            var row = '<tr>' +
-                '<td><a href="#" onclick="removeItem(\'' + item.name + '\')"><i class="far fa-times-circle"></i></a></td>' +
-                '<td><img src="./img/products/asset 2.jpeg" alt=""></td>' +
-                '<td>' + item.name + '</td>' +
-                '<td>Rs. ' + item.price + '</td>' +
-                '<td><input type="number" value="' + item.quantity + '"></td>' +
-                '<td>Rs. ' + (item.price * item.quantity) + '</td>' +
-                '</tr>';
-            cartTable.innerHTML += row;
-        });
-
-        // Close the table body
-        cartTable.innerHTML += '</tbody>';
-    }
-
-    // Function to remove an item from the cart
-    function removeItem(productName) {
-        var cart = JSON.parse(localStorage.getItem('cart')) || [];
-        var updatedCart = cart.filter(function (item) {
-            return item.name !== productName;
-        });
-
-        localStorage.setItem('cart', JSON.stringify(updatedCart));
+            var cart = JSON.parse(localStorage.getItem('cart')) || [];
+            var cartTable = document.getElementById('cartTable');
+
+            // Clear existing table content
+            cartTable.innerHTML = '<thead><tr><td>Remove</td><td>Product</td><td>Price</td><td>Quantity</td><td>Total</td></tr></thead><tbody>';
+
+            // Loop through cart items and append to the table
+            cart.forEach(function (item) {
+                var row = '<tr>' +
+                    '<td><a href="#" onclick="removeItem(\'' + item.name + '\')"><i class="far fa-times-circle"></i></a></td>' +
+                    '<td>' + item.name + '</td>' +
+                    '<td>Rs. ' + item.price + '</td>' +
+                    '<td><span>' + item.quantity + '</span></td>' +
+                    '<td>Rs. ' + (item.price * item.quantity) + '</td>' +
+                    '</tr>';
+                cartTable.innerHTML += row;
+            });
+
+            // Close the table body
+            cartTable.innerHTML += '</tbody>';
+
+            // Calculate and update subtotal and total
+            var subtotal = calculateTotal();
+            var totalElement = document.getElementById('total');
+            var subtotalElement = document.getElementById('subtotal');
+
+            subtotalElement.textContent = 'Total : Rs. ' + subtotal;
+            totalElement.textContent = 'Total : Rs. ' + subtotal; // If there are additional costs, adjust this accordingly
+        }
+
+        // Function to remove an item from the cart
+        function removeItem(productName) {
+            var cart = JSON.parse(localStorage.getItem('cart')) || [];
+            var updatedCart = cart.filter(function (item) {
+                return item.name !== productName;
+            });
+
+            localStorage.setItem('cart', JSON.stringify(updatedCart));
+            displayCart();
+        }
+
+        // Display the cart when the page loads
         displayCart();
-    }
-
-    // Display the cart when the page loads
-    displayCart();
     </script>
 </body>
 
diff --git a/Customer/ssproduct/bread.html b/Customer/ssproduct/bread.html
index 2f63d71..7abb354 100644
--- a/Customer/ssproduct/bread.html
+++ b/Customer/ssproduct/bread.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -48,7 +49,7 @@ <h6>Britania</h6>
             <h4>White Bread</h4>
             <h2>Rs. 35</h2>
             <input type="number" value="1">
-            <button id="addToCartBtn" class="normal">Add to Cart</button>
+            <button onclick="addToCart('White Bread', 35)" class="normal">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
@@ -106,7 +107,8 @@ <h4>Install App</h4>
             <p>&copy; 2023-Present, Saarthi Team</p>
         </div>
     </footer>
-    <script>
+   
+    <!-- <script>
         document.getElementById('addToCartBtn').addEventListener('click', function () {
         // Get product details
         var productName = 'Britania White Bread';
@@ -142,6 +144,6 @@ <h4>Install App</h4>
         // Display the updated cart on the cart.html page
         displayCart();
     });
-    </script>
+    </script> -->
 </body>
 </html>
\ No newline at end of file
diff --git a/Customer/ssproduct/capsicum.html b/Customer/ssproduct/capsicum.html
index f0ca486..a82a944 100644
--- a/Customer/ssproduct/capsicum.html
+++ b/Customer/ssproduct/capsicum.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -48,7 +49,7 @@ <h6>Vegetable</h6>
             <h4>Capsicum</h4>
             <h2>Rs. 70</h2>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button onclick="addToCart('Capsicum', 70)" class="normal">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
diff --git a/Customer/ssproduct/cart.js b/Customer/ssproduct/cart.js
new file mode 100644
index 0000000..0365a05
--- /dev/null
+++ b/Customer/ssproduct/cart.js
@@ -0,0 +1,88 @@
+// cart.js
+
+function addToCart(productName, productPrice) {
+    // Create a cart item object
+    var cartItem = {
+        name: productName,
+        price: productPrice,
+        quantity: parseInt(document.querySelector('input[type="number"]').value)
+    };
+
+    // Check if the cart already exists in local storage
+    var cart = JSON.parse(localStorage.getItem('cart')) || [];
+
+    // Check if the product is already in the cart
+    var existingProductIndex = cart.findIndex(item => item.name === cartItem.name);
+
+    if (existingProductIndex !== -1) {
+        // If the product is already in the cart, update the quantity
+        cart[existingProductIndex].quantity += cartItem.quantity;
+    } else {
+        // If the product is not in the cart, add it
+        cart.push(cartItem);
+    }
+
+    // Save the updated cart back to local storage
+    localStorage.setItem('cart', JSON.stringify(cart));
+
+    // Optionally, you can update the cart display or show a confirmation message
+    alert('Item added to cart!');
+    // Display the updated cart on the cart.html page
+    displayCart();
+}
+
+// Function to display cart items on the cart.html page
+function displayCart() {
+    var cart = JSON.parse(localStorage.getItem('cart')) || [];
+    var cartTable = document.getElementById('cartTable');
+
+    // Clear existing table content
+    cartTable.innerHTML = '<thead><tr><td>Remove</td><td>Product</td><td>Price</td><td>Quantity</td><td>Total</td></tr></thead><tbody>';
+
+    // Loop through cart items and append to the table
+    cart.forEach(function (item) {
+        var row = '<tr>' +
+            '<td><a href="#" onclick="removeItem(\'' + item.name + '\')"><i class="far fa-times-circle"></i></a></td>' +
+            '<td>' + item.name + '</td>' +
+            '<td>Rs. ' + item.price + '</td>' +
+            '<td><span>' + item.quantity + '</span></td>' + // Change input to span
+            '<td>Rs. ' + (item.price * item.quantity) + '</td>' +
+            '</tr>';
+        cartTable.innerHTML += row;
+    });
+
+    // Close the table body
+    cartTable.innerHTML += '</tbody>';
+}
+
+
+
+// Function to remove an item from the cart
+function removeItem(productName) {
+    var cart = JSON.parse(localStorage.getItem('cart')) || [];
+    var updatedCart = cart.filter(function (item) {
+        return item.name !== productName;
+    });
+
+    localStorage.setItem('cart', JSON.stringify(updatedCart));
+    displayCart();
+}
+
+// Function to update the quantity in the cart
+function updateQuantity(productName, newQuantity) {
+    var cart = JSON.parse(localStorage.getItem('cart')) || [];
+    var updatedCart = cart.map(function (item) {
+        if (item.name === productName) {
+            item.quantity = parseInt(newQuantity);
+        }
+        return item;
+    });
+
+    localStorage.setItem('cart', JSON.stringify(updatedCart));
+
+    // Call displayCart to update the displayed cart
+    displayCart();
+}
+
+// Display the cart when the page loads
+displayCart();
diff --git a/Customer/ssproduct/chili.html b/Customer/ssproduct/chili.html
index 572d6e5..a5c47d4 100644
--- a/Customer/ssproduct/chili.html
+++ b/Customer/ssproduct/chili.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -48,7 +49,7 @@ <h6>Vegetable</h6>
             <h4>Chili</h4>
             <h2>Rs. 40</h2>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button onclick="addToCart('Chili', 40)" class="normal">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
diff --git a/Customer/ssproduct/cucumber.html b/Customer/ssproduct/cucumber.html
index 9139fdb..e989fb2 100644
--- a/Customer/ssproduct/cucumber.html
+++ b/Customer/ssproduct/cucumber.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -48,7 +49,7 @@ <h6>Vegetable</h6>
             <h4>Cucumber</h4>
             <h2>Rs. 20</h2>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button onclick="addToCart('Cucumber', 20)" class="normal">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
diff --git a/Customer/ssproduct/egg.html b/Customer/ssproduct/egg.html
index 2d0edff..fe64001 100644
--- a/Customer/ssproduct/egg.html
+++ b/Customer/ssproduct/egg.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -48,7 +49,7 @@ <h6>Table White</h6>
             <h4>Eggs</h4>
             <h2>Rs. 90</h2>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button onclick="addToCart('Eggs', 90)" class="normal">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
diff --git a/Customer/ssproduct/ladyfinger.html b/Customer/ssproduct/ladyfinger.html
index 906383c..ceb5e4a 100644
--- a/Customer/ssproduct/ladyfinger.html
+++ b/Customer/ssproduct/ladyfinger.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -48,7 +49,7 @@ <h6>Vegetable</h6>
             <h4>Lady Finger</h4>
             <h2>Rs. 40</h2>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button onclick="addToCart('Lady Finger', 40)" class="normal">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
diff --git a/Customer/ssproduct/milkpow.html b/Customer/ssproduct/milkpow.html
index aa21d8a..ef86568 100644
--- a/Customer/ssproduct/milkpow.html
+++ b/Customer/ssproduct/milkpow.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -48,7 +49,7 @@ <h6>Nestle</h6>
             <h4>Milk Powder</h4>
             <h2>Rs. 200</h2>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button onclick="addToCart('Milk Powder', 200)" class="normal">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
diff --git a/Customer/ssproduct/panner.html b/Customer/ssproduct/panner.html
index e4ec4a8..9c31fcb 100644
--- a/Customer/ssproduct/panner.html
+++ b/Customer/ssproduct/panner.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -48,7 +49,7 @@ <h6>Amul</h6>
             <h4>Panner</h4>
             <h2>Rs. 190</h2>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button onclick="addToCart('Panner', 190)" class="normal">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
diff --git a/Customer/ssproduct/rpaper.html b/Customer/ssproduct/rpaper.html
index baeb8ba..df78240 100644
--- a/Customer/ssproduct/rpaper.html
+++ b/Customer/ssproduct/rpaper.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -48,7 +49,7 @@ <h6>Raw</h6>
             <h4>Bubble Gum</h4>
             <h2>Rs. 20</h2>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button onclick="addToCart('Bubble Gum', 20)" class="normal">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
diff --git a/Customer/ssproduct/shirt2.html b/Customer/ssproduct/shirt2.html
index 298b410..6c50ee2 100644
--- a/Customer/ssproduct/shirt2.html
+++ b/Customer/ssproduct/shirt2.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -70,7 +71,7 @@ <h2>Rs. 250</h2>
                 <option>XXL</option>
             </select>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button onclick="addToCart('Green Leafy T-Shirts', 250)" class="normal">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
diff --git a/Customer/ssproduct/shirt3.html b/Customer/ssproduct/shirt3.html
index 01b0359..973141d 100644
--- a/Customer/ssproduct/shirt3.html
+++ b/Customer/ssproduct/shirt3.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -70,7 +71,7 @@ <h2>Rs. 250</h2>
                 <option>XXL</option>
             </select>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button class="normal" onclick="addToCart('Red Rossy T-Shirts', 250)">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
diff --git a/Customer/ssproduct/shirt4.html b/Customer/ssproduct/shirt4.html
index 10c496b..470f66c 100644
--- a/Customer/ssproduct/shirt4.html
+++ b/Customer/ssproduct/shirt4.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -70,7 +71,7 @@ <h2>Rs. 250</h2>
                 <option>XXL</option>
             </select>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button class="normal" onclick="addToCart('Pink Velevt T-Shirts', 250)">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>
diff --git a/Customer/ssproduct/sproduct.html b/Customer/ssproduct/sproduct.html
index 3233799..d514980 100644
--- a/Customer/ssproduct/sproduct.html
+++ b/Customer/ssproduct/sproduct.html
@@ -8,6 +8,7 @@
     <script src="https://kit.fontawesome.com/3bc8e24f41.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
     <link rel="stylesheet" href="/Customer/style.css">
+    <script src="/Customer/ssproduct/cart.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -59,7 +60,7 @@
         </div>
         <div class="single-pro-details">
             <h6>Home / T-Shirts</h6>
-            <h4>Men's Fashion T-Shirts</h4>
+            <h4>Cartoon Astronaut T-Shirts</h4>
             <h2>Rs. 250</h2>
             <select>
                 <option>Select Size</option>
@@ -70,7 +71,7 @@ <h2>Rs. 250</h2>
                 <option>XXL</option>
             </select>
             <input type="number" value="1">
-            <button class="normal">Add to Cart</button>
+            <button class="normal" onclick="addToCart('Cartoon Astronaut T-Shirts', 250)">Add to Cart</button>
             <h4>Product Details</h4>
             <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo ad, optio nostrum vero voluptate cupiditate similique voluptas iusto neque accusantium, corrupti eligendi, eum cum quis culpa adipisci deserunt dicta?</span>
         </div>