139 lines
3.4 KiB
JavaScript
139 lines
3.4 KiB
JavaScript
/**
|
|
* 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);
|