loadProductForm());
"
@cart-success.window="handle = ''"
x-data="{
handle: '',
upsells: [],
freeShippingThreshold: 50,
panelLoading: false,
upsellRequest: 0,
init() {
this.$watch('$store.shop.activePanel', val => {
if (val === 'add-to-cart-side-panel') {
this.$nextTick(() => this.loadUpsells());
}
});
// Alpine fires $watch even when the value is unchanged, so compare.
this.$watch('cartProductKey', (key, oldKey) => {
if (key !== oldKey && this.$store.shop.activePanel === 'add-to-cart-side-panel') this.loadUpsells();
});
let hoistPending = false;
let panelRequestPending = false;
document.addEventListener('htmx:beforeRequest', (e) => {
const panelForm = document.getElementById('panel-product-form');
if (panelForm && panelForm.contains(e.detail.elt)) {
panelRequestPending = true;
this.panelLoading = true;
}
});
document.addEventListener('htmx:beforeSwap', (e) => {
const panelForm = document.getElementById('panel-product-form');
if (panelForm && panelForm.contains(e.detail.target)) hoistPending = true;
});
document.addEventListener('htmx:afterSwap', () => {
if (hoistPending) { hoistPending = false; this.$nextTick(() => this.hoistFormFooter()); }
});
document.addEventListener('htmx:afterRequest', () => {
if (panelRequestPending) { panelRequestPending = false; this.panelLoading = false; }
});
},
loadProductForm() {
if (!this.handle) return;
const target = document.getElementById('panel-product-form');
if (target) {
htmx.ajax('GET', '/fragments/product-add-to-cart/' + this.handle, { target, swap: 'innerHTML' });
}
},
hoistFormFooter() {
const panelForm = document.getElementById('panel-product-form');
const footer = document.getElementById('panel-form-footer');
if (!panelForm || !footer) return;
const els = panelForm.querySelectorAll('[data-panel-footer]');
if (!els.length) return;
footer.innerHTML = '';
els.forEach(el => footer.appendChild(el));
},
get cartLines() { return this.$store.shop.cart.lines; },
get subtotal() { return parseFloat(this.$store.shop.cart.totalPrice || 0); },
get totalQty() { return this.$store.shop.cart.totalQuantity; },
get discount() {
let d = 0;
for (const line of this.cartLines) {
const cap = parseFloat(line.node.merchandise.compareAtPrice?.amount || 0);
const price = parseFloat(line.node.merchandise.price.amount);
if (cap > price) d += (cap - price) * line.node.quantity;
}
return d;
},
get remaining() { return Math.max(0, this.freeShippingThreshold - this.subtotal); },
get progressPct() { return Math.min(100, (this.subtotal / this.freeShippingThreshold) * 100); },
get shipFree() { return this.subtotal >= this.freeShippingThreshold && this.subtotal > 0; },
fp(amount) {
return this.$store.shop.formatPrice(typeof amount === 'number' ? amount.toFixed(2) : (amount || '0.00'));
},
hasDiscount(item) {
const cap = parseFloat(item.node.merchandise.compareAtPrice?.amount || 0);
return cap > parseFloat(item.node.merchandise.price.amount);
},
discountPct(item) {
const cap = parseFloat(item.node.merchandise.compareAtPrice?.amount || 0);
const price = parseFloat(item.node.merchandise.price.amount);
return cap > price ? Math.round((1 - price / cap) * 100) : 0;
},
// Changes when products are added or removed, not when quantities change.
get cartProductKey() {
return [...new Set(this.cartLines.map(l => l.node.merchandise.product.id))].sort().join(',');
},
async loadUpsells() {
const request = ++this.upsellRequest;
const upsells = this.cartLines.length ? await this.$store.shop.getCartUpsells() : [];
if (request === this.upsellRequest) this.upsells = upsells;
},
async addUpsell(upsell) {
if (upsell.variantCount > 1) {
this.$dispatch('open-side-panel', { handle: upsell.handle });
return;
}
const variant = upsell.variants?.edges[0]?.node;
if (!variant) return;
await this.$store.shop.addToCart({
merchandiseId: variant.id,
productId: upsell.id,
title: upsell.title,
});
const filtered = this.upsells.filter(u => u.id !== upsell.id);
this.upsells = filtered;
},
}"
>
Uw winkelmandje is leeg
Voeg producten toe om verder te gaan
Maak uw bestelling compleet
Korting
Nog voor gratis verzending
Gelukt — u heeft gratis verzending
9
·
2361
reviews
· Feedback Company