https://everythingreps.shop/muban/muban01/static/js/cart.js

1function getCartItems(key = 'cartItems') {
2    try {
3        const data = JSON.parse(localStorage.getItem(key));
4        return Array.isArray(data) ? data : [];
5    } catch (e) {
6        return [];
7    }
8}
9
10function parsePrice(price) {
11    if (price === null || price === undefined) return 0;
12    if (typeof price === 'number') return price;
13    return parseFloat(String(price).replace(/[^0-9.]/g, '')) || 0;
14}
15
16function formatPrice(price) {
17    const value = parsePrice(price);
18    return window.IS_DE
19        ? value.toFixed(2).replace('.', ',') + ' €'
20        : '$' + value.toFixed(2);
21}
22
23function getText(deText, enText) {
24    return window.IS_DE ? deText : enText;
25}
26
27const cartTableBody = document.getElementById('cart-table-body');
28const headerCartTableBody = document.getElementById('header-cart-body');
29const headerCartTableTotalBody = document.getElementById('cart-table-total');
30const checkoutSubtotalBody = document.getElementById('checkout-subtotal');
31const checkoutSubtotalAfterPayBody = document.getElementById('checkout-subtotal-after-pay');
32
33function renderCartItems() {
34    if (cartTableBody == null) {
35        return;
36    }
37
38    cartTableBody.innerHTML = '';
39
40    const cartArray = getCartItems('cartItems');
41
42    cartArray.forEach((item, index) => {
43        const productImage = item.productImage || '';
44        const productModel = item.productModel || '';
45        const productDiscount = parsePrice(item.productDiscount);
46        const quantity = parseInt(item.quantity, 10) || 1;
47        const size = item.size || '';
48        const currentQuantity = quantity;
49        const totalPrice = (productDiscount * currentQuantity).toFixed(2);
50
51        const rowsHtml = `
52            <tr>
53                <td class="text-uppercase smaller text-gray">${getText('Produkt', 'Product')}</td>
54                <td class="py-4" style="width: 8rem">
55                    <a>
56                        <img class="w-100" src="${productImage}" alt="${productModel}">
57                    </a>
58                    <a class="text-dark fs-6 fw-bold">${productModel}</a>
59                </td>
60            </tr>
61            <tr>
62                <td class="text-uppercase smaller text-gray">${getText('Preis', 'Price')}</td>
63                <td class="pe-3" style="width: 8rem">
64                    <span id="price-${index}">${formatPrice(productDiscount)}</span>
65                </td>
66            </tr>
67            <tr>
68                <td class="text-uppercase smaller text-gray">${getText('Größe', 'Size')}</td>
69                <td class="pe-3" style="width: 8rem"><span>${size}</span></td>
70            </tr>
71            <tr>
72                <td class="text-uppercase smaller text-gray">${getText('Menge', 'Quantity')}</td>
73                <td class="pe-4" style="width: 9rem">
74                    <div class="input-group input-group-sm">
75                        <button class="btn-mins btn text-gray border rounded-0" type="button" onclick="updateQuantity(${index}, -1)">−</button>
76                        <label for="quantity-input"></label>
77                        <input id="quantity-${index}" class="py-2 form-control text-center fw-bold" type="number" min="1" value="${currentQuantity}" readonly>
78                        <button class="btn-plus btn text-gray border rounded-0" type="button" onclick="updateQuantity(${index}, 1)">+</button>
79                    </div>
80                </td>
81            </tr>
82            <tr>
83                <td class="text-uppercase smaller text-gray">${getText('Gesamt', 'Total')}</td>
84                <td style="width:7rem"><span id="total-${index}" class="fw-bold">${formatPrice(totalPrice)}</span></td>
85            </tr>
86            <tr>
87                <td class="text-uppercase smaller text-gray">${getText('Aktionen', 'Actions')}</td>
88                <td>
89                    <a class="text-gray" href="javascript:void(0)" onclick="removeItem(${index})"><i class="bi bi-x-circle-fill"></i></a>
90                </td>
91            </tr>
92            <tr>
93                <td colspan="2"><hr></td>
94            </tr>
95        `;
96        cartTableBody.insertAdjacentHTML('beforeend', rowsHtml);
97    });
98}
99
100function updateQuantity(index, change) {
101    const quantityInput = document.getElementById(`quantity-${index}`);

102    let currentQuantity = quantityInput ? parseInt(quantityInput.value, 10) : 1;
103
104    if (isNaN(currentQuantity)) {
105        currentQuantity = 1;
106    }
107
108    currentQuantity += change;
109    if (currentQuantity < 1) currentQuantity = 1;
110
111    const cartItems = getCartItems('cartItems');
112    const item = cartItems[index];
113    if (!item) return;
114
115    item.quantity = currentQuantity;
116    localStorage.setItem('cartItems', JSON.stringify(cartItems));
117
118    const unitPrice = parsePrice(item.productDiscount);
119    const updatedTotalPrice = (unitPrice * currentQuantity).toFixed(2);
120
121    const priceEl = document.getElementById(`price-${index}`);
122    const totalEl = document.getElementById(`total-${index}`);
123
124    if (quantityInput) quantityInput.value = currentQuantity;
125    if (priceEl) priceEl.textContent = formatPrice(unitPrice);
126    if (totalEl) totalEl.textContent = formatPrice(updatedTotalPrice);
127
128    updateCartQuantity();
129}
130
131function removeItem(cartIndex) {
132    const cartArray = getCartItems('cartItems');
133    if (cartIndex < 0 || cartIndex >= cartArray.length) {
134        return;
135    }
136
137    cartArray.splice(cartIndex, 1);
138    localStorage.setItem('cartItems', JSON.stringify(cartArray));
139
140    renderCheckoutItems();
141    renderFirstCheckoutItems();
142    renderCheckoutSubtotalBody();
143    renderCheckoutTotalBody();
144    renderCheckoutTotalLastBody();
145    updateCartQuantity();
146    renderCartItems();
147}
148
149function renderHeaderCartItems() {
150    if (headerCartTableBody == null) {
151        return;
152    }
153
154    headerCartTableBody.innerHTML = '';
155
156    const headerCartArray = getCartItems('cartItems');
157    if (headerCartArray.length === 0) {
158        return;
159    }
160
161    headerCartArray.forEach((item) => {
162        const productImage = item.productImage || '';
163        const productModel = item.productModel || '';
164        const productDiscount = parsePrice(item.productDiscount);
165        const quantity = parseInt(item.quantity, 10) || 0;
166        const size = item.size || '';
167        const cleanedProductImage = String(productImage).replace(/"/g, '&quot;');
168
169        const itemHtml = `
170            <div class="border-bottom border-silver py-3 d-flex align-items-center gap-3">
171                <span class="d-block" style="max-width: 80px;">
172                    <img class="border border-silver" src="${cleanedProductImage}" alt="${productModel}">
173                </span>
174                <div>
175                    <span class="d-block small fw-bold text-dark mb-1">${productModel}</span>
176                    <span class="d-block small fw-bold text-dark mb-1">${getText('Größe', 'Size')}: ${size}</span>
177                    <span class="text-muted small">
178                        <span style="color: black" class="me-1">${quantity}</span>x
179                        <span style="color: black" class="ms-1">${formatPrice(productDiscount)}</span>
180                    </span>
181                </div>
182            </div>
183        `;
184
185        headerCartTableBody.insertAdjacentHTML('beforeend', itemHtml);
186    });
187}
188
189function updateCartQuantity() {
190    const cartArray = getCartItems('cartItems');
191    const totalQuantity = cartArray.reduce((sum, item) => sum + (parseInt(item.quantity, 10) || 0), 0);
192
193    const cartTotalEl = document.getElementById('cart-total');
194    if (cartTotalEl) {
195        cartTotalEl.textContent = totalQuantity;
196    }
197
198    try {
199        if (window.parent && window.parent !== window) {
200            const parentCartTotal = window.parent.document.getElementById('cart-total');
201            if (parentCartTotal) {
202                parentCartTotal.textContent = totalQuantity;
203            }
204        }
205    } catch (e) {}
206
207    renderHeaderCartItems();
208    renderHeaderCartItemsTotal();
209    renderMidCartItemsTotal();
210    renderCartMidFinalTotal();
211    renderCheckoutItems();
212    renderFirstCheckoutItems();
213    renderCheckoutSubtotalBody();
214    renderCheckoutTotalBody();
215    renderCheckoutTotalLastBody();
216    renderCheckoutSubtotalAfterPayBody();
217    renderCheckoutAfterPayItems();
218}
219
220function renderHeaderCartItemsTotal() {
221    if (headerCartTableTotalBody == null) {
222        return;
223    }
224
225    const cartArray = getCartItems('cartItems');
226    if (cartArray.length === 0) {
227        headerCartTableTotalBody.innerHTML = '';
228        return;
229    }
230
231    let total = 0;
232
233    cartArray.forEach(item => {
234        total += parsePrice(item.productDiscount) * (parseInt(item.quantity, 10) || 0);
235    });
236
237    total = total.toFixed(2);
238    headerCartTableTotalBody.innerHTML = '';
239
240    const itemHtml = `
241        <div class="py-3 d-flex algin-items-center justify-content-between">

242            <span class="fs-6 fw-bold text-dark">${getText('Zwischensumme:', 'SubTotal:')}</span>
243            <span class="fs-6 fw-bold" id="headerCartTotal">${formatPrice(total)}</span>
244        </div>
245        <div class="d-flex gap-3 py-3">
246            <a style="background-color: #007bff" class="btn btn-outline-dark rounded-0 fw-bold w-50" href="/cart">${getText('Warenkorb ansehen', 'View Cart')}</a>
247            <a style="background-color: #28a745" class="btn btn-primary rounded-0 fw-bold w-50" href="/checkout">${getText('Zur Kasse', 'Checkout')}</a>
248        </div>
249    `;
250    headerCartTableTotalBody.insertAdjacentHTML('beforeend', itemHtml);
251}
252
253function renderMidCartItemsTotal() {
254    const midCartTableTotalBody = document.getElementById('cart-mid-subtotal');
255
256    if (midCartTableTotalBody == null) {
257        return;
258    }
259
260    const cartArray = getCartItems('cartItems');
261    if (cartArray.length === 0) {
262        midCartTableTotalBody.innerHTML = '';
263        return;
264    }
265
266    let total = 0;
267
268    cartArray.forEach(item => {
269        total += parsePrice(item.productDiscount) * (parseInt(item.quantity, 10) || 0);
270    });
271
272    total = total.toFixed(2);
273    midCartTableTotalBody.innerHTML = '';
274
275    const itemHtml = `
276        <span class="fw-bold text-gray">${getText('Zwischensumme', 'Subtotal')} </span>
277        <span class="fw-bold">${formatPrice(total)}</span>
278    `;
279    midCartTableTotalBody.insertAdjacentHTML('beforeend', itemHtml);
280}
281
282function renderCartMidFinalTotal() {
283    const cartMidFinalTotal = document.getElementById('cart-mid-final-total');
284
285    if (cartMidFinalTotal == null) {
286        return;
287    }
288
289    const cartArray = getCartItems('cartItems');
290    if (cartArray.length === 0) {
291        cartMidFinalTotal.innerHTML = '';
292        return;
293    }
294
295    let total = 0;
296
297    cartArray.forEach(item => {
298        total += parsePrice(item.productDiscount) * (parseInt(item.quantity, 10) || 0);
299    });
300
301    total = total.toFixed(2);
302    cartMidFinalTotal.innerHTML = '';
303
304    const itemHtml = `
305        <span class="fw-bold">${getText('Gesamt', 'Total')} </span>
306        <span class="fs-5 fw-bolder">${formatPrice(total)} </span>
307    `;
308    cartMidFinalTotal.insertAdjacentHTML('beforeend', itemHtml);
309}
310
311function renderCheckoutItems() {
312    const checkoutItems = document.getElementById('checkout-product-info');
313
314    if (checkoutItems == null) {
315        return;
316    }
317
318    checkoutItems.innerHTML = '';
319
320    const headerCartArray = getCartItems('cartItems');
321    if (headerCartArray.length === 0) {
322        return;
323    }
324
325    headerCartArray.forEach((item) => {
326        const productImage = item.productImage || '';
327        const productModel = item.productModel || '';
328        const quantity = parseInt(item.quantity, 10) || 0;
329        const size = item.size || '';
330        const price = (quantity * parsePrice(item.productDiscount)).toFixed(2);
331
332        const itemHtml = `
333            <div class="d-flex justify-content-between small mb-2">
334                <div class="d-flex align-items-center">
335                    <img src="${productImage}" alt="Product Image" style="width: 40px; height: 40px;" class="me-2">
336                    <p class="text-black mb-0">
337                        <strong>${productModel}</strong>
338                        <span class="ms-2">x</span>
339                        <span class="text-black ms-2">${quantity}</span>
340                        ${size !== null && size !== 'OS' ? `<span class="text-black ms-2">${getText('Größe', 'Size')}: ${size}</span>` : ''}
341                    </p>
342                </div>
343                <span class="fw-bold">${formatPrice(price)}</span>
344            </div>
345        `;
346
347        checkoutItems.insertAdjacentHTML('beforeend', itemHtml);
348    });
349}
350document.addEventListener('DOMContentLoaded', renderCheckoutItems);
351
352function renderFirstCheckoutItems() {
353    const checkoutItems = document.getElementById('checkout-product-info-check');
354
355    if (checkoutItems == null) {
356        return;
357    }
358
359    checkoutItems.innerHTML = '';
360
361    const headerCartArray = getCartItems('cartItems');
362    if (headerCartArray.length === 0) {
363        return;
364    }
365
366    headerCartArray.forEach((item, index) => {
367        const productImage = item.productImage || '';
368        const productModel = item.productModel || '';
369        const quantity = parseInt(item.quantity, 10) || 0;
370        const size = item.size || '';
371        const price = (quantity * parsePrice(item.productDiscount)).toFixed(2);
372        const cleanedProductImage = String(productImage).replace(/"/g, '&quot;');
373
374        const itemHtml = `
375            <div class="d-flex justify-content-between small mb-2">
376                <div class="d-flex align-items-center">
377                    <td>
378                        <a style="margin-right: 10px" class="text-gray" href="javascript:void(0)" onclick="removeItem(${index})">
379                            <i class="bi bi-x-circle-fill"></i>
380                        </a>
381                    </td>
382                    <img src="${cleanedProductImage}" alt="Product Image" style="width: 40px; height: 40px;" class="me-2">
383                    <p class="text-black mb-0">
384                        <strong>${productModel}</strong>

385                        <span class="ms-2">x</span>
386                        <span class="text-black ms-2">${quantity}</span>
387                        ${size !== null && size !== 'OS' ? `<span class="text-black ms-2">${getText('Größe', 'Size')}: ${size}</span>` : ''}
388                    </p>
389                </div>
390                <span class="fw-bold">${formatPrice(price)}</span>
391            </div>
392        `;
393
394        checkoutItems.insertAdjacentHTML('beforeend', itemHtml);
395    });
396}
397document.addEventListener('DOMContentLoaded', renderFirstCheckoutItems);
398
399function renderCheckoutTotalBody() {
400    const checkoutTotalBody = document.getElementById('checkout-total');
401
402    if (checkoutTotalBody == null) {
403        return;
404    }
405
406    const shippingCost = parsePrice(localStorage.getItem('shippingCost'));
407    const cartArray = getCartItems('cartItems');
408    if (cartArray.length === 0) {
409        checkoutTotalBody.innerHTML = '';
410        return;
411    }
412
413    let total = 0;
414
415    cartArray.forEach(item => {
416        total += parsePrice(item.productDiscount) * (parseInt(item.quantity, 10) || 0);
417    });
418
419    total = total.toFixed(2);
420    total = (parseFloat(total) + shippingCost).toFixed(2);
421
422    checkoutTotalBody.innerHTML = '';
423
424    const itemHtml = `
425        <span class="fs-5 fw-bold">${getText('Gesamt', 'Total')} </span>
426        <span class="fs-5 text-primary fw-bolder">${formatPrice(total)}</span>
427    `;
428    checkoutTotalBody.insertAdjacentHTML('beforeend', itemHtml);
429}
430
431document.addEventListener('DOMContentLoaded', renderCheckoutTotalBody);
432
433function renderCheckoutTotalLastBody() {
434    const checkoutTotalBody = document.getElementById('checkout-total-last');
435
436    if (checkoutTotalBody == null) {
437        return;
438    }
439
440    const orderId = localStorage.getItem('latestOrderNo');
441    const orderData = orderId ? localStorage.getItem(orderId) : null;
442
443    let total = 0;
444    if (orderData) {
445        const orderInfo = JSON.parse(orderData);
446        total = parsePrice(orderInfo.orderPrices);
447    }
448
449    checkoutTotalBody.innerHTML = '';
450
451    const itemHtml = `
452        <span class="fs-5 fw-bold">${getText('Gesamt', 'Total')} </span>
453        <span class="fs-5 text-primary fw-bolder">${formatPrice(total)}</span>
454    `;
455    checkoutTotalBody.insertAdjacentHTML('beforeend', itemHtml);
456}
457
458document.addEventListener('DOMContentLoaded', renderCheckoutTotalLastBody);
459
460function renderCheckoutSubtotalBody() {
461    if (checkoutSubtotalBody == null) {
462        return;
463    }
464
465    const cartArray = getCartItems('cartItems');
466    if (cartArray.length === 0) {
467        checkoutSubtotalBody.innerHTML = '';
468        return;
469    }
470
471    let total = 0;
472
473    cartArray.forEach(item => {
474        total += parsePrice(item.productDiscount) * (parseInt(item.quantity, 10) || 0);
475    });
476
477    total = total.toFixed(2);
478    checkoutSubtotalBody.innerHTML = '';
479
480    const itemHtml = `
481        <h6 class="m-0 fw-bold">${getText('Zwischensumme', 'Subtotal')}</h6>
482        <span class="fw-bold">${formatPrice(total)}</span>
483    `;
484    checkoutSubtotalBody.insertAdjacentHTML('beforeend', itemHtml);
485}
486
487document.addEventListener('DOMContentLoaded', renderCheckoutSubtotalBody);
488
489function renderCheckoutSubtotalAfterPayBody() {
490    if (checkoutSubtotalAfterPayBody == null) {
491        return;
492    }
493
494    const cartArray = getCartItems('afterPayCartItems');
495    if (cartArray.length === 0) {
496        checkoutSubtotalAfterPayBody.innerHTML = '';
497        return;
498    }
499
500    let total = 0;
501
502    cartArray.forEach(item => {
503        total += parsePrice(item.productDiscount) * (parseInt(item.quantity, 10) || 0);
504    });
505
506    total = total.toFixed(2);
507    checkoutSubtotalAfterPayBody.innerHTML = '';
508
509    const itemHtml = `
510        <h6 class="m-0 fw-bold">${getText('Zwischensumme', 'Subtotal')}</h6>
511        <span class="fw-bold">${formatPrice(total)}</span>
512    `;
513    checkoutSubtotalAfterPayBody.insertAdjacentHTML('beforeend', itemHtml);
514}
515
516document.addEventListener('DOMContentLoaded', renderCheckoutSubtotalAfterPayBody);
517
518function renderCheckoutAfterPayItems() {
519    const checkoutItems = document.getElementById('checkout-product-info-after-pay');
520
521    if (checkoutItems == null) {
522        return;
523    }
524
525    checkoutItems.innerHTML = '';
526
527    const headerCartArray = getCartItems('afterPayCartItems');
528    if (headerCartArray.length === 0) {
529        return;
530    }
531
532    headerCartArray.forEach((item) => {
533        const productImage = item.productImage || '';
534        const productModel = item.productModel || '';
535        const quantity = parseInt(item.quantity, 10) || 0;
536        const size = item.size || '';
537        const price = (quantity * parsePrice(item.productDiscount)).toFixed(2);
538
539        const itemHtml = `
540            <div class="d-flex justify-content-between small mb-2">
541                <div class="d-flex align-items-center">
542                    <img src="${productImage}" alt="Product Image" style="width: 40px; height: 40px;" class="me-2">
543                    <p class="text-black mb-0">
544                        <strong>${productModel}</strong>

545                        <span class="ms-2">x</span>
546                        <span class="text-black ms-2">${quantity}</span>
547                        ${size !== null && size !== 'OS' ? `<span class="text-black ms-2">${getText('Größe', 'Size')}: ${size}</span>` : ''}
548                    </p>
549                </div>
550                <span class="fw-bold">${formatPrice(price)}</span>
551            </div>
552        `;
553
554        checkoutItems.insertAdjacentHTML('beforeend', itemHtml);
555    });
556}
557document.addEventListener('DOMContentLoaded', renderCheckoutAfterPayItems);
558
559document.addEventListener('DOMContentLoaded', function () {
560    updateCartQuantity();
561    renderCartItems();
562    renderHeaderCartItems();
563    renderHeaderCartItemsTotal();
564    renderMidCartItemsTotal();
565    renderCartMidFinalTotal();
566    renderCheckoutItems();
567    renderFirstCheckoutItems();
568    renderCheckoutSubtotalBody();
569    renderCheckoutTotalBody();
570    renderCheckoutTotalLastBody();
571    renderCheckoutSubtotalAfterPayBody();
572    renderCheckoutAfterPayItems();
573});