https://ismile.com.ar/scripts/productCard.js

1import { addProductToLocaleCart, addTempItemToDB, getCartTotalProducts, getLoggedUser, handleRemoveCartBtnClick, checkIfProductIsInCartDetail} from "./utils.js";
2function loadDependentScripts() { //Carga los scripts que usan la variable del fetch
3    // Si esta en el checkout
4    if (window.location.pathname === '/user/checkout') {
5        // Aquí puedes cargar los scripts externos después de obtener los datos del usuario
6        var checkoutScript = document.createElement('script');
7        checkoutScript.src = '/scripts/checkout.js';
8        checkoutScript.type = 'module'; // Agregar el atributo type="module"
9        document.head.appendChild(checkoutScript);
10    } 
11}
12window.addEventListener('load', async () => {
13    try {
14        const blackScreen = document.querySelector('.black-screen')
15        // LOGICA PARA QUICK ADD
16        // Lo hago en este script porque puede ir en la lista de productos, en la del detalle en sugested products, etc
17        const addingCartButtons = document.querySelectorAll('.quick-add-cart-btn');
18        const shopingCartQuickPopup = document.querySelector('.add-to-cart-container');
19        const closingCardBtns = document.querySelectorAll('.close-cart-menu');
20        var totalProducts = document.querySelectorAll('.products-quantity');
21        var userLogged = (await getLoggedUser())?.user;
22        // Defino en el window para poder usarla en otros lugares
23        window.userLogged = userLogged
24        userLogged && localStorage.removeItem('temporalCart');
25        // Carga los scripts que dependen del user
26        loadDependentScripts();
27        // Apenas carga le pongo la cantidad de productos
28        updateCartTotalProductsNumber();
29        checkForProductsInCart();
30
31        // Si tocan el boton del carro
32        addingCartButtons?.forEach(btn => {
33            // Click en agregar al carro
34            btn.addEventListener('click', async (e) => {
35                try {
36                    const card = btn.closest('.product-card-container') || btn.closest('.product-container');
37                    //para llegar al id del producto ..
38                    const idProd = card.dataset.productid;
39                    card.querySelector('.loading-container').classList.add('loading-container-active');
40                    if (userLogged) {
41                        await addTempItemToDB(idProd,userLogged); //Función que agrega al carro el producto 
42                    } else {
43                        addProductToLocaleCart(idProd);
44                    }
45                    // Remuevo el spinner loading, pongo el quickshopping popup
46                    card.querySelector('.loading-container').classList.remove('loading-container-active');
47                    paintShoppingCartPopup(card);
48                    shopingCartQuickPopup.classList.add('add-to-cart-container-active');
49                    blackScreen.classList.add('black-screen-active');
50                    // Cambio los iconos
51                    card.querySelector('.quick-add-cart-btn')?.classList.add('hidden');
52                    card.querySelector('.remove-cart-product')?.classList.remove('hidden');
53                    // Le sumo uno al numero del carro
54                    totalProducts.forEach(num => num.innerHTML = parseInt(num.innerHTML) ? parseInt(num.innerHTML) + 1 : 1);
55                } catch (error) {
56                    console.log(`Falle en addingCartbuttons.addEventListener: ${error}`);
57                }
58            });
59        });
60        blackScreen.addEventListener('click', () => {
61            shopingCartQuickPopup.classList.remove('add-to-cart-container-active');
62            blackScreen.classList.remove('black-screen-active');
63        });
64        closingCardBtns?.forEach(btn => {
65            // Click en agregar al carro
66            btn.addEventListener('click', () => {
67                const card = btn.closest('.product-card-container');
68                shopingCartQuickPopup.classList.remove('add-to-cart-container-active');
69                blackScreen.classList.remove('black-screen-active');
70            });
71        });
72        handleRemoveCartBtnClick(userLogged);
73
74        // Actualiza numero arriba del carro con cantidad de productos
75        function updateCartTotalProductsNumber() {
76            const cartLength = getCartTotalProducts(userLogged); //Función que retorna el total de productos

77            totalProducts.forEach(num => cartLength ? num.innerHTML = cartLength : num.innerHTML = '');
78        };
79        function checkForProductsInCart() {//Se fija si el usuario ya tiene el producto en el carro para poner tick
80            const productCards = document.querySelectorAll('.product-card-container');
81            productCards.forEach(card => {
82                const productId = card.dataset.productid;
83                // Hace un find ==> encuentra si el producto esta en el carro
84                let productAlreadyInCart;
85                if (userLogged) {
86                    productAlreadyInCart = userLogged.temporalCart?.temporalItems.find(item => item.products_id == productId);
87                } else {
88                    let cart = JSON.parse(localStorage.getItem('temporalCart')) || [];
89                    productAlreadyInCart = cart.find(item => item.products_id == productId);
90                }
91                if (productAlreadyInCart) {
92                    card.querySelector('.quick-add-cart-btn').classList.add('hidden');
93                    card.querySelector('.remove-cart-product').classList.remove('hidden');
94                }
95            })
96        };
97
98        function paintShoppingCartPopup(card) {
99            let productSelectedCard = document.querySelector('.product-selected-card');
100            let imagePath = card.querySelectorAll('.product-image-test')[0]?.src||
101            card.querySelector('.main-img')?.src || '/img/product/default.png';
102            let productName = card.querySelector('.product-name').innerHTML;
103            let productPrice = card.querySelector('.product-price').innerHTML;
104            let cardHTML = 
105            `
106            <div class="product-selected-img-container">
107                <img src="${imagePath}" alt="product-image" class="product-selected-img">
108            </div>
109            <div class="product-selected-info-qty-container">
110                <div class="product-selected-name-remove-container">
111                    <p class="product-selected-name">${productName}</p>
112                </div>
113                <div class="product-selected-quantity-container">
114                    <p class="item-total">${productPrice}</p>
115                </div>
116            </div>
117            `;
118            productSelectedCard.innerHTML = cardHTML;
119        }
120        checkIfProductIsInCartDetail();
121
122    } catch (error) {
123        console.log("Falle en productCard.js: " + error);
124    }
125});