@ribajs/shopify
Version:
Shopify extension for Riba.js
184 lines • 13.8 kB
JavaScript
import { Component } from "@ribajs/core";
import { ShopifyCartService, ShopifyProductService, } from "@ribajs/shopify";
import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
export class ShopifyProductItemComponent extends Component {
static tagName = "shopify-product-item";
autobind = true;
static get observedAttributes() {
return ["handle", "extras", "product"];
}
requiredAttributes() {
return ["handle"];
}
scope = {
handle: null,
product: null,
variant: null,
quantity: 1,
showDetailMenu: false,
detailMenuPadding: "60px",
chooseOption: this.chooseOption,
addToCart: this.addToCart,
toggleDetailMenu: this.toggleDetailMenu,
decrease: this.decrease,
increase: this.increase,
colorOption: null,
sizeOption: null,
available: false,
};
selectedOptions = [];
_menuPadding = 60;
optionChosen = false;
set menuPadding(padding) {
this._menuPadding = padding;
this.scope.detailMenuPadding = this._menuPadding + "px";
}
set available(available) {
this.scope.available = available && this.optionChosen;
}
set showMenu(show) {
if (show) {
this.menuPadding = 215;
}
else {
this.menuPadding = 60;
}
this.scope.showDetailMenu = show;
}
get showMenu() {
return this.scope.showDetailMenu;
}
set product(product) {
if (product) {
this.scope.product = ShopifyProductService.prepare(product);
this.scope.handle = this.scope.product.handle;
this.scope.colorOption =
ShopifyProductService.getOption(this.scope.product, "color") || null;
this.scope.sizeOption =
ShopifyProductService.getOption(this.scope.product, "size") || null;
this.variant = this.scope.product.variants[0];
}
}
get product() {
return this.scope.product;
}
set variant(variant) {
if (variant === null) {
return;
}
this.scope.variant = variant;
if (this.scope.variant) {
this.selectedOptions = this.scope.variant.options.slice();
this.available = this.scope.variant.available;
this.activateOptions();
}
}
get variant() {
return this.scope.variant;
}
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
this.init(ShopifyProductItemComponent.observedAttributes);
}
chooseOption(optionValue, position1, optionName, event) {
optionValue = optionValue.toString();
if (!this.scope.product) {
throw new Error("Product not set!");
}
this.selectedOptions[position1 - 1] = optionValue.toString();
const variant = ShopifyProductService.getVariantOfOptions(this.scope.product, this.selectedOptions);
if (variant) {
this.optionChosen = true;
this.variant = variant;
}
event.stopPropagation();
}
addToCart() {
if (!this.variant) {
return;
}
ShopifyCartService.add(this.variant.id, this.scope.quantity)
.then((response) => {
console.debug("addToCart response", response);
})
.catch((error) => {
console.debug("addToCart error", error);
});
}
toggleDetailMenu() {
this.showMenu = !this.showMenu;
}
increase() {
this.scope.quantity++;
}
decrease() {
this.scope.quantity--;
if (this.scope.quantity <= 0) {
this.scope.quantity = 1;
}
}
activateOption(optionValue, optionName) {
optionValue = optionValue.toString().replace("#", "");
this.querySelector(`.option-${optionName.toLocaleLowerCase()}`)?.classList.remove("active");
this.querySelector(`.option-${optionName.toLocaleLowerCase()}-${optionValue}`)?.classList.add("active");
}
activateOptions() {
for (const position0 in this.selectedOptions) {
if (this.selectedOptions[position0]) {
const optionValue = this.selectedOptions[position0];
if (this.scope.product) {
const optionName = this.scope.product.options[position0].name;
if (optionName === "size") {
if (this.optionChosen) {
this.activateOption(optionValue, optionName);
}
}
else {
this.activateOption(optionValue, optionName);
}
}
}
}
}
async beforeBind() {
await super.beforeBind();
if (this.scope.handle === null) {
throw new Error("Product handle not set");
}
if (!this.product) {
this.fetchProduct(this.scope.handle);
}
}
async fetchProduct(handle) {
const product = await ShopifyProductService.get(handle);
if (product) {
this.product = product;
}
return product;
}
parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace) {
super.parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace);
switch (attributeName) {
case "product":
this.product = newValue;
break;
}
}
async afterBind() {
await super.afterBind();
this.activateOptions();
}
async template() {
if (this && hasChildNodesTrim(this)) {
return null;
}
else {
const { default: template } = await import("./product-item.component.html?raw");
return template;
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3Byb2R1Y3QtaXRlbS9wcm9kdWN0LWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWEsTUFBTSxjQUFjLENBQUM7QUFDcEQsT0FBTyxFQUlMLGtCQUFrQixFQUNsQixxQkFBcUIsR0FDdEIsTUFBTSxpQkFBaUIsQ0FBQztBQUN6QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQTBCN0QsTUFBTSxPQUFPLDJCQUE0QixTQUFRLFNBQVM7SUFDakQsTUFBTSxDQUFDLE9BQU8sR0FBRyxzQkFBc0IsQ0FBQztJQUVyQyxRQUFRLEdBQUcsSUFBSSxDQUFDO0lBTzFCLE1BQU0sS0FBSyxrQkFBa0I7UUFDM0IsT0FBTyxDQUFDLFFBQVEsRUFBRSxRQUFRLEVBQUUsU0FBUyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVTLGtCQUFrQjtRQUMxQixPQUFPLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDcEIsQ0FBQztJQUVNLEtBQUssR0FBVTtRQUNwQixNQUFNLEVBQUUsSUFBSTtRQUNaLE9BQU8sRUFBRSxJQUFJO1FBQ2IsT0FBTyxFQUFFLElBQUk7UUFDYixRQUFRLEVBQUUsQ0FBQztRQUNYLGNBQWMsRUFBRSxLQUFLO1FBQ3JCLGlCQUFpQixFQUFFLE1BQU07UUFFekIsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZO1FBQy9CLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUztRQUN6QixnQkFBZ0IsRUFBRSxJQUFJLENBQUMsZ0JBQWdCO1FBQ3ZDLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUTtRQUN2QixRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVE7UUFDdkIsV0FBVyxFQUFFLElBQUk7UUFDakIsVUFBVSxFQUFFLElBQUk7UUFJaEIsU0FBUyxFQUFF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