-
Overzicht
-
-
-
-
-
+
Winkelmand
+
-
-
+
Betaling
+
- Totaal
-
Selecteer eerst een Mediacode!
+
Mediacode verplicht!
@@ -128,43 +139,48 @@
function salesApp() {
return {
isLoggedIn: false, currentUser: '', loginForm: { username: '', password: '' },
- products: [], upsellOptions: [], cart: [], activeProduct: null,
- selectedProductId: '', selectedVariationId: '', variations: [],
- payment_method: 'mollie_methods_ideal', submitting: false,
+ products: [], paymentMethods: [], upsellOptions: [], cart: [], activeProduct: null,
+ selectedProductId: '', selectedVariationId: '', variations: [], payment_method: '',
+ submitting: false,
form: { initials: '', lastname: '', postcode: '', houseno: '', suffix: '', street: '', city: '', email: '', dob: '', phone: '' },
meta: { mediacode: '' },
async doLogin() {
const res = await fetch('api.php?action=login', { method: 'POST', body: JSON.stringify(this.loginForm) });
- const data = await res.json();
- if(data.success) { this.isLoggedIn = true; this.currentUser = data.user; this.initData(); }
- else { alert(data.error); }
+ if(res.ok) {
+ const data = await res.json();
+ this.isLoggedIn = true; this.currentUser = data.user;
+ await this.initData();
+ } else { alert("Login mislukt"); }
},
- checkAuth() { if (document.cookie.includes('PHPSESSID')) { /* Optionele check */ } },
-
async initData() {
- const res = await fetch('api.php?action=get_products');
- this.products = await res.json();
- },
-
- async lookupAddress() {
- if (this.form.postcode.length >= 6 && this.form.houseno) {
- const res = await fetch(`api.php?action=postcode_check&postcode=${this.form.postcode}&number=${this.form.houseno}`);
- const data = await res.json();
- if (data.street) { this.form.street = data.street.toUpperCase(); this.form.city = data.city.toUpperCase(); }
+ const [pRes, mRes] = await Promise.all([
+ fetch('api.php?action=get_products'),
+ fetch('api.php?action=get_payment_methods')
+ ]);
+ this.products = await pRes.json();
+ let methods = await mRes.json();
+ this.paymentMethods = methods.map(m => {
+ let iconKey = m.id.replace('mollie_wc_gateway_', '');
+ if (m.id.includes('riverty')) iconKey = 'riverty';
+ if (m.id.includes('klarna')) iconKey = 'klarna';
+ if (m.id.includes('in3')) iconKey = 'in3';
+ return { ...m, image: `https://www.mollie.com/external/icons/payment-methods/${iconKey}.svg` };
+ });
+ if(this.paymentMethods.length > 0) {
+ const ideal = this.paymentMethods.find(m => m.id.includes('ideal'));
+ this.payment_method = ideal ? ideal.id : this.paymentMethods[0].id;
}
},
selectProduct() {
const p = this.products.find(x => x.id == this.selectedProductId);
if(!p) return;
- this.activeProduct = p;
- this.variations = p.variation_details || [];
- this.cart = [];
- this.selectedVariationId = '';
+ this.activeProduct = p; this.variations = p.variation_details || [];
+ this.cart = []; this.selectedVariationId = '';
if (p.type !== 'variable') {
- this.cart = [{ id: parseInt(p.id), name: p.name, price: p.price }];
+ this.cart.push({ id: parseInt(p.id), name: p.name, price: p.price });
this.loadUpsells(p);
}
},
@@ -179,17 +195,25 @@
loadUpsells(product) {
this.upsellOptions = [];
if (product.upsell_ids && product.upsell_ids.length > 0) {
- this.upsellOptions = this.products.filter(x => product.upsell_ids.includes(x.id));
+ const idsToFind = product.upsell_ids.map(id => parseInt(id));
+ this.upsellOptions = this.products.filter(p => idsToFind.includes(parseInt(p.id)));
}
},
- getVarName(v) { return v.attributes.map(a => a.option).join(' '); },
- toggleUpsell(u) {
- const idx = this.cart.findIndex(i => i.id === u.id);
- idx > -1 ? this.cart.splice(idx, 1) : this.cart.push({ id: parseInt(u.id), name: u.name, price: u.price });
+ removeFromCart(index) {
+ this.cart.splice(index, 1);
},
- isInCart(id) { return this.cart.some(i => i.id === id); },
- get total() { return this.cart.reduce((s, i) => s + parseFloat(i.price), 0).toFixed(2); },
+
+ getVarName(v) { return v.attributes.map(a => a.option).join(' '); },
+
+ toggleUpsell(u) {
+ const idx = this.cart.findIndex(i => parseInt(i.id) === parseInt(u.id));
+ if(idx > -1) { this.cart.splice(idx, 1); }
+ else { this.cart.push({ id: parseInt(u.id), name: u.name, price: u.price }); }
+ },
+
+ isInCart(id) { return this.cart.some(i => parseInt(i.id) === parseInt(id)); },
+ get total() { return this.cart.reduce((sum, item) => sum + parseFloat(item.price), 0).toFixed(2); },
formatInitials() { let v = this.form.initials.replace(/[^a-z]/gi, '').toUpperCase(); this.form.initials = v.split('').join('.') + (v ? '.' : ''); },
formatLastname() { this.form.lastname = this.form.lastname.charAt(0).toUpperCase() + this.form.lastname.slice(1); },
@@ -199,18 +223,25 @@
this.submitting = true;
const payload = {
payment_method: this.payment_method, mediacode_internal: this.meta.mediacode,
- billing: { first_name: this.form.initials, last_name: this.form.lastname, address_1: (this.form.street + ' ' + this.form.houseno).trim(), city: this.form.city, postcode: this.form.postcode, country: 'NL', email: this.form.email, phone: this.form.phone },
+ billing: { first_name: this.form.initials, last_name: this.form.lastname, address_1: (this.form.street + ' ' + this.form.houseno + ' ' + (this.form.suffix || '')).trim(), city: this.form.city, postcode: this.form.postcode, country: 'NL', email: this.form.email, phone: this.form.phone },
line_items: this.cart.map(i => ({ product_id: i.id, variation_id: i.variation_id || 0, quantity: 1 }))
};
try {
const res = await fetch('api.php?action=create_order', { method: 'POST', body: JSON.stringify(payload) });
const result = await res.json();
- if(result.payment_url) { alert("SUCCES! De order is geplaatst."); window.location.reload(); }
+ if(result.payment_url) { alert("Succes! De order is aangemaakt."); this.cart = []; this.selectedProductId = ''; this.form = { initials: '', lastname: '', postcode: '', houseno: '', suffix: '', street: '', city: '', email: '', dob: '', phone: '' }; }
else { alert("Fout: " + result.error); }
} catch(e) { alert("Systeemfout"); }
this.submitting = false;
},
- async doLogout() { await fetch('api.php?action=logout'); location.reload(); }
+ async doLogout() { await fetch('api.php?action=logout'); location.reload(); },
+ async lookupAddress() {
+ if (this.form.postcode.length >= 6 && this.form.houseno) {
+ const res = await fetch(`api.php?action=postcode_check&postcode=${this.form.postcode}&number=${this.form.houseno}`);
+ const data = await res.json();
+ if (data.street) { this.form.street = data.street.toUpperCase(); this.form.city = data.city.toUpperCase(); }
+ }
+ }
}
}