diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..1c62743 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,155 @@ +// Smooth scrolling for anchor links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); + +function addToCart(name, price, quantityId) { + const quantityInput = document.getElementById(quantityId); + const quantity = parseInt(quantityInput.value, 10); + + if (quantity < 1) { + alert("Quantity must be at least 1."); + return; + } + + let cart = JSON.parse(localStorage.getItem('cart')) || {}; + if (cart[name]) { + cart[name].quantity += quantity; + } else { + cart[name] = { + price: price, + quantity: quantity + }; + } + localStorage.setItem('cart', JSON.stringify(cart)); + updateCartCount(); + updateButtonStates(); +} + +function updateCartCount() { + let cart = JSON.parse(localStorage.getItem('cart')) || {}; + let count = Object.values(cart).reduce((sum, item) => sum + item.quantity, 0); + const cartCountElement = document.getElementById('cart-count'); + if (cartCountElement) { + cartCountElement.innerText = count; + } +} + +function updateButtonStates() { + let cart = JSON.parse(localStorage.getItem('cart')) || {}; + const buttons = document.querySelectorAll('.buy-button'); + buttons.forEach(button => { + const productName = button.getAttribute('data-product-name'); + if (cart[productName]) { + button.textContent = 'In the cart'; + button.disabled = true; + } else { + button.textContent = 'Buy'; + button.disabled = false; + } + }); +} + +function renderCart() { + const cartContainer = document.getElementById('cart-container'); + if (!cartContainer) return; + + let cart = JSON.parse(localStorage.getItem('cart')) || {}; + + if (Object.keys(cart).length === 0) { + cartContainer.innerHTML = ` +
+
+

Your cart is currently empty.

+ Continue Shopping +
+
+ `; + return; + } + + let table = ` +
+
+ + + + + + + + + + + + `; + + let grandTotal = 0; + for (const name in cart) { + const item = cart[name]; + const total = item.price * item.quantity; + grandTotal += total; + table += ` + + + + + + + + `; + } + + table += ` + +
ItemPriceQuantityTotal
${name}${item.price.toFixed(2)} + + ${total.toFixed(2)}
+
+
+

Grand Total: ${grandTotal.toFixed(2)}

+ Proceed to Checkout +
+
+
+ `; + cartContainer.innerHTML = table; +} + +function updateQuantity(name, newQuantity) { + let cart = JSON.parse(localStorage.getItem('cart')) || {}; + const quantity = parseInt(newQuantity, 10); + + if (quantity > 0) { + cart[name].quantity = quantity; + } else { + delete cart[name]; + } + localStorage.setItem('cart', JSON.stringify(cart)); + renderCart(); + updateCartCount(); + updateButtonStates(); +} + +function removeFromCart(name) { + let cart = JSON.parse(localStorage.getItem('cart')) || {}; + if (cart[name]) { + delete cart[name]; + } + localStorage.setItem('cart', JSON.stringify(cart)); + renderCart(); + updateCartCount(); + updateButtonStates(); // This is the key change +} + +// Update cart count on page load +document.addEventListener('DOMContentLoaded', () => { + updateCartCount(); + updateButtonStates(); + renderCart(); // To render cart on cart page +}); diff --git a/cart.php b/cart.php index ce570ba..25c30f6 100644 --- a/cart.php +++ b/cart.php @@ -99,105 +99,6 @@ - + diff --git a/checkout.php b/checkout.php index 579089d..8d187d3 100644 --- a/checkout.php +++ b/checkout.php @@ -83,8 +83,8 @@

Checkout

-
-
+
+
Payment Details
@@ -112,6 +112,20 @@
+
+
+
+
Order Summary
+
    + +
+
+
Total:
+
+
+
+
+
@@ -128,7 +142,42 @@ let count = Object.values(cart).reduce((sum, item) => sum + item.quantity, 0); document.getElementById('cart-count').innerText = count; } - document.addEventListener('DOMContentLoaded', updateCartCount); + + function renderOrderSummary() { + const summaryList = document.getElementById('order-summary-list'); + const grandTotalEl = document.getElementById('grand-total'); + let cart = JSON.parse(localStorage.getItem('cart')) || {}; + let grandTotal = 0; + + summaryList.innerHTML = ''; // Clear existing items + + if (Object.keys(cart).length === 0) { + summaryList.innerHTML = '
  • Your cart is empty.
    • '; + grandTotalEl.innerText = '$0.00'; + return; + } + + for (const name in cart) { + const item = cart[name]; + const total = item.price * item.quantity; + grandTotal += total; + const listItem = document.createElement('li'); + listItem.className = 'list-group-item d-flex justify-content-between align-items-center'; + listItem.style.backgroundColor = 'transparent'; + listItem.innerHTML = ` + ${item.quantity} x ${name} + ${total.toFixed(2)} + `; + summaryList.appendChild(listItem); + } + + grandTotalEl.innerText = `${grandTotal.toFixed(2)}`; + } + + document.addEventListener('DOMContentLoaded', () => { + updateCartCount(); + renderOrderSummary(); + }); document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); diff --git a/index.php b/index.php index b723315..8724584 100644 --- a/index.php +++ b/index.php @@ -35,12 +35,19 @@ } .hero { - background: linear-gradient(rgba(66, 76, 59, 0.7), rgba(66, 76, 59, 0.7)), url('https://m.media-amazon.com/images/I/41LmVVgTulL.jpg') no-repeat center center; + background: url('https://m.media-amazon.com/images/I/41LmVVgTulL.jpg') no-repeat center center; background-size: cover; padding: 6rem 0; color: #f2eae2; } + .hero .hero-text-container { + background-color: rgba(66, 76, 59, 0.7); + display: inline-block; + padding: 2rem; + border-radius: 0.5rem; + } + .hero h1, .hero .lead { text-shadow: 1px 1px 3px rgba(0,0,0,0.6); } @@ -117,8 +124,10 @@
    -

    Welcome to The Cozy Corner Cafe

    -

    Where every cup is a warm hug.

    +
    +

    Welcome to The Cozy Corner Cafe

    +

    Where every cup is a warm hug.

    +
    View Our Menu
    @@ -137,7 +146,7 @@

    $3.00

    - +
    @@ -152,7 +161,7 @@

    $4.50

    - +
    @@ -167,7 +176,7 @@

    $3.50

    - +
    @@ -222,48 +231,7 @@ - + \ No newline at end of file