adevopg
92 lines
3.4 KiB
JavaScript
92 lines
3.4 KiB
JavaScript
$(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.");
|
|
}
|
|
});
|
|
}
|
|
});
|