1.1
This commit is contained in:
Flatlogic Bot
parent
550bb1828d
commit
d0a4408695
155
assets/js/main.js
Normal file
155
assets/js/main.js
Normal file
@ -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 = `
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<p>Your cart is currently empty.</p>
|
||||||
|
<a href="index.php#menu" class="btn btn-primary">Continue Shopping</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let table = `
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Item</th>
|
||||||
|
<th>Price</th>
|
||||||
|
<th>Quantity</th>
|
||||||
|
<th>Total</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
`;
|
||||||
|
|
||||||
|
let grandTotal = 0;
|
||||||
|
for (const name in cart) {
|
||||||
|
const item = cart[name];
|
||||||
|
const total = item.price * item.quantity;
|
||||||
|
grandTotal += total;
|
||||||
|
table += `
|
||||||
|
<tr>
|
||||||
|
<td>${name}</td>
|
||||||
|
<td>${item.price.toFixed(2)}</td>
|
||||||
|
<td>
|
||||||
|
<input type="number" class="form-control" value="${item.quantity}" min="1" style="width: 70px;" onchange="updateQuantity('${name}', this.value)">
|
||||||
|
</td>
|
||||||
|
<td id="total-${name}">${total.toFixed(2)}</td>
|
||||||
|
<td><button class="btn btn-danger btn-sm" onclick="removeFromCart('${name}')">Remove</button></td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
table += `
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<hr>
|
||||||
|
<div class="text-end">
|
||||||
|
<h4 id="grand-total">Grand Total: ${grandTotal.toFixed(2)}</h4>
|
||||||
|
<a href="checkout.php" class="btn btn-primary">Proceed to Checkout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
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
|
||||||
|
});
|
||||||
101
cart.php
101
cart.php
@ -99,105 +99,6 @@
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
<script>
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
renderCart();
|
|
||||||
updateCartCount();
|
|
||||||
});
|
|
||||||
|
|
||||||
function renderCart() {
|
|
||||||
const cartContainer = document.getElementById('cart-container');
|
|
||||||
let cart = JSON.parse(localStorage.getItem('cart')) || {};
|
|
||||||
|
|
||||||
if (Object.keys(cart).length === 0) {
|
|
||||||
cartContainer.innerHTML = `
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body text-center">
|
|
||||||
<p>Your cart is currently empty.</p>
|
|
||||||
<a href="index.php#menu" class="btn btn-primary">Continue Shopping</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let table = `
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
|
||||||
<table class="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Item</th>
|
|
||||||
<th>Price</th>
|
|
||||||
<th>Quantity</th>
|
|
||||||
<th>Total</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
`;
|
|
||||||
|
|
||||||
let grandTotal = 0;
|
|
||||||
for (const name in cart) {
|
|
||||||
const item = cart[name];
|
|
||||||
const total = item.price * item.quantity;
|
|
||||||
grandTotal += total;
|
|
||||||
table += `
|
|
||||||
<tr>
|
|
||||||
<td>${name}</td>
|
|
||||||
<td>${item.price.toFixed(2)}</td>
|
|
||||||
<td>
|
|
||||||
<input type="number" class="form-control" value="${item.quantity}" min="1" style="width: 70px;" onchange="updateQuantity('${name}', this.value)">
|
|
||||||
</td>
|
|
||||||
<td id="total-${name}">${total.toFixed(2)}</td>
|
|
||||||
<td><button class="btn btn-danger btn-sm" onclick="removeFromCart('${name}')">Remove</button></td>
|
|
||||||
</tr>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
table += `
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<hr>
|
|
||||||
<div class="text-end">
|
|
||||||
<h4 id="grand-total">Grand Total: ${grandTotal.toFixed(2)}</h4>
|
|
||||||
<a href="checkout.php" class="btn btn-primary">Proceed to Checkout</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
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(); // Re-render the cart to reflect changes
|
|
||||||
updateCartCount();
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeFromCart(name) {
|
|
||||||
let cart = JSON.parse(localStorage.getItem('cart')) || {};
|
|
||||||
if (cart[name]) {
|
|
||||||
delete cart[name];
|
|
||||||
}
|
|
||||||
localStorage.setItem('cart', JSON.stringify(cart));
|
|
||||||
renderCart();
|
|
||||||
updateCartCount();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCartCount() {
|
|
||||||
let cart = JSON.parse(localStorage.getItem('cart')) || {};
|
|
||||||
let count = Object.values(cart).reduce((sum, item) => sum + item.quantity, 0);
|
|
||||||
document.getElementById('cart-count').innerText = count;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
55
checkout.php
55
checkout.php
@ -83,8 +83,8 @@
|
|||||||
|
|
||||||
<main class="container py-5">
|
<main class="container py-5">
|
||||||
<h1 class="text-center mb-5">Checkout</h1>
|
<h1 class="text-center mb-5">Checkout</h1>
|
||||||
<div class="row">
|
<div class="row g-5">
|
||||||
<div class="col-md-8 mx-auto">
|
<div class="col-md-7">
|
||||||
<div class="card" style="background-color: var(--surface-color);">
|
<div class="card" style="background-color: var(--surface-color);">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title mb-4">Payment Details</h5>
|
<h5 class="card-title mb-4">Payment Details</h5>
|
||||||
@ -112,6 +112,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-md-5">
|
||||||
|
<div class="card" style="background-color: var(--surface-color);">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title mb-4">Order Summary</h5>
|
||||||
|
<ul class="list-group list-group-flush" id="order-summary-list">
|
||||||
|
<!-- Cart items will be injected here by JS -->
|
||||||
|
</ul>
|
||||||
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
||||||
|
<h5 class="mb-0">Total:</h5>
|
||||||
|
<h5 class="mb-0" id="grand-total"></h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
@ -128,7 +142,42 @@
|
|||||||
let count = Object.values(cart).reduce((sum, item) => sum + item.quantity, 0);
|
let count = Object.values(cart).reduce((sum, item) => sum + item.quantity, 0);
|
||||||
document.getElementById('cart-count').innerText = count;
|
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 = '<li class="list-group-item" style="background-color: transparent;">Your cart is empty.</li>';
|
||||||
|
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 = `
|
||||||
|
<span>${item.quantity} x ${name}</span>
|
||||||
|
<span>${total.toFixed(2)}</span>
|
||||||
|
`;
|
||||||
|
summaryList.appendChild(listItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
grandTotalEl.innerText = `${grandTotal.toFixed(2)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
updateCartCount();
|
||||||
|
renderOrderSummary();
|
||||||
|
});
|
||||||
|
|
||||||
document.querySelector('form').addEventListener('submit', function(e) {
|
document.querySelector('form').addEventListener('submit', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|||||||
60
index.php
60
index.php
@ -35,12 +35,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.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;
|
background-size: cover;
|
||||||
padding: 6rem 0;
|
padding: 6rem 0;
|
||||||
color: #f2eae2;
|
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 {
|
.hero h1, .hero .lead {
|
||||||
text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
|
text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
|
||||||
}
|
}
|
||||||
@ -117,8 +124,10 @@
|
|||||||
<main>
|
<main>
|
||||||
<section id="home" class="hero text-center">
|
<section id="home" class="hero text-center">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<div class="hero-text-container">
|
||||||
<h1 class="display-3">Welcome to The Cozy Corner Cafe</h1>
|
<h1 class="display-3">Welcome to The Cozy Corner Cafe</h1>
|
||||||
<p class="lead">Where every cup is a warm hug.</p>
|
<p class="lead">Where every cup is a warm hug.</p>
|
||||||
|
</div>
|
||||||
<a href="#menu" class="btn btn-primary btn-lg">View Our Menu</a>
|
<a href="#menu" class="btn btn-primary btn-lg">View Our Menu</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -137,7 +146,7 @@
|
|||||||
<p class="card-text fw-bold">$3.00</p>
|
<p class="card-text fw-bold">$3.00</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<input type="number" class="form-control" value="1" min="1" style="width: 60px;" id="quantity-espresso">
|
<input type="number" class="form-control" value="1" min="1" style="width: 60px;" id="quantity-espresso">
|
||||||
<button class="btn btn-primary" onclick="addToCart('Classic Espresso', 3.00, 'quantity-espresso')">Buy</button>
|
<button class="btn btn-primary buy-button" data-product-name="Classic Espresso" onclick="addToCart('Classic Espresso', 3.00, 'quantity-espresso')">Buy</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -152,7 +161,7 @@
|
|||||||
<p class="card-text fw-bold">$4.50</p>
|
<p class="card-text fw-bold">$4.50</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<input type="number" class="form-control" value="1" min="1" style="width: 60px;" id="quantity-latte">
|
<input type="number" class="form-control" value="1" min="1" style="width: 60px;" id="quantity-latte">
|
||||||
<button class="btn btn-primary" onclick="addToCart('Creamy Latte', 4.50, 'quantity-latte')">Buy</button>
|
<button class="btn btn-primary buy-button" data-product-name="Creamy Latte" onclick="addToCart('Creamy Latte', 4.50, 'quantity-latte')">Buy</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -167,7 +176,7 @@
|
|||||||
<p class="card-text fw-bold">$3.50</p>
|
<p class="card-text fw-bold">$3.50</p>
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<input type="number" class="form-control" value="1" min="1" style="width: 60px;" id="quantity-croissant">
|
<input type="number" class="form-control" value="1" min="1" style="width: 60px;" id="quantity-croissant">
|
||||||
<button class="btn btn-primary" onclick="addToCart('Chocolate Croissant', 3.50, 'quantity-croissant')">Buy</button>
|
<button class="btn btn-primary buy-button" data-product-name="Chocolate Croissant" onclick="addToCart('Chocolate Croissant', 3.50, 'quantity-croissant')">Buy</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -222,48 +231,7 @@
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
<script>
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||||
// 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();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCartCount() {
|
|
||||||
let cart = JSON.parse(localStorage.getItem('cart')) || {};
|
|
||||||
let count = Object.values(cart).reduce((sum, item) => sum + item.quantity, 0);
|
|
||||||
document.getElementById('cart-count').innerText = count;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update cart count on page load
|
|
||||||
document.addEventListener('DOMContentLoaded', updateCartCount);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user