commit3

2024-02-01 12:12:15 +01:00
parent 65c9d625f7
commit 88f93c1c5e
8 changed files with 453 additions and 55 deletions
--- a/JS/index.js
+++ b/JS/index.js
@@ -3,9 +3,13 @@
    /*  posteriormente la información a cargar estará en una DB, la idea es más adelante hacer 
    una página de backoffice desde donde el admin gestionará los cambios
     (adición, eliminación o modificación de productos, eventos...) */
-    const infoProductos = [
+   
+   
+     let cestaCompra = [];
+   
+     const infoProductos = [
        {
-            numeroproducto: 1,
+            numeroproducto: 0,
            titulo: "Primaris Invictor Tactical Warsuit",
            img1: "../RECURSOS/Productos/Invictor300px.jpg", 
            img2: "../RECURSOS/Productos/InvictorLado300px.jpg",
@@ -13,10 +17,10 @@
            alt:"Invictor",        
            textodescrip: "Armadura de combate de los Ángeles Oscuros completamente pintada con un alto grado de detalle y personalización.",
            disponibles: 1,
-            precio: "150,00"
+            precio: 150.00
        },
        {
-            numeroproducto: 2,
+            numeroproducto: 1,
            titulo: "Termagantes Tiránidos",
            img1: "../RECURSOS/Productos/TermagantesFront300px.jpg",
            img2: "../RECURSOS/Productos/TermagantesLado300px.jpg",
@@ -24,10 +28,10 @@
            alt: "Termagantes",
            textodescrip: "Unidad Básica de 10 Termagantes listos para la batalla. Especialistas en cuerpo a cuerpo, pese a no ser de élite aprovechan su gran número.",
            disponibles: 1,
-            precio: "139,00"
+            precio: 139.00
        },
        {
-            numeroproducto: 3,
+            numeroproducto: 2,
            titulo: "Primaris Inceptor Squad",
            img1: "../RECURSOS/Productos/Inceptor300px.jpg",
            img2: "../RECURSOS/Productos/InceptorLado300px.jpg",
@@ -35,10 +39,10 @@
            alt: "Inceptores",
            textodescrip: "Unidad de 3 Primaris Inceptors Ángeles Oscuros en armadura gravis equipados con armas de plasma.",
            disponibles: 1,
-            precio: "149,00"
+            precio: 149.00
        },
        {
-            numeroproducto: 4,
+            numeroproducto: 3,
            titulo: "Teniente Primaris Ángel Oscuro",
            img1: "../RECURSOS/Productos/Teniente300px.jpg",
            img2: "../RECURSOS/Productos/TenienteLadoDos300px.jpg",
@@ -46,10 +50,10 @@
            alt: "Teniente",
            textodescrip: "Teniente Primaris de los Ángeles Oscuros equipado con arma de energía y pistola de plasma.",
            disponibles: 1,
-            precio: "85,00"
+            precio: 85.00
        },
        {
-            numeroproducto: 5,
+            numeroproducto: 4,
            titulo: "Guerreros Tiránidos",
            img1: "../RECURSOS/Productos/TyranidWarriorUnoFront300px.jpg",
            img2: "../RECURSOS/Productos/TyranidWarriorUno300px.jpg",
@@ -57,7 +61,7 @@
            alt: "Guerrero Tiranido",
            textodescrip: "Versátil unidad de 2 guerreros y 1 primus. Bio-armas de disparo a distancicia y garras y látigo para el cuerpo a cuerpo.",
            disponibles: 1,
-            precio: "129,00"
+            precio: 129.00
        }
    ]

@@ -158,7 +162,7 @@ const cargado = () =>  {

    //--------------------- CONFIGURACIÓN CARRITO COMPRA -------------------------------------

-
+        renderizarCesta();


    //--------------------- CONFIGURACIÓN CONTENEDOR SERVICIOS -------------------------------------
@@ -183,54 +187,258 @@ const cargado = () =>  {
            })
        })

