Skip to content

Commit

Permalink
Merge pull request #636 from GarimaSingh0109/Payment_Gateway
Browse files Browse the repository at this point in the history 
Payment Gateway Integration #572
  • Loading branch information
@khushi-joshi-05
khushi-joshi-05 authored May 30, 2024
2 parents c3126c6 + 250156f commit 749133e
Show file tree
Hide file tree
Showing 4 changed files with 406 additions and 35 deletions.
57 changes: 45 additions & 12 deletions Html-files/cart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,18 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="shortcut icon" type="image/x-icon" href="./Favicon image/favicon.ico">
<link rel="stylesheet" href="../Css-files/content.css">
<link rel="stylesheet" href="../Css-files/cart.css">



</head>

<body>
<div class="head_container">
<header>
<!-- <nav class="navbar">
<ul id="header-items">
<li><a href="../index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav> -->

<nav>
<div class="navigbar">
<div class="logo">Foodie</div>
Expand All @@ -56,7 +50,33 @@
<h1>C A R T</h1>
</div>
</div>
<div id="couponCode"><p class="text-light bg-secondary p-5">Use coupon code <b>qN6FVAn4</b> for 30% off!</p></div>
<section class="cart-section ">
<div class="cart col-md-8">
<table id="cart-table">
<thead>
<tr>
<th>Item Name</th>
<th>Price</th>
<th>Quantity</th>
<th >Actions</th>
</tr>
</thead>
<tbody id="cart-items">
<!-- Cart items will be inserted here -->
</tbody>
<tfoot>
<tr>
<td>Bill amount</td>
<td>
<div id="cart-total">$0.00</div>
</td>
</tr>
</tfoot>

</table>

</div>
<section class="cart-section">
<div id="couponCode">
<p>Use coupon code <b>qN6FVAn4</b> for 30% off!</p>
Expand All @@ -73,18 +93,31 @@ <h1>C A R T</h1>
</div>



<!-- Input Section For Coupon Code -->


<div class="inputForCoupon col-md-4">



<div class="inputForCoupon">


<label for="couponCodes" id="haveCoupon">Have a Coupon?</label>
<div class="enterCouponCode">
<input type="text" name="inputCode" id="inputCode" placeholder="Enter Coupon Code">
<button id="applyCouponButton">Apply</button>
</div>


<button id="proceed-to-payment" href="Html-files\Payment.html" class="butt">Order Now</button>



<button type="submit" onclick="applyFirstTimeDiscount()" class="butt">Order Now</button>


</div>

</section>
Expand Down Expand Up @@ -168,10 +201,10 @@ <h4>Follow Us</h4>
</footer>


<!-- <script src="../cart.js"></script> -->
<!-- <script src="../cart.js"></script-->
<script src="cart.js">

</script>
</body>

