admin/34812-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.1

Browse Source
This commit is contained in:
Flatlogic Bot 2025-10-08 18:57:38 +00:00
parent 550bb1828d
commit d0a4408695
4 changed files with 224 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
assets/js/main.js Normal file
View 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
View File

@ -99,105 +99,6 @@
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<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>
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>

55
checkout.php
View File

@ -83,8 +83,8 @@
<main class="container py-5">
<h1 class="text-center mb-5">Checkout</h1>
<div class="row">
<div class="col-md-8 mx-auto">
<div class="row g-5">
<div class="col-md-7">
<div class="card" style="background-color: var(--surface-color);">
<div class="card-body">
<h5 class="card-title mb-4">Payment Details</h5>
@ -112,6 +112,20 @@
</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>
</main>
@ -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 = '<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) {
e.preventDefault();

60
index.php
View File

@ -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 @@
<main>
<section id="home" class="hero text-center">
<div class="container">
<div class="hero-text-container">
<h1 class="display-3">Welcome to The Cozy Corner Cafe</h1>
<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>
</div>
</section>
@ -137,7 +146,7 @@
<p class="card-text fw-bold">$3.00</p>
<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">
<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>
@ -152,7 +161,7 @@
<p class="card-text fw-bold">$4.50</p>
<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">
<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>
@ -167,7 +176,7 @@
<p class="card-text fw-bold">$3.50</p>
<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">
<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>
@ -222,48 +231,7 @@
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<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>
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>