loadProductForm());
"
@cart-success.window="handle = ''"
x-data="{
handle: '',
upsells: [],
upsellIndex: 0,
freeShippingThreshold: 50,
panelLoading: false,
init() {
this.$watch('$store.shop.activePanel', val => {
if (val === 'add-to-cart-side-panel') {
this.$nextTick(() => 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 (panelRequestPending) { panelRequestPending = false; this.panelLoading = false; }
if (hoistPending) { hoistPending = false; this.$nextTick(() => this.hoistFormFooter()); }
});
document.addEventListener('htmx:responseError', () => {
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;
},
async loadUpsells() {
if (!this.cartLines.length) { this.upsells = []; return; }
const productId = this.cartLines[0].node.merchandise.product.id;
this.upsells = await this.$store.shop.getProductRecommendations(productId);
},
async addUpsell(upsell) {
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;
this.upsellIndex = Math.min(this.upsellIndex, Math.max(0, filtered.length - 2));
},
upsellPrev() { this.upsellIndex = Math.max(0, this.upsellIndex - 1); },
upsellNext() { this.upsellIndex = Math.min(Math.max(0, this.upsells.length - 2), this.upsellIndex + 1); },
}"
>
×
Uw winkelmandje is leeg
Voeg producten toe om verder te gaan
Verder winkelen
Maak uw bestelling compleet
‹
›
+ Toevoegen
Korting
Verzending
Nog voor gratis verzending
Gelukt — u heeft gratis verzending
Verder naar bestellen
9
·
2285
reviews
· Feedback Company