78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
/**
|
|
* Add to Cart Button Component
|
|
* Button with plus icon and shopping bag icon
|
|
*/
|
|
import { plusIcon } from "../icons/plus.js";
|
|
import { shoppingBagIcon } from "../icons/shopping-bag.js";
|
|
|
|
class AddToCartButton extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
this.setupEventListeners();
|
|
}
|
|
|
|
setupEventListeners() {
|
|
const button = this.shadowRoot.querySelector(".add-to-cart-button");
|
|
if (button) {
|
|
button.addEventListener("click", () => {
|
|
this.dispatchEvent(
|
|
new CustomEvent("add-to-cart", {
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: inline-block;
|
|
}
|
|
|
|
.add-to-cart-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-xs, 0.25rem);
|
|
width: 70px;
|
|
height: 40px;
|
|
padding: 0;
|
|
background-color: var(--color-button-primary, #951d51);
|
|
border: none;
|
|
border-radius: var(--radius-sm, 0.25rem);
|
|
cursor: pointer;
|
|
transition: opacity var(--transition-fast, 150ms ease);
|
|
}
|
|
|
|
.add-to-cart-button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.add-to-cart-button:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.add-to-cart-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--color-text-inverse, #ffffff);
|
|
}
|
|
</style>
|
|
<button class="add-to-cart-button" type="button">
|
|
${plusIcon({ size: 16, color: "#ffffff" })}
|
|
${shoppingBagIcon({ size: 16, color: "#ffffff" })}
|
|
</button>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("add-to-cart-button", AddToCartButton);
|