NovaWoW/home/templates/partials/store/store_novawow.html

<!-- main -->
<div class="main-page">
    <div class="middle-content middle-content-index">
        <div class="body-content">
            <div class="title-contenat"><h1>Tienda de {{ NOMBRE_SERVIDOR }}</h1></div>
            <div class="box-content">
                <!-- Selección de personaje -->
                <div class="body-box-content">
				<script src="https://js.stripe.com/v3/"></script>
                    <label for="personaje" class="yellow-info">Selecciona tu personaje:</label>
                    <select id="personaje" class="form-select">
                      <option value="" selected disabled>Seleccione un personaje</option>
                      {% for character in characters %}
                        <option class="priest big-font" value="{{ character }}">{{ character }}</option>
                      {% endfor %}
                    </select>
                </div>

                <!-- Categorías -->
                <div class="body-box-content">
                    <label for="categoria" class="yellow-info">Selecciona una categoría:</label>
                    <select id="categoria" class="form-select">
                        {% for category in categories %}
                            <option value="{{ category.name }}">{{ category.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Lista de ítems -->
                <div class="body-box-content" id="items-container"></div>

                <!-- Carrito -->
                <div class="title-content-h3">
                    <h3 class="big-font">Carrito de Compras</h3>
                </div>
                <div class="body-box-content">
                    <ul id="carrito" class="list-group"></ul>
                    <p><strong>Total:</strong> <span id="total">0</span> monedas</p>
                    <p><strong>Total con IVA (21%):</strong> <span id="totalIVA">0</span> monedas</p>
                    <button class="real-info-box green-info" id="comprar">Finalizar Compra</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const carrito = [];
    const itemsContainer = document.getElementById("items-container");
    const carritoLista = document.getElementById("carrito");
    const totalElement = document.getElementById("total");
    const totalIVAElement = document.getElementById("totalIVA");

    function cargarItems(categoria) {
        itemsContainer.innerHTML = "";

        fetch(`/es/store-novawow/buscar/categoria/${categoria}/`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    data.items.forEach(item => {
                        const itemHTML = `
                            <div class="body-box-content">
                                <div class="noticia-contenido">
                                    <img src="${item.image_url}" alt="${item.name}" class="item-img">
                                    <h3>${item.name}</h3>
                                    <p>Precio: ${item.price} monedas</p>
                                    <button class="real-info-box green-info" onclick="agregarAlCarrito(${item.id}, '${item.name}', ${item.price})">Añadir al carrito</button>
                                </div>
                            </div>
                        `;
                        itemsContainer.innerHTML += itemHTML;
                    });
                } else {
                    itemsContainer.innerHTML = "No hay ítems disponibles para esta categoría.";
                }
            })
            .catch(error => console.error("Error al cargar los ítems:", error));
    }

    function agregarAlCarrito(id, nombre, precio) {
        const personajeSeleccionado = document.getElementById("personaje").value;

        if (!personajeSeleccionado) {
            alert("¡Por favor, selecciona un personaje antes de añadir un ítem al carrito!");
            return;
        }

        carrito.push({ id, nombre, precio });
        actualizarCarrito();
    }

    function actualizarCarrito() {
        carritoLista.innerHTML = "";
        let total = 0;
        carrito.forEach((item, index) => {
            total += item.precio;
            const itemCarrito = `<li class="real-info-box">${item.nombre} - ${item.precio} monedas <button class="real-info-box red-info" onclick="eliminarDelCarrito(${index})">Eliminar</button></li>`;
            carritoLista.innerHTML += itemCarrito;
        });
        totalElement.textContent = total;
        totalIVAElement.textContent = (total * 1.21).toFixed(2);
    }

    function eliminarDelCarrito(index) {
        carrito.splice(index, 1);
        actualizarCarrito();
    }

    document.getElementById("categoria").addEventListener("change", (e) => {
        cargarItems(e.target.value);
    });

    document.getElementById("comprar").addEventListener("click", () => {
    const personajeSeleccionado = document.getElementById("personaje").value;

    if (!personajeSeleccionado) {
        alert("¡Por favor, selecciona un personaje antes de continuar!");
        return;
    }

    if (carrito.length === 0) {
        alert("El carrito está vacío");
    } else {
        // Crear la sesión de pago con Stripe
        fetch('/es/store-novawow/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                character: personajeSeleccionado, // Añadir el personaje seleccionado
                carrito: carrito, // Si necesitas enviar los ítems del carrito, también puedes incluirlos aquí
            }),
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const stripe = Stripe(data.stripe_public_key);
                stripe.redirectToCheckout({ sessionId: data.session_id });
            } else {
                alert(data.message);
            }
        })
        .catch(error => console.error("Error al crear la sesión de pago:", error));
    }
});
    cargarItems("Bolsas");
</script>