Implementacion Inicial de la Tienda
This commit is contained in:
adevopg
@@ -0,0 +1,149 @@
|
||||
<!-- 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>
|
||||
@@ -1,34 +0,0 @@
|
||||
<div class="main-page">
|
||||
<div class="store-categories">
|
||||
{% for category in categories %}
|
||||
<h2>{{ category.name }}</h2>
|
||||
<ul>
|
||||
{% for item in category.storeitem_set.all %}
|
||||
<li>
|
||||
<img src="{{ item.image_url }}" alt="{{ item.name }}">
|
||||
<p>{{ item.name }}</p>
|
||||
<p>{{ item.price }} €</p>
|
||||
<button class="add-to-cart" data-item-id="{{ item.id }}">Añadir</button>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="cart">
|
||||
<h2>Carrito</h2>
|
||||
<ul>
|
||||
{% for cart_item in cart_items %}
|
||||
<li>
|
||||
<p>{{ cart_item.item.name }}</p>
|
||||
<p>{{ cart_item.item.price }} €</p>
|
||||
<button class="remove-from-cart" data-cart-id="{{ cart_item.id }}">Eliminar</button>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<p>Total: {{ total_price }} €</p>
|
||||
<script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/store_response.js"></script>
|
||||
<script src="https://js.stripe.com/v3/"></script>
|
||||
<button id="checkout-button">Pagar</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3,7 +3,7 @@
|
||||
{% include 'partials/head.html' %}
|
||||
{% include 'partials/header.html' %}
|
||||
{% include 'partials/video.html' %}
|
||||
{% include 'partials/store_novawow.html' %}
|
||||
{% include 'partials/store/store_novawow.html' %}
|
||||
{% include 'partials/social.html' %}
|
||||
{% include 'partials/footer.html' %}
|
||||
{% include 'partials/final.html' %}
|
||||
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
{% include 'partials/head.html' %}
|
||||
{% include 'partials/header.html' %}
|
||||
{% include 'partials/video.html' %}
|
||||
{% include 'partials/store/store_novawow_cancel.html' %}
|
||||
{% include 'partials/social.html' %}
|
||||
{% include 'partials/footer.html' %}
|
||||
{% include 'partials/final.html' %}
|
||||
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
{% include 'partials/head.html' %}
|
||||
{% include 'partials/header.html' %}
|
||||
{% include 'partials/video.html' %}
|
||||
{% include 'partials/store/store_novawow_success.html' %}
|
||||
{% include 'partials/social.html' %}
|
||||
{% include 'partials/footer.html' %}
|
||||
{% include 'partials/final.html' %}
|
||||
Reference in New Issue
Block a user