aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2023-06-01 16:02:10 +0200
committerlonkaars <loek@pipeframe.xyz>2023-06-01 16:02:10 +0200
commit879c72e50c172f6e20416dcf06fccdbb59525c7a (patch)
treed6cb693daa85b724eb3d07d8fae807b609cfd5c5
parent8af23ff155904ba78de61a3cdab33a048a0f5664 (diff)
order from product catalogue and modify cart product count
Diffstat
-rw-r--r--public/cart.css2
-rw-r--r--public/cart.js22
-rw-r--r--public/cart.php15
-rw-r--r--public/global.css16
-rw-r--r--public/login.css4
-rw-r--r--public/products.css10
-rw-r--r--public/products.php7
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>