diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/cart.css | 2 | ||||
| -rw-r--r-- | public/cart.js | 22 | ||||
| -rw-r--r-- | public/cart.php | 15 | ||||
| -rw-r--r-- | public/global.css | 16 | ||||
| -rw-r--r-- | public/login.css | 4 | ||||
| -rw-r--r-- | public/products.css | 10 | ||||
| -rw-r--r-- | public/products.php | 7 |
7 files changed, 67 insertions, 9 deletions
diff --git a/public/cart.css b/public/cart.css index 5830f83..277dcde 100644 --- a/public/cart.css +++ b/public/cart.css @@ -12,4 +12,6 @@ .product input[type=number]::-webkit-inner-spin-button { opacity: 1; } +.product input[type=number] { width: 32px; } + .product .name { width: 100%; } diff --git a/public/cart.js b/public/cart.js new file mode 100644 index 0000000..b8c9887 --- /dev/null +++ b/public/cart.js @@ -0,0 +1,22 @@ +var products = document.getElementById("products").getElementsByClassName("product"); + +for (var product of products) { + var countInput = product.getElementsByClassName("count")[0]; + countInput.removeAttribute("disabled"); + + // update product count in cart asynchronously when cart value is modified + countInput.addEventListener("input", function() { + var productID = this.parentElement.getAttribute("product-id"); + var count = this.value; + + fetch("/cart.php", { + method: "POST", + headers: { "Content-Type": "application/x-www-form-urlencoded" }, + body: new URLSearchParams({ + "type": "update", + "product_id": productID, + "count": count + }), + }); + }); +} diff --git a/public/cart.php b/public/cart.php index 60f4c63..ba33a9d 100644 --- a/public/cart.php +++ b/public/cart.php @@ -27,18 +27,24 @@ $cart_count = get_cart_count(); break; } + case "update": { + $statement = $cursor->prepare("update orderproduct set count = ? where product = ? and `order` = cart(?)"); + $statement->bind_param("iii", $_POST['count'], $_POST['product_id'], $user_id); + $statement->execute(); + return; // update requests are only triggered from JS and don't do anything with the response + } } } while (false); ?> <?php function item_template($item) { $image_path = $item->image ? "/img/product/$item->id-thumb.jpg" : "/img/placeholder.png"; echo <<<"EOF" - <div class="product"> + <div class="product" product-id="$item->id"> <img src="$image_path" alt="productafbeelding"> <span class="name">$item->name</span> <label for="$item->id-count">hoeveelheid:</label> - <input type="number" value="$item->count" min="1" max="20" id="$item->id-count" disabled> - <button type="submit" value="$item->id" name="product_id">weghalen</button> + <input type="number" value="$item->count" min="1" max="20" id="$item->id-count" class="count buttonstyle filled" disabled> + <button type="submit" value="$item->id" name="product_id" class="button outlined">weghalen</button> <span class="price">$item->price</span> </div> EOF; @@ -49,6 +55,7 @@ EOF; <?php include 'head.php' ?> <title>mand</title> <link rel="stylesheet" href="cart.css"> + <script defer src="cart.js"></script> </head> <body> <?php include 'navbar.php' ?> @@ -75,7 +82,7 @@ EOF; break; } echo <<<"EOF" - <form class="products" method="post"> + <form id="products" class="products" method="post"> <input type="hidden" name="type" value="delete"> EOF; while ($product = $res->fetch_object()) item_template($product); diff --git a/public/global.css b/public/global.css index 1683ef5..2a23250 100644 --- a/public/global.css +++ b/public/global.css @@ -8,6 +8,7 @@ --fg: #000000; --fg-alt: #111111; } +input.buttonstyle.filled[type=number] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root { @@ -16,6 +17,7 @@ --fg: #dddddd; --fg-alt: #ffffff; } + input.buttonstyle.filled[type=number] { color-scheme: light; } } body, html { @@ -49,7 +51,6 @@ body, html { .button, .buttonstyle { - margin-bottom: 16px; padding: 9px 12px; border-radius: 8px; border: none; @@ -74,12 +75,20 @@ body, html { .button.filled, .buttonstyle.filled { - background-color: canvastext; - color: canvas; + background-color: var(--fg); + color: var(--bg-alt); font-weight: bold; cursor: pointer; } +.button.outlined, +.buttonstyle.outlined { + padding: 7px 10px; + border: 2px solid currentColor; +} + +input.buttonstyle[type=number] { cursor: unset; } + .center { text-align: center; } @@ -92,3 +101,4 @@ body, html { gap: 16px; } +.skipafter { margin-bottom: 16px; } diff --git a/public/login.css b/public/login.css index bc7f096..7917a4a 100644 --- a/public/login.css +++ b/public/login.css @@ -11,3 +11,7 @@ .modal input[type="submit"] { font-size: 1rem; } + +.modal input { + margin-bottom: 16px; +} diff --git a/public/products.css b/public/products.css index ecaaaa3..682a720 100644 --- a/public/products.css +++ b/public/products.css @@ -13,7 +13,15 @@ .products .product { background-color: var(--bg-alt); padding: 8px; - border-radius: 8px; + border-radius: 16px; + display: grid; + gap: 8px; +} + +.products .product img { border-radius: 8px; } + +.products .product .button { + width: 100%; } .product img { diff --git a/public/products.php b/public/products.php index ce0ada5..326d9fb 100644 --- a/public/products.php +++ b/public/products.php @@ -9,6 +9,11 @@ function product_template($product) { <img src="$image_path" alt=""> <span class="price">$product->price</span> <span class="name">$product->name</span> + <form action="/cart.php" method="post"> + <input type="hidden" name="type" value="add"> + <input type="hidden" name="product_id" value="$product->id"> + <input type="submit" class="button filled" value="Toevoegen aan winkelwagen"> + </form> </a> EOF; } @@ -69,7 +74,7 @@ EOF; <?php do { if (($user_privileges & PRIVILEGE_ADMIN) == 0) break; echo <<<"EOF" - <div class="center"> + <div class="center skipafter"> <form action="/admin-product.php" method="get" class="d-ib"> <input type="submit" value="Nieuw product toevoegen" class="button filled"> </form> |