mikel
/
LaForjaWebOne
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

commit3

This commit is contained in:
mikel 2024-02-01 12:12:15 +01:00
parent 65c9d625f7
commit 88f93c1c5e
8 changed files with 453 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
CSS/main.css
View File

@ -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;

19
HTML/Contactos.html
View File

@ -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">

19
HTML/Eventos.html
View File

@ -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>

20
HTML/Productos.html
View File

@ -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">

19
HTML/Servicios.html
View File

@ -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>

29
HTML/index.html
View File

@ -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
nostrum totam autem enim molestias dignissimos error perferendis veniam exercitationem
aliquam temporibus libero magnam? Nihil cumque corporis error voluptatum molestias.
<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.
</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>

292
JS/index.js
View File

@ -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...) */
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,51 +187,255 @@ 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">
<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>
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";
}
<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>
`}
}

BIN
RECURSOS/Logo/fotoCarrito.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB