From 879c72e50c172f6e20416dcf06fccdbb59525c7a Mon Sep 17 00:00:00 2001 From: lonkaars Date: Thu, 1 Jun 2023 16:02:10 +0200 Subject: order from product catalogue and modify cart product count --- public/cart.css | 2 ++ public/cart.js | 22 ++++++++++++++++++++++ public/cart.php | 15 +++++++++++---- public/global.css | 16 +++++++++++++--- public/login.css | 4 ++++ public/products.css | 10 +++++++++- public/products.php | 7 ++++++- 7 files changed, 67 insertions(+), 9 deletions(-) create mode 100644 public/cart.js 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); ?> image ? "/img/product/$item->id-thumb.jpg" : "/img/placeholder.png"; echo <<<"EOF" -
+
productafbeelding $item->name - - + + $item->price
EOF; @@ -49,6 +55,7 @@ EOF; mand + @@ -75,7 +82,7 @@ EOF; break; } echo <<<"EOF" -
+ 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) { $product->price $product->name + + + + +
EOF; } @@ -69,7 +74,7 @@ EOF; +
-- cgit v1.2.3