commit3

CSS/main.css

@@ -58,6 +58,73 @@
     color: white;
 }
 
+/*----------------------------Carrito Compra---------------------------*/
+
+.cestaCompra {
+    display: flex;
+    flex-direction: row;
+    position: fixed;
+    cursor: pointer;
+    right: 5px;
+    bottom: 100px;
+    z-index: 999;
+
+}
+
+.img-carrito img{
+    
+    width: 40px;
+    height: 40px;
+
+}
+.desplegable-carrito {
+    display: none;
+    opacity: 0;
+    padding: 10px;
+}
+
+.img-carrito:hover ~ .desplegable-carrito{
+    display:block;
+    opacity: 1;
+    z-index: 999;
+
+   }
+
+   .cestaCompra:hover > .desplegable-carrito{
+    display:block;
+    opacity: 1;
+    z-index: 999;
+    background-color: white;
+   }
+   .cestaCompra:hover > .img-carrito{
+    opacity: 0;
+   }
+
+    .articulo-carrito {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }   
+
+    .articulo-carrito p{
+        margin: 0 5px;
+        padding-top: 5px;
+        align-self: center;
+    }
+
+
+
+    .listaCarrito {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+.infoArticulo {
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+}
 /*----------------------------Boton Arriba------------------*/
 
 .btn-up {
@@ -299,13 +366,25 @@
     border-style: solid;
     margin: 0;
     font-weight: bold;
+    align-self: center;
 }
 
 .productos-disponibles {
     color: #576c57;
 }
 
+.contenedor-boton-añadir {
+    display: flex;
+    align-items: center;
+}
 
+.añadirProd {
+    margin: 10px;
+    border-radius: 25%;
+    width: 80px;
+    height: 60px;
+    text-overflow: ellipsis;
+}
 
 .item-lista-productos .container-carousel .btn-left,
 .item-lista-productos .container-carousel .btn-right {
@@ -677,6 +756,10 @@
 
 }
 
+
+
+
+
 .dropdown:hover > ul {
     display:block;
     opacity: 1;
@@ -1045,6 +1128,15 @@ button.boton-enviar-form   {
     .info-producto{
         margin: 0;
         padding: 0;
+        display: flex;
+        flex-direction: column;
+        
+    }
+    .descripcion-producto{
+        display: flex;
+        flex-direction: row;
+        text-align: center;
+        justify-content: center;
     }
     .slider-section-prod {
         padding: 0;

HTML/Contactos.html

@@ -40,6 +40,25 @@
                 <i class="fa-solid fa-arrow-up"></i>
             </button>
      
+            <div class="cestaCompra" id="contenedorCesta">
+                <figure class="img-carrito">
+                    <img src="../RECURSOS/Logo/fotoCarrito.png" alt="">
+                </figure>
+                
+                <div class="desplegable-carrito">
+                    <p class="text-right">Total: <span id="total"></span>&euro;</p>
+                    <button id="boton-vaciar" class="botonVaciar" onclick="eliminarCesta()">Vaciar</button>
+                    <button id="boton-tramitar" class="botonVaciar" onclick="tramitarPedido()">Tramitar</button>
+
+                    
+                    
+                    <ul id="carrito" class="listaCarrito">
+                    </ul>
+                
+                
+                </div>
+            </div>
+        
     </header>
 
     <div class="titulo-contacto" id="articulo-cont">
@@ -68,7 +87,7 @@
             <h2>Contacta con La Forja</h2>
             <form action="https://formsubmit.co/7e360d9cc9ca04dfaa14e5a35e53cf18" method="POST" id="formularioContacto">
                 <label for="name">Nombre:</label>
-                <input type="text" name="name" >
+                <input type="text" name="name">
 
                 <label for="mail">
                    <span>Correo Electrónico:</span> 

HTML/Eventos.html

@@ -43,6 +43,25 @@
                 <i class="fa-solid fa-arrow-up"></i>
             </button>
         
+           
+            <div class="cestaCompra" id="contenedorCesta">
+                <figure class="img-carrito">
+                    <img src="../RECURSOS/Logo/fotoCarrito.png" alt="">
+                </figure>
+                
+                <div class="desplegable-carrito">
+                    <p class="text-right">Total: <span id="total"></span>&euro;</p>
+                    <button id="boton-vaciar" class="botonVaciar" onclick="eliminarCesta()">Vaciar</button>
+                    <button id="boton-tramitar" class="botonVaciar" onclick="tramitarPedido()">Tramitar</button>
+
+                    
+                    
+                    <ul id="carrito" class="listaCarrito">
+                    </ul>
+                
+                
+                </div>
+        </div>
     </header>
     <section class="art-inicio-eventos">
         <h1 class="titulo-inicio" id="titulo-grande-eventos">EVENTOS</h1>

HTML/Productos.html

@@ -41,6 +41,26 @@
                 <i class="fa-solid fa-arrow-up"></i>
             </button>
 
+
+
+            <div class="cestaCompra" id="contenedorCesta">
+                    <figure class="img-carrito">
+                        <img src="../RECURSOS/Logo/fotoCarrito.png" alt="">
+                    </figure>
+                    
+                    <div class="desplegable-carrito">
+                        <p class="text-right">Total: <span id="total"></span>&euro;</p>
+                        <button id="boton-vaciar" class="botonVaciar" onclick="eliminarCesta()">Vaciar</button>
+                        <button id="boton-tramitar" class="botonVaciar" onclick="tramitarPedido()">Tramitar</button>
+
+                        
+                        
+                        <ul id="carrito" class="listaCarrito">
+                        </ul>
+                    
+                    
+                    </div>
+            </div>
     </header>
     <main class="cuerpo-prod">
         <section class="art-inicio-productos">

HTML/Servicios.html

@@ -40,6 +40,25 @@
                 <i class="fa-solid fa-arrow-up"></i>
             </button>
         
+            <div class="cestaCompra" id="contenedorCesta">
+                <figure class="img-carrito">
+                    <img src="../RECURSOS/Logo/fotoCarrito.png" alt="">
+                </figure>
+                
+                <div class="desplegable-carrito">
+                    <p class="text-right">Total: <span id="total"></span>&euro;</p>
+                    <button id="boton-vaciar" class="botonVaciar" onclick="eliminarCesta()">Vaciar</button>
+                    <button id="boton-tramitar" class="botonVaciar" onclick="tramitarPedido()">Tramitar</button>
+
+                    
+                    
+                    <ul id="carrito" class="listaCarrito">
+                    </ul>
+                
+                
+                </div>
+            </div>
+        
     </header>
     <section class="art-inicio-servicios">
         <h1 class="titulo-inicio" id="titulo-grande-sevicios">SERVICIOS</h1>

HTML/index.html

@@ -41,6 +41,28 @@
                 <i class="fa-solid fa-arrow-up"></i>
             </button>
 
+            <div class="cestaCompra" id="contenedorCesta">
+                <figure class="img-carrito">
+                    <img src="../RECURSOS/Logo/fotoCarrito.png" alt="">
+                </figure>
+                
+                <div class="desplegable-carrito">
+                    <p class="text-right">Total: <span id="total"></span>&euro;</p>
+                    <button id="boton-vaciar" class="botonVaciar" onclick="eliminarCesta()">Vaciar</button>
+                    <button id="boton-tramitar" class="botonVaciar" onclick="tramitarPedido()">Tramitar</button>
+
+                    
+                    
+                    <ul id="carrito" class="listaCarrito">
+                    </ul>
+                
+                
+                </div>
+            </div>
+
+
+
+        
     </header>
     <main class="cuerpo" id="cuerpo">
         
@@ -64,11 +86,10 @@
                      miniaturas para Wargames y juegos de mesa. Abordamos todos los aspectos de este tipo 
                      de hobbies: montaje, modelado, pintura y competición. 
                 </p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, reprehenderit 
+                <p>Somos una Asociación Cultural cuyos fines son el desarrollo y el fomento de actividades relacionadas con las artes plásticas, la pintura, los juegos de mesa y la promoción de eventos de tal índole.
-                    nostrum totam autem enim molestias dignissimos error perferendis veniam exercitationem 
+                    
-                    aliquam temporibus libero magnam? Nihil cumque corporis error voluptatum molestias.
                 </p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste incidunt distinctio ipsa maxime dolore tenetur dolorem optio, minima perspiciatis minus voluptatibus nostrum asperiores eos a enim laborum, earum at adipisci.</p>
+                <p>Ponte en contacto con nosotros para saber más de nuestras actividades y eventos.</p>
 
             </article>
         </div>

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 --------------------------------
 
 
 
+
+        function guardarEnCarrito() {
+            
+            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");
 
-    contenedorProd.innerHTML += `                            
+    let tituloProd = document.createElement("h3");
+    itemListaProd.appendChild(tituloProd);
+    var textotitulo = document.createTextNode(infoProductos[i].titulo)
+    tituloProd.appendChild(textotitulo);
 
-    <li class="item-lista-productos">
+    let contenedorCarrousel = document.createElement("div");
-        <h3>${infoProductos[i].titulo}</h3>
+    itemListaProd.appendChild(contenedorCarrousel);
-        <div class="container-carousel">
+    contenedorCarrousel.setAttribute("class", "container-carousel")
-            <div class="carruseles-prod" id="slider">
+        
-                <figure class="slider-section-prod">
+    let carruselesProd = document.createElement("div");
-                    <img src="${infoProductos[i].img1}" alt="${infoProductos[i].alt}">
+    contenedorCarrousel.appendChild(carruselesProd);
-                </figure>
+    carruselesProd.setAttribute("class", "carruseles-prod");
-                <figure class="slider-section-prod">
+    
-                    <img src="${infoProductos[i].img2}" alt="${infoProductos[i].alt}">
+    let fotoUnoProd = document.createElement("figure");
-                </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";
 
-                <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>
-        `}
 
     }
 
+
+}    
+
 /** 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. */