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

1import addToCart from "./addToCart.js";
2import customCreateDomElement from "./utils/customCreateDomElement.js";
3import { fetchProducts } from "./fetchProducts.js";
4
5const initLoader = (elem) => {
6  const loader = customCreateDomElement('div', ['btn-spinner', 'spinner-border'], null);
7  elem.appendChild(loader);
8  elem.classList.add('--loading');
9}
10
11const removeLoader = (elem) => {
12  elem.classList.remove('--loading');
13}
14
15async function renderProducts(productsTable) {
16  const products = await fetchProducts(productsTable); 
17  const prodArray = [];
18
19  products.forEach(product => {
20    if (!product) return; 
21
22    if (product.sizes != null) {
23      const tpl = `
24        <a class="product__icon" href="${product.link}" title="${product.name}" target="_blank">
25          <img src="${product.icon}" alt="${product.name}">
26        </a>
27        <h3>
28          <a class="product__name" href="${product.link}" title="${product.name}" target="_blank">
29            ${product.name}
30          </a>
31        </h3>
32        <div class="product__prices" style="min-height:28.3438px;">
33          <strong class="price">${product.price.price.gross.formatted}</strong>
34        </div>
35        <button class="btn product__btn addToCart">Pridať do košíka</button>
36      `;
37
38      const divElement = customCreateDomElement('div', ['product'], tpl);
39
40      // poprawiona klasa .addToCart
41      divElement.querySelector('.addToCart').addEventListener('click', (e) => {
42        addToCart(product.id, e.currentTarget);
43      });
44
45      prodArray.push(divElement);
46
47    } else {
48      const tpl = `
49        <a class="product__icon" href="${product.link}" title="${product.name}" target="_blank">
50          <img src="${product.icon}" alt="${product.name}">
51        </a>
52        <h3>
53          <a class="product__name" href="${product.link}" title="${product.name}" target="_blank">
54            ${product.name}
55          </a>
56        </h3>
57        <div class="product__prices" style="min-height:28.3438px;">
58          <strong class="price">${product.price.price.gross.formatted}</strong>
59        </div>
60        <button class="btn btn--disabled product__btn" disabled>Produkt je dočasne nedostupný</button>
61      `;
62
63      const divElement = customCreateDomElement('div', ['product'], tpl);
64      prodArray.push(divElement);
65    }
66  });
67
68  return prodArray;
69}
70
71
72function processSliders() {
73  const allSliders = document.querySelectorAll(".cosiHotspot");
74
75  function handleSliderScroll(slider) {
76    const handleScroll = async () => {
77      const userPosition = window.scrollY;
78      const sliderPosition = slider.offsetTop - 600;
79
80      if (userPosition >= sliderPosition && slider.children.length === 0) {
81        window.removeEventListener('scroll', handleScroll);
82
83        const productsTable = slider.getAttribute('data-products').split(",");
84        const productsWrapper = customCreateDomElement('div', ['products'], null);
85        
86        initLoader(slider);
87        
88        const prodArray = await renderProducts(productsTable);
89
90        prodArray.forEach((element) => {
91          productsWrapper.appendChild(element);
92        });
93
94        slider.appendChild(productsWrapper);
95
96        const childProducts = slider.querySelector('.products');
97
98        $(childProducts).slick({
99          infinite: false,
100          slidesToShow: 3,
101          slidesToScroll: 1,
102          responsive: [
103            {
104              breakpoint: 768,
105              settings: {
106                slidesToShow: 1,
107                dots: true,
108                arrows: false
109              }
110            }
111          ]
112        });
113
114        removeLoader(slider);
115      }
116    };
117
118    window.addEventListener('scroll', handleScroll);
119  }
120
121  function handleAuthorSlider(slider) {
122    const sliderParent = slider.parentNode.parentNode;
123
124    sliderParent.addEventListener("click", async () => {
125      if (slider.innerHTML === '') {
126        const productsTable = slider.getAttribute('data-products').split(",");
127        const productsWrapper = customCreateDomElement('div', ['products'], null);
128        
129        initLoader(slider);
130        
131        const prodArray = await renderProducts(productsTable);
132
133        prodArray.forEach((element) => {

134          productsWrapper.appendChild(element);
135        });
136
137        slider.appendChild(productsWrapper);
138
139        const childProducts = slider.querySelector('.products');
140
141        $(childProducts).slick({
142          infinite: false,
143          slidesToShow: 2,
144          slidesToScroll: 1,
145          responsive: [
146            {
147              breakpoint: 768,
148              settings: {
149                slidesToShow: 1,
150                dots: true,
151                arrows: false
152              }
153            }
154          ]
155        });
156
157        removeLoader(slider);
158      }
159    });
160  }
161
162  for (const slider of allSliders) {
163    if (!slider.classList.contains("cosiHotspot__author")) {
164      handleSliderScroll(slider);
165    } else {
166      handleAuthorSlider(slider);
167    }
168  }
169}
170
171export default processSliders;