diff --git a/assets/js/cart.js b/assets/js/cart.js new file mode 100644 index 0000000..e1b19bc --- /dev/null +++ b/assets/js/cart.js @@ -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(); + } +} \ No newline at end of file diff --git a/cart.php b/cart.php index 35d4fa2..dfd3204 100644 --- a/cart.php +++ b/cart.php @@ -1,3 +1,7 @@ + + @@ -5,8 +9,78 @@ Carrello - TechStore + - +
+ +
+ + + + Benvenuto, + + + +
+
+ +
+

Il tuo carrello

+ + +
+

Il tuo carrello è vuoto.

+ +
+ + + + + + + + + + + + + $item): + $item_total = $item['price'] * $item['quantity']; + $grand_total += $item_total; + ?> + + + + + + + + + +
ProdottoPrezzoQuantitàTotaleAzione
€€ + +
+ +
+

Totale: €

+
+ +
+ + +
+ +
\ No newline at end of file diff --git a/index.php b/index.php index 7b0850c..68860b2 100644 --- a/index.php +++ b/index.php @@ -18,6 +18,7 @@ if ($result === false) { TechStore - Prodotti +
diff --git a/product.php b/product.php index daeb634..87d838f 100644 --- a/product.php +++ b/product.php @@ -29,6 +29,7 @@ if ($stmt = $conn->prepare($sql)) { Prodotto non trovato - TechStore +
@@ -53,7 +54,7 @@ if ($stmt = $conn->prepare($sql)) {

Descrizione:

Prezzo: €

Quantità disponibile:

- + diff --git a/style.css b/style.css index 1755d0b..e431e8d 100644 --- a/style.css +++ b/style.css @@ -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; } \ No newline at end of file