https://coreicon.dev/wp-content/themes/coreicon/assets/js/incart.js?ver=1

1document.addEventListener("DOMContentLoaded", function () {
2  const cartItems = document.querySelector("#cart-items");
3  const cartTotalElement = document.querySelector("#cart-total");
4  const cartCountElement = document.querySelector(".cart-count");
5  const inputEmailCustomer = document.getElementById("email-customer");
6  const emailDescription = document.querySelector(".email-description");
7  const emailModal = document.querySelector(".email-modal");
8  const modalCloseButton = emailModal.querySelector(".btn-secondary-md");
9  let cartItemsData = [];
10
11  // Add event listener to close the modal when the button is clicked
12  if (modalCloseButton) {
13    modalCloseButton.addEventListener("click", function() {
14      emailModal.style.display = "none";
15    });
16  }
17
18  /**
19   * The above functions show and hide a loader using Lottie animation in JavaScript.
20   */
21  // Lottie loader
22  function showLoader() {
23    var loaderContainer = document.getElementById("checkout-loader");
24    loaderContainer.style.display = "block"; // Показати loader
25    
26    var loader = lottie.loadAnimation({
27      container: document.getElementById("lottie-loader-cart"), // контейнер для loader
28      renderer: 'svg',
29      loop: true,
30      autoplay: true,
31      path: '/wp-content/themes/coreicon/assets/js/lota.json' // шлях до вашого Lottie JSON файлу
32    });
33  }
34  
35  function hideLoader() {
36    var loaderContainer = document.getElementById("checkout-loader");
37    loaderContainer.style.display = "none"; // Приховати loader
38  }
39
40  // Оновлення значення лічильника після видалення всіх товарів
41  function updateCartItemCount() {
42    const totalCount = cartItemsData.reduce(
43      (total, item) => total + item.quantity,
44      0
45    );
46    cartCountElement.textContent = totalCount ? totalCount : "0";
47  }
48
49  // Оновлення кнопки "Add to Cart" після видалення товару з кошика
50  function updateAddToCartButtons() {
51    const addedProductIds = new Set(
52      cartItemsData.map((item) => item.productId)
53    );
54    const addToCartButtons = document.querySelectorAll(".add-to-cart");
55    addToCartButtons.forEach((button) => {
56      const productId = parseInt(button.dataset.id);
57      if (addedProductIds.has(productId)) {
58        button.textContent = "Added in Cart";
59        const icon = document.createElement("img");
60        icon.src =
61          "/wp-content/themes/coreicon/assets/img/svg/check circle.svg";
62        icon.alt = "Checkmark Icon";
63        if (!button.querySelector("img")) {
64          button.prepend(icon);
65        }
66      } else {
67        button.textContent = "Add to Cart";
68        const icon = button.querySelector("img");
69        if (icon) {
70          icon.remove();
71        }
72      }
73    });
74  }
75
76  // Функція видалення товару з кошика
77  function removeCartItem(index) {
78    cartItemsData.splice(index, 1);
79    localStorage.setItem("cartItems", JSON.stringify(cartItemsData));
80    updateCartDisplay();
81    updateCartItemCount();
82    updateAddToCartButtons();
83  }
84
85  function updateCartDisplay() {
86    if (cartItems !== null) {
87      cartItems.innerHTML = "";
88    }
89    let total = 0;
90    let totalCount = 0;
91
92    if (cartItemsData.length > 0) {
93      cartItemsData.forEach(function (item, index) {
94        const row = document.createElement("tr");
95        row.classList.add("cart-form-item");
96        row.innerHTML = `
97          <td class="product-remove">
98            <span class="remove-icon" data-index="${index}">
99             ×
100            </span>
101          </td>
102          <td class="product-cover">
103            <a href="${item.productLink}" target="_parent">
104              <div class="card-stack-xs br-6" alt="${
105                item.productName
106              } cover pack" loading="lazy">
107              <img class="card-cover-xs" src="${item.productImage}" alt="${
108          item.productName
109        } cover pack" loading="lazy" type="image/webp">
110              </div>
111            </a>
112          </td>
113          <td class="product-name">
114            <a href="${item.productLink}" target="_parent">
115              <div class="2in1">
116                <p class="body-text_reg-l" style="font-weight:500">${

117                  item.productName
118                }</p>
119                <p class="body-text_reg-m mt-2" style="color:#566176; max-width:256px">${
120                  item.productDescription
121                }</p>
122              </div>
123            </a>
124          </td>
125          <td class="product-price"><p class="body-text_reg-l">$${
126            item.productPrice
127          }</p></td>
128          <td class="product-quantity"><p class="body-text_reg-l">${
129            item.quantity
130          }</p></td>
131          <td class="product-subtotal"><p class="body-text_reg-l">$${
132            item.productPrice * item.quantity
133          }</p></td>
134        `;
135
136        if (cartItems !== null) {
137          cartItems.appendChild(row);
138        }
139
140        total += item.productPrice * item.quantity;
141        totalCount += item.quantity;
142      });
143
144      const totalRow = document.createElement("tr");
145      totalRow.classList.add("order-total");
146      totalRow.innerHTML = `
147        <th><h4>Total:</h4></th>
148        <td id="cart-total"><h4>$${total.toFixed(2)}</h4></td>
149      `;
150
151      const actionsRow = document.createElement("tr");
152      actionsRow.innerHTML = `
153        <td id="actions" colspan="6">
154          <button class="clear-cart btn-primary-md br-12" type="submit" data-update-total>
155            Clear all
156          </button>
157          <button class="cart-checkout btn-primary-md br-12" type="submit" data-update-total>
158            Checkout
159          </button>
160        </td>
161      `;
162
163      if (cartItems !== null) {
164        cartItems.appendChild(totalRow);
165        cartItems.appendChild(actionsRow);
166      }
167
168      // Отримати загальну суму з елементу з ідентифікатором 'cart-total'
169      const totalElement = document.getElementById("cart-total");
170      let amount;
171      if (totalElement !== null) {
172        amount = parseFloat(totalElement.innerText.replace("$", ""));
173      }
174
175      // Використовуйте значення 'amount' для подальшої обробки
176      console.log("Загальна сума:", amount);
177
178      // Оновлення значення лічильника після оновлення кошика
179      updateCartItemCount();
180    } else {
181      const emptyRow = document.createElement("tr");
182      emptyRow.innerHTML = `
183        <td class="empty-cart" style="width:100%; place-content:center; align-content:center; align-self:center; text-align:center"><p class="subtitle mt-24 mb-4">It seems that your cart is empty 🤷‍♂️</p></td>
184      `;
185      if (cartItems !== null) {
186        cartItems.appendChild(emptyRow);
187      }
188
189      // Hide inputEmailCustomer and emailDescription when the cart is empty
190      inputEmailCustomer.style.display = "none";
191      emailDescription.style.display = "none";
192    }
193
194    if (cartTotalElement !== null) {
195      cartTotalElement.textContent = "$" + total.toFixed(2);
196    }
197    if (cartCountElement !== null) {
198      cartCountElement.textContent = totalCount ? totalCount : "0";
199    }
200
201    // Show inputEmailCustomer and emailDescription when the cart has items
202    if (cartItemsData.length > 0) {
203      inputEmailCustomer.style.display = "block";
204      emailDescription.style.display = "block";
205    }
206  }
207
208  function addToCart(item) {
209    cartItemsData.push(item);
210    localStorage.setItem("cartItems", JSON.stringify(cartItemsData));
211    updateCartDisplay();
212  }
213
214  // Оновлення даних кошика з localStorage при завантаженні сторінки
215  const savedCartItems = localStorage.getItem("cartItems");
216  cartItemsData = savedCartItems ? JSON.parse(savedCartItems) : [];
217
218  updateCartDisplay();
219  updateCartItemCount();
220  updateAddToCartButtons();
221
222  // Додайте подію click для кожного значка видалення
223  if (cartItems !== null) {
224    cartItems.addEventListener("click", function (event) {
225      if (event.target.classList.contains("remove-icon")) {
226        const removeButton = event.target;
227        const index = removeButton.dataset.index;
228
229        removeCartItem(index);
230      }
231    });
232  }
233
234  function clearCart() {
235    localStorage.removeItem("cartItems");
236    cartItemsData.length = 0;
237    updateCartDisplay();
238
239    // Оновити загальну вартість замовлення
240    cartTotalElement.textContent = "$0.00";
241
242    // Оновити кількість товарів
243    cartCountElement.textContent = "0";
244
245    // Оновити кнопки "Clear all" і "Checkout"
246    updateCartButtons();
247
248    // Оновлення значення лічильника після видалення всіх товарів
249    updateCartItemCount();
250  }
251
252  // Виклик функції для оновлення кнопок "Clear all" і "Checkout" після завантаження сторінки
253  updateCartButtons();
254
255  // Виклик функції для оновлення кнопок "Add to Cart" після завантаження сторінки кошика
256  updateAddToCartButtons();
257
258  function updateCartButtons() {
259    const clearCartButtons = document.querySelectorAll(".clear-cart");
260    clearCartButtons.forEach(function (button) {
261      button.removeEventListener("click", clearCart);
262      button.addEventListener("click", clearCart);
263    });
264
265    const checkoutButtons = document.querySelectorAll(".cart-checkout");
266    checkoutButtons.forEach(function (button) {
267      button.removeEventListener("click", handleCheckout);
268      button.addEventListener("click", handleCheckout);
269    });
270  }
271
272  // Кнопка "Clear all"
273  const clearCartButtons = document.querySelectorAll(".clear-cart");
274  clearCartButtons.forEach(function (button) {
275    button.addEventListener("click", function (event) {
276      event.preventDefault();
277      clearCart();
278    });
279  });
280
281  // Кнопка "Checkout"
282  var checkoutButtons = document.querySelectorAll(".cart-checkout");
283  checkoutButtons.forEach(function (button) {
284    button.addEventListener("click", handleCheckout);
285  });
286
287  function getCheckout(data) {
288    return fetch(coreiconIncart.checkoutEndpoint, {
289      method: "POST",
290      headers: {
291        "Content-Type": "application/json",
292        "X-WP-Nonce": coreiconIncart.nonce,
293      },
294      body: JSON.stringify(data),
295    })
296      .then((response) => response.json())
297      .catch((error) => {
298        console.error("Помилка при отриманні checkout url:", error);
299      });
300  }
301
302  //Функція, яка перевіряє, чи введено електронну адресу користувача
303  function validateEmail(email) {
304    const re = /\S+@\S+\.\S+/;
305    return re.test(email);
306  }
307
308  // Rederict to Payment page
309  function handleCheckout(e) {
310    e.preventDefault();
311
312    // Відобразити loader
313    showLoader();
314
315    var emailInput = document.getElementById("email");
316    var userEmail = emailInput.value.trim();
317
318    if (!validateEmail(userEmail)) {
319      hideLoader(); // Приховати loader у разі помилки

320      // Show the modal if email is not valid
321      emailModal.style.display = 'block';
322      return;
323    }
324
325    // Отримати загальну суму замовлення
326    var totalElement = document.getElementById("cart-total");
327    var totalAmount = parseFloat(totalElement.innerText.replace("$", ""));
328
329    var cartItems = JSON.parse(localStorage.getItem("cartItems"));
330    var products = cartItems.map(function (item) {
331      return {
332        name: item.productName,
333        description: item.productDescription,
334        price: item.productPrice,
335        quantity: item.quantity,
336        icon: item.productImage,
337      };
338    });
339
340    var requestData = {
341      currency: "USD",
342      amount: totalAmount,
343      products: products,
344      email: userEmail,
345    };
346
347    getCheckout(requestData).then(function (response) {
348      if (response.url) {
349        setTimeout(function () {
350          window.location.href = response.url; // Перенаправити на сторінку оплати
351          clearCart(); // Очищення кошика
352        }, 2000); // Затримка 2 секунди
353      } else {
354        hideLoader(); // Приховати loader у разі помилки
355      }
356    }).catch(function () {
357      hideLoader(); // Приховати loader у разі помилки
358    });
359  }
360
361  const checkoutButton = document.querySelector('.cart-checkout');
362  const emailInput = document.querySelector('#email');
363  
364  checkoutButton.addEventListener('click', handleCheckout);
365
366  // Function to hide inputEmailCustomer if it is empty
367  function checkEmailCustomerInput() {
368    if (inputEmailCustomer.value.trim() === "") {
369      inputEmailCustomer.style.display = "none";
370    } else {
371      inputEmailCustomer.style.display = "block";
372    }
373  }
374
375  // Add event listener to inputEmailCustomer to check its value on input
376  inputEmailCustomer.addEventListener("input", checkEmailCustomerInput);
377
378  // Initial check to hide inputEmailCustomer if it is empty on page load
379  checkEmailCustomerInput();
380
381});