+
+       
 }

-
-
-
-
 //--------------------- CONFIGURACIÓN CONTENEDOR PRODUCTOS --------------------------------



-const genListaProd = () => {
-    let contenedorProd = document.getElementById("contenedorProductos2");
-    
-    for (let i = 0; i < infoProductos.length; i++){
-  

-    contenedorProd.innerHTML += `                            
-    
-    <li class="item-lista-productos">
-        <h3>${infoProductos[i].titulo}</h3>
-        <div class="container-carousel">
-            <div class="carruseles-prod" id="slider">
-                <figure class="slider-section-prod">
-                    <img src="${infoProductos[i].img1}" alt="${infoProductos[i].alt}">
-                </figure>
-                <figure class="slider-section-prod">
-                    <img src="${infoProductos[i].img2}" alt="${infoProductos[i].alt}">
-                </figure>
+        function guardarEnCarrito() {
            
-                <figure class="slider-section-prod">
-                    <img src="${infoProductos[i].img3}" alt="${infoProductos[i].alt}">
-                </figure>
-            </div>
-            <button type="button" class="btn-left" onclick="moveToLeft()"> < </button>
-            <button type="button" class="btn-right" onclick="moveToRight()"> > </button>
-        </div>
-        <ul class="info-producto">
-            <li class="descripcion-producto">
-                <p class="texto-descrip-prod">${infoProductos[i].textodescrip} </p>
-                <p class="productos-disponibles">Disponibles: ${infoProductos[i].disponibles}</p>
-            </li>
-            <li class="precio-producto">${infoProductos[i].precio}€</li>
-        </ul>
-    </li>
-        `}
+            let prodAñadido = this.event.target.getAttribute("marcador");
+            let controlCesta = cestaCompra.includes(prodAñadido);
+            leerCesta();
+            if ( cestaCompra.length == 0 || !controlCesta) {
+                cestaCompra.push(prodAñadido);
+                
+                 try {
+                     localStorage.setItem('numProd', JSON.stringify(cestaCompra));
+                     renderizarCesta();
+                     
+                   } catch (e) {
+                     return "Error al guardar el item en el localStorage: " + e.message;
+                   }  
+            }
+            
+            
+        }
+
+        function borrarArticulo() {
+            let prodABorrar = this.event.target.getAttribute("marcador");
+            let indice = cestaCompra.indexOf(prodABorrar);
+            cestaCompra.splice(indice, 1);
+            try {
+                localStorage.setItem('numProd', JSON.stringify(cestaCompra));
+                renderizarCesta();
+                
+              } catch (e) {
+                return "Error al guardar el item en el localStorage: " + e.message;
+              }  
+        }
+         
+            function renderizarCesta(){
+                
+                leerCesta()
+                let elCarrito = document.getElementById("carrito");
+                let elPrecioTotal = document.getElementById("total");
+                elCarrito.textContent = "";
+                elPrecio = 0;
+                for (i = 0; i < cestaCompra.length; i++) {
+                    let numeroControl = cestaCompra[i];
+                    let articuloCarrito = document.createElement("li");
+                    elCarrito.appendChild(articuloCarrito);
+                    articuloCarrito.setAttribute("class", "articulo-carrito");
+
+                    let contenedorArticuloCarrito = document.createElement("figure");
+                    articuloCarrito.appendChild(contenedorArticuloCarrito);
+                    contenedorArticuloCarrito.setAttribute("class", "img-carrito");
+
+                    let imagenArticuloCarrito = document.createElement("img");
+                    contenedorArticuloCarrito.appendChild(imagenArticuloCarrito);
+                    imagenArticuloCarrito.setAttribute("src", infoProductos[numeroControl].img1);
+                    imagenArticuloCarrito.setAttribute("alt", "imagen");
+
+                    let textoArticulocarrito = document.createElement("p");
+                    articuloCarrito.appendChild(textoArticulocarrito);
+                    textoArticulocarrito.innerText = infoProductos[numeroControl].titulo;
+
+                    let infoArticulo = document.createElement("div");
+                    articuloCarrito.appendChild(infoArticulo);
+                    infoArticulo.setAttribute("class", "infoArticulo")
+
+                    let precioArticuloCarrito = document.createElement("p");
+                    infoArticulo.appendChild(precioArticuloCarrito);
+                    precioArticuloCarrito.innerText = infoProductos[numeroControl].precio + " €";
+                    elPrecio = elPrecio + infoProductos[numeroControl].precio
+
+                    let botonBorrarArticulo = document.createElement("button");
+                    infoArticulo.appendChild(botonBorrarArticulo);
+                    botonBorrarArticulo.innerText = "Eliminar";
+                    botonBorrarArticulo.setAttribute("type", "button");
+                    botonBorrarArticulo.setAttribute("onclick", "borrarArticulo()");
+                    botonBorrarArticulo.setAttribute("marcador", infoProductos[numeroControl].numeroproducto);
+
+                }
+                elPrecioTotal.textContent = elPrecio
+            }
+
+
+
+            function eliminarCesta() {
+                localStorage.removeItem("numProd");
+                let elCarrito = document.getElementById("carrito");
+                elCarrito.textContent = "";
+                cestaCompra = [];
+            }
+
+          function leerCesta() {
+            
+            
+            var lecturaCesta = JSON.parse(localStorage.getItem('numProd'));
+            if (lecturaCesta === null) {
+            cestaCompra = [];
+            } else {
+            cestaCompra = lecturaCesta;
+            }
+            
+            
+                   
+        }
+        let textoInputPedido = "";
+            
+        
+        function tramitarPedido(){
+                
+                window.location.href = "./Contactos.html";
+                alert("Solicita Informacion aqui")
+            }
+
+   /** function tramitarEncargo() {
+        let asuntoPedido = document.getElementById("formSubject");
+        asuntoPedido.value = "Solicitud Compra Productos";
+        console.log(asuntoPedido.value)
+        let inputPedido = document.getElementById("formComment");
+        textoPedido();
+        inputPedido.innerText =  textoInputPedido;
+        
+        console.log(asuntoPedido.value)
+    }
+     
+   
+    function textoPedido(){
+        let textoInputPedido = `Hola me gustaria saber la disponibilidad de: `;
+        let precioPedido = 0;
+        console.log(textoInputPedido)
+        for (i = 0; i < cestaCompra.length; i++) {
+            let numControl = cestaCompra[i];
+            console.log(numControl)
+            let nombreProd = infoProductos[numControl].titulo;
+            let precioPedido = precioPedido + infoProductos[numControl].precio;
+            textoInputPedido = textoInputPedido + `${nombreProd}, `
+        }
+        textoInputPedido = textoInputPedido + `el precio total seria de: ${precioPedido} €. Muchas gracias.`
+        return textoInputPedido;
+    }*/ 
+
+const genListaProd = () => {
+    
+    
+    let contenedorProd = document.getElementById("contenedorProductos2");
+
+    for (let i = 0; i < infoProductos.length; i++){
+        
+    let itemListaProd = document.createElement("li");
+    contenedorProd.appendChild(itemListaProd);
+    itemListaProd.setAttribute("class", "item-lista-productos");
+
+    let tituloProd = document.createElement("h3");
+    itemListaProd.appendChild(tituloProd);
+    var textotitulo = document.createTextNode(infoProductos[i].titulo)
+    tituloProd.appendChild(textotitulo);
+
+    let contenedorCarrousel = document.createElement("div");
+    itemListaProd.appendChild(contenedorCarrousel);
+    contenedorCarrousel.setAttribute("class", "container-carousel")
+        
+    let carruselesProd = document.createElement("div");
+    contenedorCarrousel.appendChild(carruselesProd);
+    carruselesProd.setAttribute("class", "carruseles-prod");
+    
+    let fotoUnoProd = document.createElement("figure");
+    carruselesProd.appendChild(fotoUnoProd);
+    fotoUnoProd.setAttribute("class", "slider-section-prod")
+        
+    let imgUno = document.createElement("img");
+    fotoUnoProd.appendChild(imgUno);
+    imgUno.setAttribute("src", infoProductos[i].img1)
+    imgUno.setAttribute("alt", infoProductos[i].alt)
+
+    let fotoDosProd = document.createElement("figure");
+    carruselesProd.appendChild(fotoDosProd);
+    fotoDosProd.setAttribute("class", "slider-section-prod")
+
+    let imgDos = document.createElement("img");
+    fotoDosProd.appendChild(imgDos);
+    imgDos.setAttribute("src", infoProductos[i].img2)
+    imgDos.setAttribute("alt", infoProductos[i].alt)
+
+    let fotoTresProd = document.createElement("figure");
+    carruselesProd.appendChild(fotoTresProd);
+    fotoTresProd.setAttribute("class", "slider-section-prod")
+
+    let imgTres = document.createElement("img");
+    fotoTresProd.appendChild(imgTres);
+    imgTres.setAttribute("src", infoProductos[i].img3)
+    imgTres.setAttribute("alt", infoProductos[i].alt)
+
+    let btnIzq = document.createElement("button");
+    contenedorCarrousel.appendChild(btnIzq);
+    btnIzq.setAttribute("type", "button");
+    btnIzq.setAttribute("class", "btn-left");
+    btnIzq.setAttribute("onclick", "moveToLeft()");
+    btnIzq.innerText = " < "
+
+    let btnDcha = document.createElement("button");
+    contenedorCarrousel.appendChild(btnDcha);
+    btnDcha.setAttribute("type", "button");
+    btnDcha.setAttribute("class", "btn-right");
+    btnDcha.setAttribute("onclick", "moveToRight()");
+    btnDcha.innerText = " > "
+
+    let listaInfoProd = document.createElement("ul");
+    itemListaProd.appendChild(listaInfoProd);
+    listaInfoProd.setAttribute("class", "info-producto")
+
+    let descProd = document.createElement("li");
+    listaInfoProd.appendChild(descProd);
+    descProd.setAttribute("class", "descripcion-producto");
+
+    let textoProd = document.createElement("p");
+    descProd.appendChild(textoProd);
+    textoProd.setAttribute("class", "texto-descrip-prod")
+    textoProd.innerText = infoProductos[i].textodescrip
+    
+    let dispoProd = document.createElement("p");
+    descProd.appendChild(dispoProd);
+    dispoProd.setAttribute("class", "productos-disponibles")
+    dispoProd.innerText = "Disponibles: " + infoProductos[i].disponibles
+
+    let precioProd = document.createElement("li");
+    listaInfoProd.appendChild(precioProd);
+    precioProd.setAttribute("class", "precio-producto");
+    precioProd.innerText = infoProductos[i].precio.toFixed(2) + "€";
+
+    let liBotonAñadir = document.createElement("li");
+    listaInfoProd.appendChild(liBotonAñadir);
+    liBotonAñadir.setAttribute("class", "contenedor-boton-añadir");
+    
+    let botonAñadir = document.createElement("button");
+    liBotonAñadir.appendChild(botonAñadir);
+    botonAñadir.setAttribute("type", "button");
+    botonAñadir.setAttribute("class", "añadirProd");
+    botonAñadir.setAttribute("marcador", infoProductos[i].numeroproducto);
+    botonAñadir.setAttribute("onclick", "guardarEnCarrito()");
+    botonAñadir.innerText = "Añadir a Cesta";
+

    }

+
+}    
+
 /** más adelante se creará un botón para añadir a un carrito y un contenedor para los articulos del carrito
 con sus correspondientes botones para quitar el producto, un espacio donde figure la suma de las cantidades, etc. */