https://shop.pv-magazine.com/wp-content/themes/pvmagazine/blocks/mini-basket-dropdown/script.js?ver=1743584609

1class MiniBasketDropdown {
2    /**
3     * Init the class
4     *
5     */
6    constructor(root) {
7        const self = this
8        this.root = root
9        this.cta = root.querySelector('.shop-cta')
10        this.products = root.querySelectorAll('.pvmagazine-mini-basket-dropdown__product')
11        this.productCount = root.querySelector('.shop-cta__count')
12        this.productsEmpty = root.querySelector('.pvmagazine-mini-basket-dropdown__products-empty')
13        this.toggleCta = root.querySelector('.pvmagazine-mini-basket-dropdown__toggle-container')
14        this.manualReload = root.dataset.manualReload
15        
16        root.addEventListener('click', function (e) {
17            self.quantityPlusMinus(e)
18            self.deleteProduct(e)
19            self.closeBasket(e)
20        })
21
22        if(this.cta) {
23            this.cta.addEventListener('click', function(e) {
24                e.preventDefault();
25                if(e.target.nextElementSibling && e.target.nextElementSibling.classList.contains('pvmagazine-mini-basket-dropdown')) {
26                    e.target.nextElementSibling.classList.add('mobile-basket-open')
27                    document.body.classList.add('basket-open')
28                }
29            })
30        }
31
32        if(this.toggleCta) {
33            this.toggleCta.addEventListener('click', function() {
34                if(this.classList.contains('open')) {
35                    this.classList.remove('open')
36                } else {
37                    this.classList.add('open')
38                }
39            })
40        }
41
42        document.addEventListener('DOMContentLoaded', function () {
43
44            jQuery(document.body).on('updated_wc_div', function () {
45                self.reloadMiniBasket();
46            });
47
48            jQuery(document.body).on('wc_fragment_refresh', function () {
49                self.reloadMiniBasket();
50            });
51
52            jQuery(document.body).on('added_to_cart', function () {
53                self.reloadMiniBasket();
54            });
55
56            jQuery(document.body).on('removed_from_cart', function () {
57                self.reloadMiniBasket();
58            });
59        })
60
61    }
62
63    reloadMiniBasket() {
64        const settings = {
65            action: 'reload_mini_basket',
66            nonce: ajax_params.ajax_nonce,
67        };
68
69        fetch(ajax_params.ajaxurl, {
70            method: 'POST',
71            credentials: 'same-origin',
72            headers: {
73                'Content-Type': 'application/x-www-form-urlencoded',
74                'Cache-Control': 'no-cache',
75            },
76            body: new URLSearchParams(settings),
77        })
78            .then(function (response) {
79                if (response.ok) {
80                    return response.text();
81                }
82                throw new Error('Something went wrong');
83            })
84            .then((data) => {
85                const response = JSON.parse(data);
86                if (response.data && response.data.basket_html) {
87                    this.root.innerHTML = response.data.basket_html
88                    let container = this.root.querySelector('.pvmagazine-mini-basket-dropdown')
89                    window.scroll({
90                        top: 0, 
91                        left: 0, 
92                        behavior: 'smooth' 
93                    });   
94
95                    if(container) {
96                        container.classList.add('basket-active')
97                        setTimeout(() => {
98                            container.classList.remove('basket-active')
99                        }, '3000');
100                    }
101                }
102            })
103            .catch((error) => {
104                // eslint-disable-next-line no-console
105                console.log(error);
106            });
107    }
108
109    quantityPlusMinus(event) {
110        if (event.target.matches('button.plus') || event.target.matches('button.minus')) {
111            const container = event.target.closest('.quantity')
112
113            if (!container) return;
114
115            let qty = container.querySelector('.qty');
116            let val = parseFloat(qty.value);
117            let max = parseFloat(qty.getAttribute('max'));
118            let min = parseFloat(qty.getAttribute('min'));
119            let step = parseFloat(qty.getAttribute('step'));
120
121            if (event.target.classList.contains('plus')) {
122                if (max && (max <= val)) {
123                    qty.value = max;
124                } else {
125                    qty.value = val + step;
126                }
127            } else {
128                if (min && (min >= val)) {
129                    qty.value = min;
130                } else if (val > 1) {
131                    qty.value = val - step;
132                }
133            }
134
135            const product = event.target.closest('.pvmagazine-mini-basket-dropdown__product')
136            let productId = ''
137            let cartKey = ''
138            if (product) {
139                productId = product.getAttribute('data-product-id')
140                cartKey = product.getAttribute('data-cart_item_key')
141            }
142
143            const settings = {
144                action: 'update_quantity_product_from_mini_basket',
145                product_id: productId,
146                quantity: qty.value,
147                cart_item_key: cartKey,
148                nonce: ajax_params.ajax_nonce,
149            };
150
151            fetch(ajax_params.ajaxurl, {
152                method: 'POST',
153                credentials: 'same-origin',
154                headers: {
155                    'Content-Type': 'application/x-www-form-urlencoded',
156                    'Cache-Control': 'no-cache',
157                },
158                body: new URLSearchParams(settings),
159            })
160                .then(function (response) {
161                    if (response.ok) {
162                        return response.text();
163                    }
164                    throw new Error('Something went wrong');
165                })
166                .then((data) => {
167                    const response = JSON.parse(data);
168                    this.updateSubTotal(response.data)
169                })
170                .catch((error) => {
171                    // eslint-disable-next-line no-console
172                    console.log(error);
173                });
174        }
175    }
176
177    closeBasket(event) {
178        if (event.target.matches('.pvmagazine-mini-basket-dropdown__close')) {
179            const container = event.target.closest('.pvmagazine-mini-basket-dropdown')
180            if(container) {
181                document.body.classList.remove('basket-open')
182                container.classList.remove('mobile-basket-open')
183            }
184        }
185    }
186
187
188    deleteProduct(event) {
189        if (event.target.matches('.pvmagazine-mini-basket-dropdown__delete-btn')) {
190            const product = event.target.closest('.pvmagazine-mini-basket-dropdown__product')
191
192            if (!product) return;
193            let cartKey = product.getAttribute('data-cart_item_key')
194
195            const settings = {
196                action: 'remove_product_from_mini_basket',
197                cart_item_key: cartKey,
198                nonce: ajax_params.ajax_nonce,
199            };
200
201            product.remove()
202
203            fetch(ajax_params.ajaxurl, {
204                method: 'POST',
205                credentials: 'same-origin',
206                headers: {
207                    'Content-Type': 'application/x-www-form-urlencoded',
208                    'Cache-Control': 'no-cache',
209                },
210                body: new URLSearchParams(settings),
211            })
212                .then(function (response) {
213                    if (response.ok) {
214                        return response.text();
215                    }
216                    throw new Error('Something went wrong');
217                })
218                .then((data) => {
219                    const response = JSON.parse(data);
220                    this.updateSubTotal(response.data)
221
222                    let products = this.root.querySelectorAll('.pvmagazine-mini-basket-dropdown__product')
223                    if (!products.length && this.productsEmpty) {
224                        this.productsEmpty.classList.add('active')
225                    }
226                })
227                .catch((error) => {
228                    // eslint-disable-next-line no-console
229                    console.log(error);
230                });
231        }
232    }
233
234
235    updateSubTotal(data) {
236        let usd = this.root.querySelector('.pvmagazine-mini-basket-dropdown__usd')
237        let eur = this.root.querySelector('.pvmagazine-mini-basket-dropdown__eur')
238
239        if (usd && data.sub_total_usd) {
240            usd.innerHTML = data.sub_total_usd
241        } else if (usd) {
242            usd.innerHTML = ''
243        }
244
245        if (eur && data.sub_total_eur) {
246            eur.innerHTML = data.sub_total_eur
247        } else if (eur) {
248            eur.innerHTML = ''
249        }
250

251        if (this.productCount) {
252            this.productCount.innerHTML = data.total_quantity
253        }
254
255        if(this.manualReload) {
256            location.reload();
257        }
258    }
259}
260
261(() => {
262    const miniBaskets = document.querySelectorAll('.pvmagazine-mini-basket-dropdown__block')
263    miniBaskets.forEach(miniBasket => {
264        new MiniBasketDropdown(miniBasket);
265    });
266})();