https://alvisse.lu/assets/js/cart-9e5b94be920d05f08df04782fd49bb1a.js

1import {
2    trans,
3    setLocale,
4    REMOVE
5} from '../translator.js';
6import { Modal } from 'bootstrap';
7// Add to cart
8setLocale(LOCALE);
9
10export const cart = {
11    clickButton: function () {
12
13        const button = this;
14        console.log(this)
15        cart.getButtonsToAdd(button)
16
17    },
18    getButtonsToAdd: function (button) {
19        if(button.classList.contains('clicked') === false) {
20            const memberGiftId = button.getAttribute('data-id');
21
22            fetch(`/${locale}/cadeaux/my-cart/add/${memberGiftId}`, {method: 'POST'})
23                .then(response => response.json())
24                .then(response => {
25
26                    if (response.status === 'ok') {
27                        const numGiftCart = document.getElementById('countGifts');
28                        let nbGifts = numGiftCart.textContent;
29                        nbGifts = parseInt(nbGifts);
30                        nbGifts++;
31                        numGiftCart.textContent = nbGifts;
32                        button.classList.add('clicked');
33                    }
34                })
35        }
36    }
37}
38
39
40// See cart modal
41const btnCart = document.getElementById('seeCart');
42if (btnCart) {
43    btnCart.addEventListener('click', () => {
44        fetch(`/${locale}/cadeaux/my-cart/products`, {method: 'POST'})
45            .then(response => response.json())
46            .then(response => {
47
48                let totalPrice = 0;
49
50                if (response.status === 'ok') {
51                    const containerProductsCart = document.getElementById('containerProductsCart');
52                    containerProductsCart.innerHTML = '';
53
54                    for (let product of response.products) {
55                        let priceProduct = product[0].price;
56                        if (product[0].priceCatalog) {
57                            priceProduct = product[0].priceCatalog;
58                        }
59
60                        const htmlProduct = `
61                    <div class="col-md-12 col-lg-12 m-auto modal-info row bg-white pl-0 mt-2 product-single">
62                        <div class="col-5 col-md-2 img-product pl-0 h-100">
63                            <div style="background:url(/uploads/${product[0].image})no-repeat center;background-size:contain!important;" class="w-100 h-100"></div>
64                        </div>
65                        <div class="name-product col-7 col-md-6 d-flex flex-column justify-content-center">
66                            ${product[0].name}<br>
67                            <span>${product[0].position ? product[0].position : ''} ${product[0].ref}</span>
68                        </div>
69                        <div class="price-product col-md-2 d-flex align-items-center red">
70                            ${priceProduct}€
71                        </div>
72                        <div class="remove-product col-md-2 d-flex align-items-center">
73                            <a href="#" class="remove-product-cart red" data-id="${product[0].id}" data-price="${priceProduct}">`+trans(REMOVE)+`</a>
74                        </div>
75                    </div>`;
76
77                        containerProductsCart.insertAdjacentHTML('afterbegin', htmlProduct);
78                        totalPrice = totalPrice + priceProduct;
79                    }
80
81                    totalPrice = Math.round(totalPrice * 100) / 100
82
83                    const totalProducts = `
84                    <div class="col-md-12 col-lg-12 m-auto modal-info row bg-white pl-0 mt-2 product-single total-product pr-0">
85                        <div class="col-6 col-md-6 red">Total</div>
86                        <div class="col-6 col-md-6 d-flex justify-content-end red" id="totalPrice">
87                            ${totalPrice}€
88                        </div>
89                    </div>
90                    `;
91                    containerProductsCart.insertAdjacentHTML('beforeend', totalProducts);
92
93                    const cartModal = new Modal('.modal-my-cart', {})
94
95                    // REMOVE PRODUCT IN CART
96                    let btnsToRemove = document.getElementsByClassName('remove-product-cart');
97                    for (let btnRemove of btnsToRemove) {
98
99                        btnRemove.addEventListener('click', () => {
100                            const memberGiftId = btnRemove.getAttribute('data-id');
101                            const memberGiftPrice = btnRemove.getAttribute('data-price');
102
103                            fetch(`/${locale}/cadeaux/my-cart/remove/${memberGiftId}`, {method: 'POST'})
104                                .then(response => response.json())
105                                .then(response => {
106
107                                    if (response.status === 'ok') {
108                                        // Change nb products in cart
109                                        const numGiftCart = document.getElementById('countGifts');
110                                        let nbGifts = numGiftCart.textContent;
111                                        nbGifts = parseInt(nbGifts);
112                                        nbGifts--;
113                                        numGiftCart.textContent = nbGifts;
114
115                                        // Remove product in the cart
116                                        btnRemove.parentElement.parentElement.classList.add('remove');
117
118// btn add to cart available
119                                        let btnAddToCart = document.getElementById(`addToCart${memberGiftId}`);
120                                        if (btnAddToCart && btnAddToCart.classList.contains('clicked')) {
121                                            btnAddToCart.classList.remove('clicked');
122                                            btnAddToCart.removeAttribute('disabled');
123                                        }
124
125                                        // Change total price basket
126                                        let priceTotal = document.getElementById('totalPrice');
127                                        let priceTotalText = parseFloat(priceTotal.textContent);
128                                        priceTotalText = priceTotalText - memberGiftPrice;
129                                        priceTotalText = Math.round(priceTotalText * 100) / 100
130                                        priceTotal.textContent = `${priceTotalText}€`;
131
132                                        if(priceTotalText === 0) {
133                                            cartModal.hide();
134                                        }
135
136
137                                    }
138                                })
139                        })
140                    }
141                    cartModal.show();
142                }
143            })
144    })
145}
146
147
148$(document).on('click', '.cart-button', cart.clickButton);
149
150