EduProjects/techstore
1
0
Fork 0
mirror of https://codeberg.org/ThisIsMiseryy/techstore synced 2026-05-14 12:42:04 +00:00
Code Issues Packages Projects Releases 3 Wiki Activity

Merge implementazione carrello

Browse Source
This commit is contained in:
Andrea Fiorencis
2026-04-02 12:31:46 +02:00
parent 54a6b1963d 9faf18850e
commit 717a212c84
5 changed files with 216 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/cart.js
+58
View File
@@ -0,0 +1,58 @@
function addToCart(productId, productName, price) {
// Leggi il carrello dal cookie
let cart = [];
const cookieValue = document.cookie.split('; ').find(row => row.startsWith('cart='));
if (cookieValue) {
cart = JSON.parse(decodeURIComponent(cookieValue.split('=')[1]));
}
// Controlla se il prodotto è già nel carrello
const existingItem = cart.find(item => item.id === productId);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
id: productId,
name: productName,
price: price,
quantity: 1
});
}
// Salva il carrello nel cookie (scadenza 7 giorni)
const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = "cart=" + encodeURIComponent(JSON.stringify(cart)) + "; " + expires + "; path=/";
alert('Prodotto aggiunto al carrello!');
}
function removeFromCart(index) {
let cart = [];
const cookieValue = document.cookie.split('; ').find(row => row.startsWith('cart='));
if (cookieValue) {
cart = JSON.parse(decodeURIComponent(cookieValue.split('=')[1]));
}
cart.splice(index, 1);
const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
if (cart.length > 0) {
document.cookie = "cart=" + encodeURIComponent(JSON.stringify(cart)) + "; " + expires + "; path=/";
} else {
document.cookie = "cart=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
}
location.reload();
}
function clearCart() {
if (confirm('Sei sicuro di voler svuotare il carrello?')) {
document.cookie = "cart=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
location.reload();
}
}
cart.php
+86
View File
@@ -0,0 +1,86 @@
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carrello - TechStore</title>
<link rel="stylesheet" href="style.css">
<script src="assets/js/cart.js"></script>
</head>
<body>
<header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f2f2f2; border-bottom: 1px solid #ddd;">
<div id="logo" style="font-size: 24px; font-weight: bold;"><a href="index.php"><img src="img/logo.png" alt="Logo TechStore" height="32px"></a></div>
<div>
<a href="cart.php"><button style="margin-left: 10px; padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Carrello</button></a>
<?php if (isset($_SESSION['user'])): ?>
<a href="logout.php"><button style="margin-left: 10px; padding: 8px 16px; background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">Logout</button></a>
<span style="margin-left: 10px;">Benvenuto, <?php echo htmlspecialchars($_SESSION['user']); ?></span>
<?php else: ?>
<a href="login.php"><button style="margin-left: 10px; padding: 8px 16px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">Accesso</button></a>
<?php endif; ?>
</div>
</header>
<div class="cart-container">
<h1>Il tuo carrello</h1>
<?php
$cart = [];
$cartCookie = isset($_COOKIE['cart']) ? $_COOKIE['cart'] : '';
if ($cartCookie) {
$cart = json_decode(urldecode($cartCookie), true);
}
if (empty($cart)): ?>
<div class="empty-cart">
<p>Il tuo carrello è vuoto.</p>
<a href="index.php"><button style="padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px;">Torna ai prodotti</button></a>
</div>
<?php else: ?>
<table class="cart-table">
<thead>
<tr>
<th>Prodotto</th>
<th>Prezzo</th>
<th>Quantità</th>
<th>Totale</th>
<th>Azione</th>
</tr>
</thead>
<tbody>
<?php
$grand_total = 0;
foreach ($cart as $index => $item):
$item_total = $item['price'] * $item['quantity'];
$grand_total += $item_total;
?>
<tr>
<td><a href="product.php?id=<?php echo $item['id']; ?>"><?php echo htmlspecialchars($item['name']); ?></a></td>
<td>€<?php echo number_format($item['price'], 2, ',', '.'); ?></td>
<td><?php echo $item['quantity']; ?></td>
<td>€<?php echo number_format($item_total, 2, ',', '.'); ?></td>
<td>
<button onclick="removeFromCart(<?php echo $index; ?>)">Rimuovi</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="cart-summary">
<p>Totale: €<?php echo number_format($grand_total, 2, ',', '.'); ?></p>
</div>
<div style="text-align: right; margin-top: 20px;">
<button class="clear-cart-btn" onclick="clearCart()">Svuota carrello</button>
<button class="checkout-btn">Procedi all'acquisto</button>
</div>
<?php endif; ?>
</div>
</body>
</html>
index.php
+2 -1
View File
@@ -18,12 +18,13 @@ if ($result === false) {
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechStore - Prodotti</title>
<link rel="stylesheet" href="style.css">
<script src="assets/js/cart.js"></script>
</head>
<body>
<header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f2f2f2; border-bottom: 1px solid #ddd;">
<div id="logo"><img src="img/logo.png" alt="Logo TechStore" height="32px"></div>
<div>
<a href=""><button style="margin-left: 10px; padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Carrello</button></a>
<a href="cart.php"><button style="margin-left: 10px; padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Carrello</button></a>
<?php if (isset($_SESSION['user'])): ?>
<a href="logout.php"><button style="margin-left: 10px; padding: 8px 16px; background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">Logout</button></a>
<span style="margin-left: 10px;">Benvenuto, <?php echo htmlspecialchars($_SESSION['user']); ?></span>
product.php
+2 -1
View File
@@ -29,6 +29,7 @@ if ($stmt = $conn->prepare($sql)) {
<title>Prodotto non trovato - TechStore</title>
<?php endif; ?>
<link rel="stylesheet" href="style.css">
<script src="assets/js/cart.js"></script>
</head>
<body>
<header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f2f2f2; border-bottom: 1px solid #ddd;">
@@ -53,7 +54,7 @@ if ($stmt = $conn->prepare($sql)) {
<p><strong>Descrizione:</strong> <?php echo htmlspecialchars($product['Description']); ?></p>
<p><strong>Prezzo:</strong> €<?php echo htmlspecialchars($product['Price']); ?></p>
<p><strong>Quantità disponibile:</strong> <?php echo htmlspecialchars($product['StockQuantity']); ?></p>
<button style="padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">Aggiungi al carrello</button>
<button onclick="addToCart(<?php echo $product['ProductID']; ?>, '<?php echo htmlspecialchars($product['ProductName']); ?>', <?php echo $product['Price']; ?>)" style="padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">Aggiungi al carrello</button>
</div>
</div>
<?php else: ?>
style.css
+68
View File
@@ -140,4 +140,72 @@ form button:hover {
width: 100%;
height: 100%;
object-fit: contain; /* o "cover" */
}
/* Pagina carrello */
.cart-container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
}
.cart-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.cart-table th, .cart-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
.cart-table th {
background-color: #f2f2f2;
font-weight: bold;
}
.cart-table button {
padding: 5px 10px;
background-color: #dc3545;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.cart-table button:hover {
background-color: #c82333;
}
.cart-summary {
margin-top: 20px;
text-align: right;
font-size: 18px;
font-weight: bold;
}
.empty-cart {
text-align: center;
padding: 40px;
font-size: 18px;
color: #666;
}
.clear-cart-btn {
padding: 10px 20px;
background-color: #dc3545;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
}
.clear-cart-btn:hover {
background-color: #c82333;
}
.checkout-btn {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
}
.checkout-btn:hover {
background-color: #218838;
}