From 569d61381723eea60188e00d6133fddcaee37ef8 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Thu, 18 May 2023 18:17:41 +0200 Subject: display and filter categories on products page --- db/data.sql | 10 +++--- public/global.css | 7 +++++ public/product.css | 6 ---- public/products.css | 60 +++++++++++++++++++++++++++++++++--- public/products.php | 88 ++++++++++++++++++++++++++++++++++++++++++----------- 5 files changed, 138 insertions(+), 33 deletions(-) diff --git a/db/data.sql b/db/data.sql index 7254a90..01f18aa 100644 --- a/db/data.sql +++ b/db/data.sql @@ -7,11 +7,11 @@ insert into webs.product (`name`, `price`, `category`, `image`) values ("Appel", 0.90, 1, true), ("Banaan", 1.10, 1, true), ("Peer", 0.99, 1, true), - ("ハリネズミのハリー 第１巻", 5.99, 1, true), - ("ハリネズミのハリー 第２巻", 5.99, 1, false), - ("ハリネズミのハリー 第３巻", 5.99, 1, false), - ("イジらないで、長瀞さん 第１巻", 5.49, 1, false), - ("イジらないで、長瀞さん 第２巻", 5.49, 1, false), + ("ハリネズミのハリー 第１巻", 5.99, 2, true), + ("ハリネズミのハリー 第２巻", 5.99, 2, false), + ("ハリネズミのハリー 第３巻", 5.99, 2, false), + ("イジらないで、長瀞さん 第１巻", 5.49, 2, false), + ("イジらないで、長瀞さん 第２巻", 5.49, 2, false), ("Kip", 9.95, 3, true), ("Kikker", 19.95, 3, true); diff --git a/public/global.css b/public/global.css index 4add154..a417d10 100644 --- a/public/global.css +++ b/public/global.css @@ -79,3 +79,10 @@ body, html { } .d-ib { display: inline-block; } + +.twocolumn { + display: grid; + grid-template-columns: 200px 1fr; + gap: 16px; +} + diff --git a/public/product.css b/public/product.css index 54fe81b..b3d0e59 100644 --- a/public/product.css +++ b/public/product.css @@ -1,9 +1,3 @@ -.twocolumn { - display: grid; - grid-template-columns: 200px 1fr; - gap: 16px; -} - .twocolumn .left { text-align: center; } .twocolumn .left img { max-width: 100%; diff --git a/public/products.css b/public/products.css index 5dee942..ecaaaa3 100644 --- a/public/products.css +++ b/public/products.css @@ -1,12 +1,14 @@ +:root { + --width: 1000px; +} + .products { - --grid-columns: 3; + --min-width: 200px; display: grid; - grid-template-columns: repeat(var(--grid-columns), 1fr); + grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr)); gap: 8px; align-items: start; } -@media (max-width: 600px) { .products { --grid-columns: 2; } } -@media (max-width: 400px) { .products { --grid-columns: 1; } } .products .product { background-color: var(--bg-alt); @@ -22,3 +24,53 @@ .product span { display: block; } .product .price { font-size: 1.5rem; } + +.categories a { + position: relative; + display: block; + color: var(--fg-alt); + text-decoration: none; +} +.categories .category { + margin-left: 8px; + height: 1.25em; +} + +.categories .category::before { + content: ""; + position: absolute; + height: 2px; + width: 14px; + background-color: var(--fg); + left: -2px; + top: 50%; + transform: translate(-100%, -50%); +} + +.categories .sub { + margin-left: 8px; + position: relative; +} + +.categories > .sub::before { + top: 0; +} + +.sub::before { + content: ""; + position: absolute; + width: 2px; + background-color: var(--fg); + left: -8px; + top: calc(1.25em * -0.5); + bottom: calc(1.25em * 0.5); +} + +.categories:has(.current) a { + color: var(--fg); +} + +.categories:has(.current) a.current { + color: var(--fg-alt); + font-weight: 700; +} diff --git a/public/products.php b/public/products.php index da337ad..ce0ada5 100644 --- a/public/products.php +++ b/public/products.php @@ -13,6 +13,34 @@ function product_template($product) { EOF; } ?> + +query("select id, name, parent from category where parent is null"); + } else { + $statement = $cursor->prepare("select id, name, parent from category where parent = ?"); + $statement->bind_param("i", $id); + $statement->execute(); + $res = $statement->get_result(); + } + if (!mysqli_num_rows($res)) return; + echo '
'; + $categories = $res->fetch_all(MYSQLI_ASSOC); + foreach ($categories as $category) { + // php is een hele mooie programmeertaal die heel fijn werkt + echo ""; + echo $category["name"]; + echo ""; + categories_recursive($category["id"]); + } + echo '
'; +} ?> @@ -22,25 +50,49 @@ EOF;
-

lijst met producten:

- -
- -
-
- -
+
+
+

Filters

+

Categorieën

+
+ Reset +
- EOF; - } while (false); ?> -
- query("select id, image, price, name from webs.product"); - while ($product = $res->fetch_object()) product_template($product); - ?> +
+
+ Producten"; + if ($id !== null) echo " in categorie $id"; + echo ""; + ?> + +
+ +
+
+ +
+
+ EOF; + } while (false); ?> +
+ query("select id, image, price, name from webs.product"); + } else { + $statement = $cursor->prepare("select id, image, price, name from webs.product where category = ?"); + $statement->bind_param("i", $id); + $statement->execute(); + $res = $statement->get_result(); + } + while ($product = $res->fetch_object()) product_template($product); + ?> +
+
-- cgit v1.2.3