fix bug in quantitys

public/main/js/app.js

@@ -434,7 +434,7 @@ async function renderProductsWithAnimation(products, groupInCategories = true, s
 //#region ===== Carrito =====
 
 
-async function addToCart(productId, buttonElement = null) {
+window.addToCart = function(productId, buttonElement = null) {
     const product = Allproducts.find(p => p.id === productId);
     if (!product) return;
     const cartItem = cart.find(item => item.id === productId);
@@ -459,7 +459,7 @@ async function addToCart(productId, buttonElement = null) {
 
 };
 
-async function removeFromCart(productId, removeAll = false) {
+window.removeFromCart = function(productId, removeAll = false) {
     const itemIndex = cart.findIndex(item => item.id === productId);
     if (itemIndex > -1) {
         if (removeAll || cart[itemIndex].quantity === 1) {
@@ -514,47 +514,23 @@ function updateCartDisplay() {
         checkoutButton.disabled = false;
         cart.forEach(item => {
             const cartItemHTML = `
-                <div class="flex justify-between items-center border-b border-gray-700 pb-2 last:border-b-0 mb-2">
+                <div class="product-cart flex justify-between items-center border-b border-gray-700 pb-2 last:border-b-0 mb-2">
                     <div>
-                        <h4 class="font-semibold text-base">${item.name} <span class="text-sm text-gray-400">(x${item.quantity})</span></h4>
+                        <h4 class="item-name-cart font-semibold text-base">${item.name} <span class="text-sm text-gray-400">(x${item.quantity})</span></h4>
                         <p class="text-sm accent-red">${formatPrice(item.price * item.quantity)}</p>
                     </div>
                     <div class="flex items-center gap-1 sm:gap-2">
-                        <button class="plus-button text-green-500 hover:text-green-400 text-lg sm:text-xl font-bold p-1 rounded-full hover:bg-gray-700 transition-colors">+</button>
-                        <button class="minus-button text-yellow-500 hover:text-yellow-400 text-lg sm:text-xl font-bold p-1 rounded-full hover:bg-gray-700 transition-colors">-</button>
-                        <button class="remove-button text-red-500 hover:text-red-400 text-base sm:text-lg p-1 rounded-full hover:bg-gray-700 transition-colors">
+                        <button onclick="addToCart(${item.id})" class="plus-button text-green-500 hover:text-green-400 text-lg sm:text-xl font-bold p-1 rounded-full hover:bg-gray-700 transition-colors">+</button>
+                        <button onclick="removeFromCart(${item.id})" class="minus-button text-yellow-500 hover:text-yellow-400 text-lg sm:text-xl font-bold p-1 rounded-full hover:bg-gray-700 transition-colors">-</button>
+                        <button onclick="removeFromCart(${item.id}, true)" class="remove-button text-red-500 hover:text-red-400 text-base sm:text-lg p-1 rounded-full hover:bg-gray-700 transition-colors">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 sm:w-5 sm:h-5 pointer-events-none"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12.56 0c1.153 0 2.24.032 3.22.096M15 5.79V4.5A2.25 2.25 0 0012.75 2.25h-1.5A2.25 2.25 0 009 4.5v1.29m0 0L9 19.5M15 5.79l-1.5-1.5M9 5.79l1.5-1.5" /></svg>
                         </button>
                     </div>
                 </div>
             `;
             cartItemsElement.innerHTML += cartItemHTML;
-            const plusButton = cartItemsElement.querySelectorAll(".plus-button");
-            const minusButton = cartItemsElement.querySelectorAll(".minus-button");
-            const removeButton = cartItemsElement.querySelectorAll(".remove-button");
-            plusButton.forEach((btn, index) => {
-                btn.addEventListener("click", () => {
-                    addToCart(item.id);
-                    btn.classList.add("animate-pulse");
-                    setTimeout(() => btn.classList.remove("animate-pulse"), 300);
-                });
-            });
-            minusButton.forEach((btn, index) => {
-                btn.addEventListener("click", () => {
-                    removeFromCart(item.id);
-                    btn.classList.add("animate-pulse");
-                    setTimeout(() => btn.classList.remove("animate-pulse"), 300);
-                });
-            });
-            removeButton.forEach((btn, index) => {
-                btn.addEventListener("click", () => {
-                    removeFromCart(item.id, true);
-                    btn.classList.add("animate-pulse");
-                    setTimeout(() => btn.classList.remove("animate-pulse"), 300);
-                });
-            });
         });
-        cart
+    
     }
     calculateTotal();
 }