Implementacion Inicial de la Tienda

2025-02-15 23:36:48 +01:00
parent fa8a0e0891
commit 41c3c6ae91
12 changed files with 420 additions and 125 deletions
@@ -0,0 +1,91 @@
+$(document).ready(function () {
+    $("#comprar").on("click", async function (e) {
+        e.preventDefault();
+        $("#store-response").empty();
+
+        let button = $(this);
+        let originalText = button.html();
+        button.html("Procesando pago...");
+        button.prop("disabled", true);
+
+        let personaje = $("#personaje").val();
+        if (!personaje) {
+            $("#store-response").append('<span class="red-form-response">Selecciona un personaje antes de comprar.</span>').hide().slideDown();
+            button.html(originalText);
+            button.prop("disabled", false);
+            return;
+        }
+
+        let carrito = [];
+        $("#carrito li").each(function () {
+            let itemData = $(this).data("item");
+            carrito.push({
+                item_id: itemData.item_id,
+                name: itemData.name,
+                price: itemData.price
+            });
+        });
+
+        if (carrito.length === 0) {
+            $("#store-response").append('<span class="red-form-response">El carrito está vacío.</span>').hide().slideDown();
+            button.html(originalText);
+            button.prop("disabled", false);
+            return;
+        }
+
+        // Realizar la solicitud para crear la sesión de pago en el backend
+        try {
+            const response = await fetch("{% url 'create_checkout_session' %}", {
+                method: "POST",
+                body: new URLSearchParams({
+                    personaje: personaje,
+                    carrito: JSON.stringify(carrito)
+                })
+            });
+
+            const data = await response.json();
+            if (data.success) {
+                window.location.href = data.stripe_url;  // Redirigir a la página de pago de Stripe
+            } else {
+                $("#store-response").append(`<span class="red-form-response">${data.message}</span>`).hide().slideDown();
+            }
+        } catch (error) {
+            console.error("Error al procesar el pago:", error);
+            $("#store-response").append('<span class="red-form-response">Error al procesar el pago.</span>').hide().slideDown();
+        }
+
+        button.html(originalText);
+        button.prop("disabled", false);
+    });
+});
+$("#categoria").on("change", function () {
+    let categoriaSeleccionada = $(this).val();
+    if (categoriaSeleccionada) {
+        $.ajax({
+            url: "{% url 'get_items_by_category' %}",
+            method: "GET",
+            data: { category: categoriaSeleccionada },
+            success: function (data) {
+                $("#items-container").empty();
+                if (data.items.length > 0) {
+                    data.items.forEach(function (item) {
+                        let itemHtml = `
+                            <div class="item">
+                                <img src="${item.image_url}" alt="${item.name}" />
+                                <h4>${item.name}</h4>
+                                <p>Price: ${item.price} EUR</p>
+                                <button class="add-to-cart" data-item-id="${item.item_id}">Add to Cart</button>
+                            </div>
+                        `;
+                        $("#items-container").append(itemHtml);
+                    });
+                } else {
+                    $("#items-container").append('<p>No items found in this category.</p>');
+                }
+            },
+            error: function () {
+                alert("Error loading items.");
+            }
+        });
+    }
+});