https://cosibella.cz/blog/wp-content/themes/blog-wordpress/js/libs/hotspot.js

1import addToCart from './addToCart.js'
2import customCreateDomElement from './utils/customCreateDomElement.js'
3
4const initLoader = (elem) => {
5    const loader = customCreateDomElement('div', ['btn-spinner', 'spinner-border'], null)
6    elem.appendChild(loader)
7    elem.classList.add('--loading')
8}
9
10const removeLoader = (elem) => {
11    elem.classList.remove('--loading')
12}
13
14async function fetchAndRenderProducts(productsTable) {
15    const prodArray = []
16
17    for (let i = 0; i < productsTable.length; i++) {
18        const query = `
19            {
20                product(productId: ${productsTable[i]}) {
21                    product {
22                        id
23                        name
24                        link
25                        icon
26                        price {
27                        price {
28                            gross {
29                                formatted
30                            }
31                        }
32                        }
33                        sizes {
34                            availability {
35                                status
36                            }
37                        }
38                    }
39                }
40            }
41        `
42
43        const endpoint = 'https://cosibella.cz/graphql/v1/?docLang=pl'
44
45        const requestData = {
46            method: 'POST',
47            headers: {
48                'Content-Type': 'application/json',
49            },
50            body: JSON.stringify({ query }),
51        }
52
53        try {
54            const response = await fetch(endpoint, requestData)
55            if (response.ok) {
56                const data = await response.json()
57                const product = data.data.product.product
58
59                if (product.sizes != null) {
60                    const tpl = `
61              <a class="product__icon" href="${product.link}" title="${product.name}" target="_blank"><img src="${product.icon}" alt="${product.name}"></a>
62              <h3><a class="product__name" href="${product.link}" title="${product.name}" target="_blank">${product.name}</a></h3>
63              <div class="product__prices" style="min-height: 28.3438px;">
64                <strong class="price">${product.price.price.gross.formatted}</strong>
65              </div>
66              <button class="btn product__btn addToCart">Přidat do košíku</button>
67            `
68                    const divElement = customCreateDomElement('div', ['product'], tpl)
69                    divElement.querySelector('.addTocart').addEventListener('click', (e) => {
70                        addToCart(product.id, e.currentTarget)
71                    })
72                    prodArray.push(divElement)
73                } else {
74                    const tpl = `
75              <a class="product__icon" href="${product.link}" title="${product.name}" target="_blank"><img src="${product.icon}" alt="${product.name}"></a>
76              <h3><a class="product__name" href="${product.link}" title="${product.name}" target="_blank">${product.name}</a></h3>
77              <div class="product__prices" style="min-height: 28.3438px;">
78                <strong class="price">${product.price.price.gross.formatted}</strong>
79              </div>
80              <button class="btn btn--disabled product__btn">Produkt je dočasně nedostupný</button>
81            `
82                    const divElement = customCreateDomElement('div', ['product'], tpl)
83                    prodArray.push(divElement)
84                }
85            }
86        } catch (error) {
87            console.error('Błąd zapytania GraphQL:', error)
88        }
89    }
90
91    return prodArray
92}
93
94function processSliders() {
95    const allSliders = document.querySelectorAll('.cosiHotspot')
96
97    function handleSliderScroll(slider) {
98        const handleScroll = async () => {
99            const userPosition = window.scrollY
100            const sliderPosition = slider.offsetTop - 600
101
102            if (userPosition >= sliderPosition && slider.children.length === 0) {
103                window.removeEventListener('scroll', handleScroll)
104
105                const productsTable = slider.getAttribute('data-products').split(',')

106                const productsWrapper = customCreateDomElement('div', ['products'], null)
107
108                initLoader(slider)
109
110                const prodArray = await fetchAndRenderProducts(productsTable)
111
112                prodArray.forEach((element) => {
113                    productsWrapper.appendChild(element)
114                })
115
116                slider.appendChild(productsWrapper)
117
118                const childProducts = slider.querySelector('.products')
119
120                $(childProducts).slick({
121                    infinite: false,
122                    slidesToShow: 3,
123                    slidesToScroll: 1,
124                    adaptiveHeight: false,
125                    responsive: [
126                        {
127                            breakpoint: 768,
128                            settings: {
129                                slidesToShow: 1,
130                                dots: true,
131                                arrows: false,
132                            },
133                        },
134                    ],
135                })
136
137                removeLoader(slider)
138            }
139        }
140
141        window.addEventListener('scroll', handleScroll)
142    }
143
144    function handleAuthorSlider(slider) {
145        const sliderParent = slider.parentNode.parentNode
146
147        sliderParent.addEventListener('click', async () => {
148            if (slider.innerHTML === '') {
149                const productsTable = slider.getAttribute('data-products').split(',')
150                const productsWrapper = customCreateDomElement('div', ['products'], null)
151
152                initLoader(slider)
153
154                const prodArray = await fetchAndRenderProducts(productsTable)
155
156                prodArray.forEach((element) => {
157                    productsWrapper.appendChild(element)
158                })
159
160                slider.appendChild(productsWrapper)
161
162                const childProducts = slider.querySelector('.products')
163
164                $(childProducts).slick({
165                    infinite: false,
166                    slidesToShow: 2,
167                    slidesToScroll: 1,
168                    responsive: [
169                        {
170                            breakpoint: 768,
171                            settings: {
172                                slidesToShow: 1,
173                                dots: true,
174                                arrows: false,
175                            },
176                        },
177                    ],
178                })
179
180                removeLoader(slider)
181            }
182        })
183    }
184
185    for (const slider of allSliders) {
186        if (!slider.classList.contains('cosiHotspot__author')) {
187            handleSliderScroll(slider)
188        } else {
189            handleAuthorSlider(slider)
190        }
191    }
192}
193
194export default processSliders