Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
CyberMage7 committed Nov 29, 2023
2 parents e741816 + 6004e75 commit 395cb7d
Show file tree
Hide file tree
Showing 15 changed files with 182 additions and 101 deletions.
149 changes: 64 additions & 85 deletions Customer/cart.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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 -->
Expand All @@ -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">
Expand Down Expand Up @@ -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>

Expand Down
8 changes: 5 additions & 3 deletions Customer/ssproduct/bread.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -142,6 +144,6 @@ <h4>Install App</h4>
// Display the updated cart on the cart.html page
displayCart();
});
</script>
</script> -->
</body>
</html>
3 changes: 2 additions & 1 deletion Customer/ssproduct/capsicum.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
88 changes: 88 additions & 0 deletions Customer/ssproduct/cart.js
Original file line number Diff line number Diff line change
@@ -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();
3 changes: 2 additions & 1 deletion Customer/ssproduct/chili.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion Customer/ssproduct/cucumber.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion Customer/ssproduct/egg.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion Customer/ssproduct/ladyfinger.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 395cb7d

Please sign in to comment.