feature/book-page (#4)

Co-authored-by: Tim Rijkse <trijkse@gmail.com> Reviewed-on: #4
2026-01-16 08:46:03 +00:00
parent 45d0872495
commit 3dbe404443
30 changed files with 2534 additions and 384 deletions
--- a/js/icons/shopping-bag-icon.js
+++ b/js/icons/shopping-bag-icon.js
@@ -0,0 +1,138 @@
+/**
+ * Shopping Bag Icon Web Component
+ * A reusable shopping bag/cart icon element with optional badge count
+ */
+class ShoppingBagIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "count"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.handleCartUpdate = this.handleCartUpdate.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+    // Listen for cart updates
+    window.addEventListener("cart-updated", this.handleCartUpdate);
+    // Initialize count from cart store if available
+    this.initializeCount();
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("cart-updated", this.handleCartUpdate);
+  }
+
+  initializeCount() {
+    // Wait for cart store to be available
+    setTimeout(() => {
+      if (window.cartStore) {
+        const count = window.cartStore.getItemCount();
+        if (count > 0) {
+          this.setAttribute("count", count.toString());
+        }
+      }
+    }, 0);
+  }
+
+  handleCartUpdate(event) {
+    const { count } = event.detail;
+    if (count > 0) {
+      this.setAttribute("count", count.toString());
+    } else {
+      this.removeAttribute("count");
+    }
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get size() {
+    return this.getAttribute("size") || "32";
+  }
+
+  get color() {
+    return this.getAttribute("color") || "#ffffff";
+  }
+
+  get strokeWidth() {
+    return this.getAttribute("stroke-width") || "2";
+  }
+
+  get count() {
+    const countAttr = this.getAttribute("count");
+    return countAttr ? parseInt(countAttr, 10) : 0;
+  }
+
+  render() {
+    const showBadge = this.count > 0;
+    const displayCount = this.count > 99 ? "99+" : this.count.toString();
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+        }
+        
+        .icon-wrapper {
+          position: relative;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        
+        svg {
+          display: block;
+        }
+        
+        .badge {
+          position: absolute;
+          top: -6px;
+          right: -8px;
+          min-width: 18px;
+          height: 18px;
+          padding: 0 5px;
+          color: var(--color-purple, #951d51);
+          background-color: #ffffff;
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: 11px;
+          font-weight: 700;
+          line-height: 18px;
+          text-align: center;
+          border-radius: 9px;
+          box-sizing: border-box;
+        }
+        
+        .badge.hidden {
+          display: none;
+        }
+      </style>
+      <div class="icon-wrapper">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="${this.size}"
+          height="${this.size}"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="${this.color}"
+          stroke-width="${this.strokeWidth}"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="8" cy="21" r="1"></circle>
+          <circle cx="19" cy="21" r="1"></circle>
+          <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
+        </svg>
+        <span class="badge ${showBadge ? "" : "hidden"}">${displayCount}</span>
+      </div>
+    `;
+  }
+}
+
+customElements.define("shopping-bag-icon", ShoppingBagIcon);