</html>
</html>
156 changes: 133 additions & 23 deletions Html-files/cart.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,81 @@
//CODE FOR TABLE OF ADD TO CART
document.addEventListener('DOMContentLoaded', () => {
loadCartFromLocalStorage();

document.getElementById('cart-items').addEventListener('click', (event) => {
if (event.target.classList.contains('increase-quantity')) {
updateQuantity(event.target, 1);
} else if (event.target.classList.contains('decrease-quantity')) {
updateQuantity(event.target, -1);
}
});
document.addEventListener("DOMContentLoaded", () => {
loadCartFromLocalStorage();

document.getElementById("cart-items").addEventListener("click", (event) => {
if (event.target.classList.contains("increase-quantity")) {
updateQuantity(event.target, 1);
} else if (event.target.classList.contains("decrease-quantity")) {
updateQuantity(event.target, -1);
}
});

document.getElementById("applyCouponButton").addEventListener("click", () => {
applyCoupon();
});
});

function loadCartFromLocalStorage() {
const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
const cartItemsContainer = document.getElementById('cart-items');
cartItemsContainer.innerHTML = ''; // Clear existing items
const cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];
const cartItemsContainer = document.getElementById("cart-items");
cartItemsContainer.innerHTML = ""; // Clear existing items


cartItems.forEach((item) => {
const cartItemRow = document.createElement("tr");
cartItemRow.className = "cart-item";
cartItemRow.setAttribute("data-product-id", item.id);
cartItemRow.setAttribute("data-product-price", item.price);
cartItemRow.innerHTML = `
<td>${item.name}</td>
<td>$${item.price.toFixed(2)}</td>
<td class="quantity">${item.quantity}</td>
<td>
<button class="increase-quantity">+</button>
<button class="decrease-quantity">-</button>
</td>
`;
cartItemsContainer.appendChild(cartItemRow);
});

updateTotal();
}

function updateQuantity(button, change) {
const cartItemRow = button.parentElement.parentElement;
const quantityElement = cartItemRow.querySelector(".quantity");
const newQuantity = parseInt(quantityElement.textContent) + change;
if (newQuantity > 0) {
quantityElement.textContent = newQuantity;
} else {
cartItemRow.remove();
}
updateTotal();
saveCartToLocalStorage();
}

function updateTotal() {
const cartItems = document.querySelectorAll(".cart-item");
let total = 0;
cartItems.forEach((item) => {
const price = parseFloat(item.getAttribute("data-product-price"));
const quantity = parseInt(item.querySelector(".quantity").textContent);
total += price * quantity;
});
document.getElementById("cart-total").textContent = `Total: $${total.toFixed(
2
)}`;
}

function saveCartToLocalStorage() {
const cartItems = [];
document.querySelectorAll(".cart-item").forEach((item) => {
cartItems.push({
id: item.getAttribute("data-product-id"),
price: parseFloat(item.getAttribute("data-product-price")),
quantity: parseInt(item.querySelector(".quantity").textContent),
});
});
localStorage.setItem("cartItems", JSON.stringify(cartItems));

cartItems.forEach(item => {
cartItemsContainer.appendChild(createCartItemElement(item));
Expand Down Expand Up @@ -79,21 +140,69 @@ const generateCouponCode = () => {
couponCode += characters.charAt(Math.floor(Math.random() * characters.length));
}
return couponCode;

}

// Function to generate a random coupon code
const generateCouponCode = () => {
const characters =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let couponCode = "";
for (let i = 0; i < 8; i++) {
couponCode += characters.charAt(
Math.floor(Math.random() * characters.length)
);
}
return couponCode;
};

// Check if it's the user's first order and apply discount
const applyFirstTimeDiscount = () => {
let couponCode = localStorage.getItem('couponCode');
if (!couponCode) {
couponCode = generateCouponCode();
localStorage.setItem('couponCode', couponCode);
}
document.getElementById('couponCode').innerHTML = `Use coupon code <span style="font-weight: bold;"> ${couponCode} </span> for 30% off!`;
alert(`Congratulations! Your coupon code is ${couponCode}. You've received a 30% discount on your first order.`);
}
let couponCode = localStorage.getItem("couponCode");
if (!couponCode) {
couponCode = generateCouponCode();
localStorage.setItem("couponCode", couponCode);
}
document.getElementById(
"couponCode"
).innerHTML = `Use coupon code <span style="font-weight: bold;"> ${couponCode} </span> for 30% off!`;
alert(
`Congratulations! Your coupon code is ${couponCode}. You've received a 30% discount on your first order.`
);
};
window.onload = applyFirstTimeDiscount;

// Function to apply the coupon and display the discounted price
function applyCoupon() {
const couponCode = document.getElementById("inputCode").value;
const storedCouponCode = localStorage.getItem("couponCode");

if (!couponCode) {
alert("Please enter a Coupon Code.");
return;
}

// Input for apply coupon code

if (couponCode === storedCouponCode) {
let total = parseFloat(
document.getElementById("cart-total").textContent.replace("Total: $", "")
);
const discount = total * 0.3;
const discountedTotal = total - discount;

document.getElementById(
"cart-total"
).textContent = `Total: $${discountedTotal.toFixed(2)} (30% off applied)`;
alert("Coupon code applied successfully! You've received a 30% discount.");
} else {
alert("Invalid coupon code. Please try again.");
}
}
document
.getElementById("proceed-to-payment")
.addEventListener("click", function () {
window.location.href = "Payment.html"; // Ensure this path is correct
});

document.getElementById('applyCouponButton').addEventListener('click', function () {
const couponCode = document.getElementById('inputCode').value;
Expand Down Expand Up @@ -145,3 +254,4 @@ function handleEmptyCart(total) {
<a href="./menu.html"><button class="butt">Explore Menu</button></a>`;
}
}

Loading

0 comments on commit 749133e

Please sign in to comment.