From bc09ac8989d5d7cc5e89bca7036b6010815dbee9 Mon Sep 17 00:00:00 2001
From: Leo Goetz <dev@leogtz.de>
Date: Mon, 2 Feb 2026 11:47:42 +0100
Subject: feat: added components, proxy and finished project/course

---
 components/ProductItem.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 components/ProductItem.js

(limited to 'components/ProductItem.js')

diff --git a/components/ProductItem.js b/components/ProductItem.js
new file mode 100644
index 0000000..ac9253b
--- /dev/null
+++ b/components/ProductItem.js
@@ -0,0 +1,30 @@
+import { addToCart } from "../services/Order.js";
+
+export default class ProductItem extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const template = document.getElementById("product-item-template");
+    const content = template.content.cloneNode(true);
+
+    this.appendChild(content);
+
+    const product = JSON.parse(this.dataset.product);
+    this.querySelector("h4").textContent = product.name;
+    this.querySelector("p.price").textContent = `$${product.price.toFixed(2)}`;
+    this.querySelector("img").src = `data/images/${product.image}`;
+    this.querySelector("a").addEventListener("click", (event) => {
+      console.log(event.target.tagName);
+      if (event.target.tagName.toLowerCase() == "button") {
+        addToCart(product.id);
+      } else {
+        app.router.go(`/product-${product.id}`);
+      }
+      event.preventDefault();
+    });
+  }
+}
+
+customElements.define("product-item", ProductItem);
-- 
cgit v1.3