@ribajs/shopify
Version:
Shopify extension for Riba.js
190 lines • 14.3 kB
JavaScript
import { Component } from "@ribajs/core";
import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
import { ShopifyCartService } from "../../services/index.js";
export class ShopifyCartItemComponent extends Component {
static tagName = "shopify-cart-item";
static get observedAttributes() {
return [
"id",
"title",
"price",
"line-price",
"line-number",
"quantity",
"sku",
"grams",
"vendor",
"properties",
"gift-card",
"url",
"image",
"handle",
"requires-shipping",
"product-title",
"product-description",
"product-type",
"product-id",
"variant-title",
"variant-options",
"variant-id",
"key",
];
}
requiredAttributes() {
return ["id", "variantId", "quantity"];
}
scope = this.getScopeDefaults();
getScopeDefaults() {
return {
id: 0,
productId: 0,
variantId: 0,
properties: [],
quantity: 0,
remove: this.remove,
increase: this.increase,
decrease: this.decrease,
onInputQuantityChanged: this.onInputQuantityChanged,
pending: false,
};
}
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
this.init(ShopifyCartItemComponent.observedAttributes);
}
remove() {
this.debug("decrease", this.scope.variantId);
ShopifyCartService.change(this.scope.variantId, 0)
.then((cart) => {
return cart;
})
.catch((error) => {
console.error(error);
});
}
increase() {
this.debug("increase", this.scope.quantity);
this.scope.quantity++;
ShopifyCartService.change(this.scope.variantId, this.scope.quantity)
.then((cart) => {
return cart;
})
.catch((error) => {
console.error(error);
});
}
decrease() {
this.debug("decrease", this.scope.quantity);
this.scope.quantity--;
if (this.scope.quantity < 0) {
this.scope.quantity = 0;
}
ShopifyCartService.change(this.scope.variantId, this.scope.quantity)
.then((cart) => {
this.debug("ShopifyCartService changed", cart);
return cart;
})
.catch((error) => {
console.error(error);
});
}
onInputQuantityChanged() {
this.debug("onInputQuantityChanged");
ShopifyCartService.change(this.scope.variantId, this.scope.quantity)
.then((cart) => {
this.debug("ShopifyCartService changed", cart);
return cart;
})
.catch((error) => {
console.error(error);
});
}
onCartUpdate(cart) {
const item = this.getItemFromCart(cart);
if (!item) {
this.debug("Item not found, probably item was removed.");
super.remove();
return;
}
this.debug("update item from cart");
this.scope.title = item.title;
this.scope.price = item.price;
this.scope.linePrice = item.line_price;
this.scope.lineNumber = item.line_number;
this.scope.quantity = item.quantity;
this.scope.sku = item.sku;
this.scope.grams = item.grams;
this.scope.vendor = item.vendor;
this.scope.properties = item.properties;
this.scope.giftCard = item.gift_card;
this.scope.url = item.url;
this.scope.image = item.image;
this.scope.handle = item.handle;
this.scope.requiresShipping = item.requires_shipping;
this.scope.productTitle = item.product_title;
this.scope.productDescription = item.product_description;
this.scope.productType = item.product_type;
this.scope.productId = item.product_id;
this.scope.variantTitle = item.variant_title;
this.scope.variantOptions = item.variant_options;
this.scope.key = item.key;
if (this.scope.quantity === 0) {
super.remove();
return;
}
}
getItemFromCart(cart) {
for (const item of cart.items) {
if (item.key && this.scope.key) {
if (item.key === this.scope.key) {
return item;
}
}
else {
if (item.id === this.scope.id &&
item.variant_id === this.scope.variantId) {
return item;
}
}
}
return null;
}
async beforeBind() {
await super.beforeBind();
}
onCartRequestStart() {
this.scope.pending = true;
}
onCartRequestComplete(cart) {
this.debug("ShopifyCart:request:complete", cart);
this.onCartUpdate(cart);
this.scope.pending = false;
return cart;
}
async afterBind() {
this.debug("afterBind", this.scope);
ShopifyCartService.shopifyCartEventDispatcher.on("ShopifyCart:request:start", this.onCartRequestStart, this);
ShopifyCartService.shopifyCartEventDispatcher.on("ShopifyCart:request:complete", this.onCartRequestComplete, this);
const cart = await ShopifyCartService.get();
this.onCartUpdate(cart);
await super.afterBind();
}
disconnectedCallback() {
super.disconnectedCallback();
ShopifyCartService.shopifyCartEventDispatcher.off("ShopifyCart:request:start", this.onCartRequestStart, this);
ShopifyCartService.shopifyCartEventDispatcher.off("ShopifyCart:request:complete", this.onCartRequestComplete, this);
}
async template() {
if (hasChildNodesTrim(this)) {
return null;
}
else {
const { default: template } = await import("./cart-item.component.html?raw");
return template;
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FydC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2NhcnQtaXRlbS9jYXJ0LWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWEsTUFBTSxjQUFjLENBQUM7QUFDcEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFLN0QsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFtQzdELE1BQU0sT0FBTyx3QkFBeUIsU0FBUSxTQUFTO0lBQzlDLE1BQU0sQ0FBQyxPQUFPLEdBQUcsbUJBQW1CLENBQUM7SUFFNUMsTUFBTSxLQUFLLGtCQUFrQjtRQUMzQixPQUFPO1lBQ0wsSUFBSTtZQUNKLE9BQU87WUFDUCxPQUFPO1lBQ1AsWUFBWTtZQUNaLGFBQWE7WUFDYixVQUFVO1lBQ1YsS0FBSztZQUNMLE9BQU87WUFDUCxRQUFRO1lBQ1IsWUFBWTtZQUNaLFdBQVc7WUFDWCxLQUFLO1lBQ0wsT0FBTztZQUNQLFFBQVE7WUFDUixtQkFBbUI7WUFDbkIsZUFBZTtZQUNmLHFCQUFxQjtZQUNyQixjQUFjO1lBQ2QsWUFBWTtZQUNaLGVBQWU7WUFDZixpQkFBaUI7WUFDakIsWUFBWTtZQUNaLEtBQUs7U0FDTixDQUFDO0lBQ0osQ0FBQztJQUVTLGtCQUFrQjtRQUMxQixPQUFPLENBQUMsSUFBSSxFQUFFLFdBQVcsRUFBRSxVQUFVLENBQUMsQ0FBQztJQUN6QyxDQUFDO0lBRU0sS0FBSyxHQUFVLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO0lBRXBDLGdCQUFnQjtRQUN4QixPQUFPO1lBQ0wsRUFBRSxFQUFFLENBQUM7WUFDTCxTQUFTLEVBQUUsQ0FBQztZQUNaLFNBQVMsRUFBRSxDQUFDO1lBQ1osVUFBVSxFQUFFLEVBQUU7WUFDZCxRQUFRLEVBQUUsQ0FBQztZQUNYLE1BQU0s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