mirror of
https://codeberg.org/ThisIsMiseryy/techstore
synced 2026-05-14 14:52:04 +00:00
Merge implementazione carrello
This commit is contained in:
@@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
@@ -18,12 +18,13 @@ if ($result === false) {
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>TechStore - Prodotti</title>
|
<title>TechStore - Prodotti</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="assets/js/cart.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f2f2f2; border-bottom: 1px solid #ddd;">
|
<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 id="logo"><img src="img/logo.png" alt="Logo TechStore" height="32px"></div>
|
||||||
<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'])): ?>
|
<?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>
|
<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>
|
<span style="margin-left: 10px;">Benvenuto, <?php echo htmlspecialchars($_SESSION['user']); ?></span>
|
||||||
|
|||||||
+2
-1
@@ -29,6 +29,7 @@ if ($stmt = $conn->prepare($sql)) {
|
|||||||
<title>Prodotto non trovato - TechStore</title>
|
<title>Prodotto non trovato - TechStore</title>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="assets/js/cart.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f2f2f2; border-bottom: 1px solid #ddd;">
|
<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>Descrizione:</strong> <?php echo htmlspecialchars($product['Description']); ?></p>
|
||||||
<p><strong>Prezzo:</strong> €<?php echo htmlspecialchars($product['Price']); ?></p>
|
<p><strong>Prezzo:</strong> €<?php echo htmlspecialchars($product['Price']); ?></p>
|
||||||
<p><strong>Quantità disponibile:</strong> <?php echo htmlspecialchars($product['StockQuantity']); ?></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>
|
||||||
</div>
|
</div>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
|
|||||||
@@ -141,3 +141,71 @@ form button:hover {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain; /* o "cover" */
|
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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user