Okay, let's add a shopping cart feature using an offcanvas component. The Coffee Corner

Welcome to The Coffee Corner

Your daily dose of happiness, one cup at a time.

View Our Menu

Our Menu

Espresso

Rich and intense shot of coffee.

$3.00

Cappuccino

Espresso with steamed milk and foam.

$4.50

Latte

Creamy espresso with plenty of steamed milk.

$4.50

Blueberry Muffin

Freshly baked muffin bursting with blueberries.

$2.50

Croissant

Buttery and flaky, perfect with coffee.

$3.00

About Us

Founded in 2024, The Coffee Corner started with a simple idea: create a cozy space where people can enjoy high-quality coffee and connect with each other. We source the finest beans and train our baristas to craft the perfect cup every time.

Come visit us and experience the warmth and aroma of freshly brewed coffee.

Contact Us

123 Coffee Lane, Brewville, CA 90210

(555) 123-4567

info@thecoffeecorner.com

Your cart is empty.

Total: $0.00

body { padding-top: 56px; /* Adjust based on navbar height */ } .hero-section { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1920x600.png?text=Coffee+Background') no-repeat center center; background-size: cover; height: 60vh; /* Adjust height as needed */ min-height: 400px; } .card-img-top { height: 200px; /* Fixed height for card images */ object-fit: cover; /* Ensure images cover the area well */ } #menu .card { transition: transform 0.2s ease-in-out; } #menu .card:hover { transform: scale(1.03); } /* Cart Item Styling */ .cart-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #eee; } .cart-item-details { flex-grow: 1; margin-right: 1rem; } .cart-item-name { font-weight: bold; } .cart-item-price { color: #6c757d; /* text-muted */ } .cart-item-quantity input { width: 50px; text-align: center; } .cart-item-remove { color: #dc3545; /* danger */ cursor: pointer; } .cart-item-remove:hover { color: #a0212e; } /* Ensure offcanvas body allows scrolling if content overflows */ .offcanvas-body { display: flex; flex-direction: column; height: 100%; /* Make sure body takes full height */ } #cart-items-container { flex-grow: 1; /* Allow this container to grow and potentially scroll */ overflow-y: auto; /* Add scrollbar if needed */ margin-bottom: 1rem; /* Space before the total/checkout */ } console.log("Coffee shop script loaded."); // Cart state let cart = []; // DOM Elements const cartCountElement = document.getElementById('cart-count'); const cartItemsContainer = document.getElementById('cart-items-container'); const cartTotalElement = document.getElementById('cart-total'); const cartEmptyMessage = document.getElementById('cart-empty-message'); const checkoutButton = document.getElementById('checkout-btn'); const addToCartButtons = document.querySelectorAll('.add-to-cart-btn'); // --- Functions --- // Function to render cart items in the offcanvas function renderCart() { // Clear current cart items cartItemsContainer.innerHTML = ''; if (cart.length === 0) { cartItemsContainer.appendChild(cartEmptyMessage); cartEmptyMessage.style.display = 'block'; checkoutButton.disabled = true; } else { cartEmptyMessage.style.display = 'none'; checkoutButton.disabled = false; cart.forEach((item, index) => { const cartItemElement = document.createElement('div'); cartItemElement.classList.add('cart-item'); cartItemElement.innerHTML = `

${item.name}

$${item.price.toFixed(2)}

`; cartItemsContainer.appendChild(cartItemElement); }); // Add event listeners for quantity changes and remove buttons cartItemsContainer.querySelectorAll('.quantity-input').forEach(input => { input.addEventListener('change', handleQuantityChange); }); cartItemsContainer.querySelectorAll('.cart-item-remove').forEach(button => { button.addEventListener('click', handleRemoveItem); }); } updateCartTotal(); updateCartCount(); } // Function to update the total price function updateCartTotal() { const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0); cartTotalElement.textContent = `$${total.toFixed(2)}`; } // Function to update the cart count badge in the navbar function updateCartCount() { const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); cartCountElement.textContent = totalItems; } // Function to add an item to the cart function addItemToCart(name, price) { const existingItemIndex = cart.findIndex(item => item.name === name); if (existingItemIndex > -1) { // Item already in cart, increase quantity cart[existingItemIndex].quantity += 1; } else { // Add new item to cart cart.push({ name, price, quantity: 1 }); } renderCart(); // Optionally: Show a confirmation or open the cart // const cartOffcanvas = new bootstrap.Offcanvas(document.getElementById('shoppingCart')); // cartOffcanvas.show(); } // Function to handle quantity change function handleQuantityChange(event) { const index = parseInt(event.target.dataset.index); const newQuantity = parseInt(event.target.value); if (newQuantity >= 1) { cart[index].quantity = newQuantity; } else { // If quantity is less than 1, remove the item or reset to 1 // For simplicity, let's reset to 1 if they try to go below cart[index].quantity = 1; event.target.value = 1; // Update the input field visually } renderCart(); // Re-render to update total and counts } // Function to handle removing an item function handleRemoveItem(event) { // Find the button that was clicked, even if the icon inside was the target const button = event.target.closest('.cart-item-remove'); if (button) { const index = parseInt(button.dataset.index); cart.splice(index, 1); // Remove item from array renderCart(); // Re-render the cart } } // --- Event Listeners --- // Add to Cart button clicks addToCartButtons.forEach(button => { button.addEventListener('click', (event) => { const name = event.target.dataset.name; const price = parseFloat(event.target.dataset.price); addItemToCart(name, price); }); }); // Checkout button click (placeholder) checkoutButton.addEventListener('click', () => { alert(`Checkout clicked! Total: ${cartTotalElement.textContent}\nCart contents:\n${JSON.stringify(cart, null, 2)}`); // In a real application, this would redirect to a checkout page or process payment. // Optionally clear the cart after checkout: // cart = []; // renderCart(); }); // Smooth scrolling for anchor links (optional) document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { const targetId = this.getAttribute('href'); // Ensure it's a valid internal link before preventing default if (targetId && targetId.startsWith('#') && targetId.length > 1) { const targetElement = document.querySelector(targetId); if (targetElement) { e.preventDefault(); // Adjust for fixed navbar height const navbarHeight = document.querySelector('.navbar').offsetHeight; const elementPosition = targetElement.getBoundingClientRect().top; const offsetPosition = elementPosition + window.pageYOffset - navbarHeight; window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); } } }); }); // --- Initial Render --- renderCart(); // Initial render of the cart on page load (it will be empty)