/* PÁGINA PRINCIPAL */
//CARRUSEL moviendo los li en lugar del ul; ya que tiene over-flow: hidden
const getId = function (id) {
return document.getElementById(id)
}
const ulCarrouselNodeList = document.querySelectorAll('#ul_carousel li')
const rightArrow = getId('right_arrow_carr')
const leftArrow = getId('left_arrow_carr')
let index = 0
let position = 0
let percentage = 0
let gap = 0
rightArrow.addEventListener('click', () => {
if (index == ulCarrouselNodeList.length - 1) {
rightArrow.style.color = 'rgb(199, 197, 197)'
return
}
rightArrow.style.color = '#000000'
leftArrow.style.color = '#000000'
index += 1
position -= 100
gap -= 50
ulCarrouselNodeList[index - 1].style.transform = `translateX(calc(${position}% + ${gap}px))`
ulCarrouselNodeList[index].style.transform = `translateX(calc(${position}% + ${gap}px))`
})
leftArrow.addEventListener('click', () => {
if (index == 0) {
leftArrow.style.color = 'rgb(199, 197, 197)'
return
}
leftArrow.style.color = '#000000'
rightArrow.style.color = '#000000'
index -= 1
position += 100
gap += 50
ulCarrouselNodeList[index + 1].style.transform = `translateX(calc(${position}% + ${gap}px))`
ulCarrouselNodeList[index].style.transform = `translateX(calc(${position}% + ${gap}px))`
})
//FLORES
const divContainer = getId('div_container')
const dinamicTitle = getId('dinamic_title')
const btnFlores = getId('btn_flores')
const description = getId('description')
const countDown = document.getElementById('countdown')
let carrito = []
/* const divContainer = document.getElementById('div_container') */
const h1Dinamic = document.getElementById('dinamic_title')
const dropDownBox = document.getElementById('dropDown_box')
const menuIcon = document.getElementById('menu_icon')
const closeIcon = document.getElementById('close_icon')
const divMenu = document.getElementById('div_menu')
const dinamicSection = document.getElementById('dinamic_section')
const body = document.getElementById('body')
/* btns */
const btnEventos = document.getElementById('btn_eventos')
/* función de renderizado de los productos de las opciones del ul del main */
const renderizadoLiMain = (e, array, nombBtn) => {
divContainer.innerHTML = ''
if (e == 'Flores') {
h1Dinamic.textContent = 'Flores'
} else {
h1Dinamic.textContent = e.target.textContent
}
array.forEach((objectChild) => {
description.textContent = objectChild.text
const caja = document.createElement('div')
caja.className = 'caja-flor'
caja.id = `caja_${objectChild.id}`
caja.innerHTML = `
${objectChild.name}
${objectChild.description}
${objectChild.precioAntes ? `${objectChild.precioAntes}` : ''}
${ objectChild.precio? objectChild.precio.toFixed(2) : ''}
`
divContainer.append(caja)
})
}
//para que salgan las flores por defecto
renderizadoLiMain('Flores', arrayFlores, 'btn_flores')
/* para renderizar los colores de flores disponibles */
const cambioContenidoFlorColor = (arrayColor, contenedorSmallImgs, contenedorColores, imgCambiante) => {
let contador = 0
arrayColor.forEach((color) => {
/* para color */
const caja = document.createElement('div')
caja.className = 'caja_color'
caja.setAttribute('data-img', color.img);
caja.style.background = `${color.rgb}`
caja.innerHTML = `
`
contenedorColores.append(caja)
/* para img flor */
const cajaFlor = document.createElement('img')
cajaFlor.className = 'caja_peq_flor'
cajaFlor.src = `${color.img}`
cajaFlor.alt = 'flores'
cajaFlor.title = `${color.name}`
contenedorSmallImgs.append(cajaFlor)
caja.addEventListener('click', () => {
imgCambiante.src = `${caja.dataset.img}`
})
cajaFlor.addEventListener('click', () => {
imgCambiante.src = `${caja.dataset.img}`
const inputColorSeleccionado = document.querySelector(`input[data-img='${caja.dataset.img}']`)
inputColorSeleccionado.checked = true
})
})
}
/* para cambiar palabra según el btn del menú seleccionado */
const decideContenido = (beforeh1Dinamic, array, contenedorSmallImgs, contenedorColores, imgCambiante, tituloProducto, cantidadFlores, inputCantidad,colorh3) => {
const mainContainerColorh3 = document.querySelector('.main_container_color h3')
switch (beforeh1Dinamic.trim()) {
case 'Eventos':
cambioContenidoFlorColor(array, contenedorSmallImgs, contenedorColores, imgCambiante)
tituloProducto.innerText = 'Escoge el tipo de arreglo:'
break;
case 'Cestas':
cambioContenidoFlorColor(array, contenedorSmallImgs, contenedorColores, imgCambiante)
tituloProducto.innerText = 'Escoge el tamaño de tu cesta:'
break;
case 'Flores':
cantidadFlores.innerText = 'Cantidad de flores'
inputCantidad.style.display = 'inline';
tituloProducto.innerText = 'Precio de la flor:'
cambioContenidoFlorColor(array, contenedorSmallImgs, contenedorColores, imgCambiante)
break;
case 'Ramos':
cantidadFlores.innerText = 'Cantidad de ramos que necesitas'
mainContainerColorh3.innerText = ''
tituloProducto.innerText = 'Precio de tu ramo:'
break;
case 'Regalos':
cantidadFlores.innerText = 'Cantidad de regalos que necesitas'
mainContainerColorh3.innerText = ''
tituloProducto.innerText = 'Precio del regalo:'
break;
case 'Ofertas':
tituloProducto.innerText = 'Precio del producto en oferta:'
cantidadFlores.innerText = 'Cantidad que necesitas:'
colorh3.innerText = ''
break;
default:
break;
}
}
const verificarProductoExistenteYrenderizado = (objetoCesta,mensajeAnadido,inputCantidad)=>{
let index = carrito.findIndex(obj => obj.id === objetoCesta.id)
if (index !== -1) {
// Si existe, solo incrementamos la cantidad
carrito[index].cantidad += Number(inputCantidad.value);
carrito[index].total = carrito[index].cantidad * carrito[index].price
} else {
objetoCesta.total = objetoCesta.cantidad * objetoCesta.price
carrito.push(objetoCesta);
}
setTimeout(() => {
mensajeAnadido.style.opacity = 1
setTimeout(() => {
mensajeAnadido.style.opacity = 0
}, 3000)
}, 300)
totalCantidadEnCesta(carrito)
renderizarEnCarrito(carrito)
totalCarrito()
}
/* función renderizado de los productos de cada caja del renderizado de arriba */
const renderizadoProducto = (array, target) => {
array.forEach((objeto) => {
divContainer.innerHTML = ''
let beforeh1Dinamic = h1Dinamic.textContent
h1Dinamic.textContent = `${objeto.name}`
description.textContent = ''
divContainer.innerHTML = `
`
/* Contenido según el btn seleccionado */
const contenedorSmallImgs = document.querySelector('.small_imgs')
const contenedorColores = document.querySelector('.container_color');
const imgCambiante = document.querySelector('.img_cambiante');
const tituloProducto = document.querySelector('.titulo_producto');
const cantidadFlores = document.querySelector('.cantidad_floresh5');
const divCantidadFlores = document.querySelector('.cantidad_flores')
const inputCantidad = document.getElementById('input-cantidad');
const colorh3 = document.querySelector('.color_h3')
decideContenido(beforeh1Dinamic, objeto.colores, contenedorSmallImgs, contenedorColores, imgCambiante, tituloProducto, cantidadFlores, inputCantidad,colorh3);
/* compruebo si estoy en CESTAS */
const dinamicContainerProduct1 = document.getElementById('dinamic_container_product1')
if (!objeto.precios) {
dinamicContainerProduct1.textContent = objeto.precio.toFixed(2) + '€'
dinamicContainerProduct1.classList.add('diferent_style')
} else {
dinamicContainerProduct1.classList.remove('diferent_style')
objeto.precios.forEach((item) => {
const cajaProducto = document.createElement('div')
cajaProducto.className = 'caja_producto_dinamico'
cajaProducto.innerHTML = `
`
dinamicContainerProduct1.append(cajaProducto)
})
}
/* compruebo si estoy en EVENTOS */
if (objeto.name === 'Cumpleaños' || objeto.name === 'Bodas') {
inputCantidad.remove()
divCantidadFlores.innerHTML = ''
divCantidadFlores.innerHTML = `
Escríbenos datos sobre tu decoración
`
}
/* compruebo si estoy en OFERTAS */
if(beforeh1Dinamic === 'Ofertas'){
const figureImgCambiante = document.querySelector('.dinamic_product_figure')
figureImgCambiante.setAttribute('data-oldprice', objeto.precioAntes)
figureImgCambiante.classList.add('oferta')
}
/* BOTÓN AÑADIR AL CARRITO */
const formDinamicProductSection = document.getElementById('dinamic_product_section')
const mensajeAnadido = document.getElementById('mensaje_anadido')
/* const inputCantidad = formDinamicProductSection.querySelector('.input_cantidad') */
formDinamicProductSection.addEventListener('submit', function (e) {
e.preventDefault()
let objetoCesta = {}
const inputColorSeleccionado = document.querySelector('input[name="input_color"]:checked');
/* para ramos y regalo */
if (objeto.name.includes('Ramo') || objeto.name.includes('regalo') || beforeh1Dinamic === 'Ofertas' && inputCantidad.value !== '0') {
objetoCesta.flowerColor = 'de la foto',
objetoCesta.id = objeto.id,
objetoCesta.img = objeto.img,
objetoCesta.name = objeto.name,
objetoCesta.price = objeto.precio,
objetoCesta.cantidad = Number(inputCantidad.value)
verificarProductoExistenteYrenderizado(objetoCesta,mensajeAnadido,inputCantidad)
}
if (inputCantidad && inputCantidad.value !== '0' && inputColorSeleccionado) {
objetoCesta.flowerColor = inputColorSeleccionado.id,
objetoCesta.id = objeto.id + inputColorSeleccionado.dataset.id,
objetoCesta.img = inputColorSeleccionado.dataset.img,
objetoCesta.name = objeto.name,
objetoCesta.price = objeto.precio,
objetoCesta.cantidad = Number(inputCantidad.value)
/* para cestas */
let inputTamanoCestaSeleccionado = document.querySelector('input[name="input_cesta"]:checked');
if (objeto.precios && inputTamanoCestaSeleccionado) {
objetoCesta.tamanoCesta = inputTamanoCestaSeleccionado.dataset.tamano
objetoCesta.price = Number(inputTamanoCestaSeleccionado.dataset.price)
}
verificarProductoExistenteYrenderizado(objetoCesta,mensajeAnadido,inputCantidad)
}
})
if (objeto.tipos) {
const found = renderizadoProducto(objeto.tipos, target)
if (found) {
return found
}
}
})
}
/* Delegación de eventos con id */
body.addEventListener('click', (e) => {
const target = e.target
let nombreBtn = target.id
switch (nombreBtn) {
case 'btn_eventos':
countDown.style.display = 'none'
renderizadoLiMain(e, arrayDeEventos, nombreBtn)
break;
case 'btn_cestas':
countDown.style.display = 'none'
renderizadoLiMain(e, arrayCestaFlores, nombreBtn)
break;
case 'btn_ramos':
countDown.style.display = 'none'
renderizadoLiMain(e, arrayRamos, nombreBtn)
break;
case 'btn_flores':
countDown.style.display = 'none'
renderizadoLiMain(e, arrayFlores, nombreBtn)
break;
case 'btn_regalos':
countDown.style.display = 'none'
renderizadoLiMain(e, arrayRegalos, nombreBtn)
break;
case 'ofertas':
countDown.style.display = 'block'
renderizadoLiMain(e, arrayOfertas, nombreBtn)
break;
default:
break;
}
})
/* delegación de eventos con clase */
dinamicSection.addEventListener('click', (e) => {
const target = e.target
switch (target.className) {
case 'btn_ver_productos'://creado de manera general para todos los botones, que busquen su correspondiente array y objeto
const nombArticulo = target.dataset.name
const array = JSON.parse(target.dataset.array)
const objeto = array.filter((item) => item.name == nombArticulo)
renderizadoProducto(objeto)
break;
default:
break;
}
})
menuIcon.addEventListener('click', () => {
menuIcon.style.display = 'none'
menuIcon.style.background = 'background-color: var(--darkBrown-color);'
dropDownBox.style.display = 'block'
closeIcon.style.display = 'block'
divMenu.classList.toggle('decoration')
})
closeIcon.addEventListener('click', () => {
menuIcon.style.display = 'block'
dropDownBox.style.display = 'none'
closeIcon.style.display = 'none'
divMenu.classList.toggle('decoration')
})
/* IMITACIÓN DE BASE DE DATOS (PRODUCTOS) */
/* objeto para contenido dinámico */
const arrayDeEventos = [
{
id: 11,
name: 'Cumpleaños',
img: '../IMG/evento cumpleños.jpg',
description: 'Realizamos hermosas decoraciones en los cumpleaños',
precios: [
{
id: 111,
name: 'Arreglos sencillos',
description: 'El precio es por cada pack de 10 flores usados sin importar el tipo',
precio: 150,
},
{
id: 112,
name: 'Arreglos complejos',
description: 'El precio es cuando son más de 200 flores sin importar el tipo',
precio: 400
}
], colores: [
{
name: 'Blancas',
rgb: 'rgb(252, 251, 251)',
img: '../IMG/decoracion cumpleaños blanco.webp'
},
{
name: 'Rosado',
rgb: 'rgb(248, 153, 212)',
img: '../IMG/arreglo cumpleaño rosado.webp'
},
]
},
{
id: 12,
name: 'Bodas',
img: '../IMG/boda.jpg',
description: 'Decora tu boda con nosotros',
precios: [
{
id: 112,
name: 'Arreglos sencillos',
description: 'El precio es para un máximo de 150 flores sin importar el tipo incluyendo 20 globos',
precio:150 ,
},
{
id: 113,
name: 'Arreglos complejos',
description: 'El precio es para un mínimo de 150 flores y máximo 400 flores sin importar el tipo, incluye 60 globos',
precio: 400,
}
],
colores: [
{
name: 'Blancas',
rgb: 'rgb(252, 251, 251)',
img: '../IMG/decoracion boda blanca.webp'
},
{
name: 'Combinado',
rgb: 'rgba(236, 154, 240, 1)',
img: '../IMG/decoracion boda combinado.webp'
},
]
}
]
const arrayCestaFlores = [
{
id: 21,
name: 'Cesta de Amapolas',
category: 'Amapolas',
img: '../IMG/cesta amapola.jpg',
description: 'Es la popular amapola de delicadas flores rojas que solemos ver y admirar en los campos de maíz .',
precios: [
{
id: 211,
name: 'Cesta pequeña',
img: '../IMG/cesta amapola.jpg',
description: 'Cesta pequeña de 10 Amapolas',
precio: 15
},
{
id: 212,
name: 'Cesta grande',
img: '../IMG/cesta amapola.jpg',
description: 'Para un rango de Amapolas de 28 flores',
precio: 30
}
],
colores: [
{
name: 'Rojas',
rgb: 'rgb(255, 0, 0)',
img: '../IMG/cesta amapola.jpg',
},
{
name: 'Blancas',
rgb: 'rgb(252, 251, 251)',
img: '../IMG/cesta amapola blanca.webp'
},
{
name: 'Naranja',
rgb: 'rgb(249, 171, 45)',
img: '../IMG/cesta amapola naranja.webp'
},
{
name: 'Rosada',
rgb: 'rgb(247, 189, 235)',
img: '../IMG/cesta amapola rosada.webp'
},
]
},
{
id: 22,
name: 'Cesta de Lirios',
category: 'Lirios',
img: '../IMG/cesta lirios.webp',
description: 'Un verdadero placer rendir homenaje a los versátiles iris o lirios barbados que iluminan. ',
precios: [
{
id: 221,
name: 'Cesta pequeña',
img: '../IMG/cesta amapola.jpg',
description: 'Cesta pequeña de 10 Lirios',
precio: 15
},
{
id: 222,
name: 'Cesta grande',
img: '../IMG/cesta amapola.jpg',
description: 'Para un rango de Lirios 28 flores',
precio: 30
}
],
colores: [
{
name: 'Azul',
rgb: 'rgb(101, 101, 252)',
img: '../IMG/cesta lirios azules.webp',
},
{
name: 'Blanco',
rgb: 'rgb(252, 252, 253)',
img: '../IMG/cesta lirio blanco.webp'
},
{
name: 'Rosa',
rgb: 'rgb(253, 132, 217)',
img: '../IMG/cesta lirios.webp',
}, {
name: 'Morado',
rgb: 'rgb(120, 55, 124)',
img: '../IMG/cesta lirios morados.webp'
}
]
},
{
id: 32,
name: 'Cesta de Rosas',
category: 'Rosas',
img: '../IMG/cesta de rosas.jpg',
description: 'La presencia de las rosas en la cultura popular es omnipresente, desde su aparición en películas y programas de televisión',
precios: [
{
id: 321,
name: 'Cesta pequeña',
img: '../IMG/cesta de rosas.jpg',
description: 'Cesta pequeña de 10 Rosas',
precio: 15
},
{
id: 322,
name: 'Cesta grande',
img: '../IMG/cesta de rosas.jpg',
description: 'Para un rango de Rosas de 28 flores',
precio: 30
}
],
colores: [
{
name: 'Rojas',
rgb: 'rgb(255, 0, 0)',
img: '../IMG/cesta rosa roja.webp',
},
{
name: 'Amarillas',
rgb: 'rgb(255, 242, 0)',
img: '../IMG/cesta rosa amarilla.webp',
},
{
name: 'Blancas',
rgb: 'rgb(252, 251, 251)',
img: '../IMG/cesta rosa blanca.webp'
},
{
name: 'Azul',
rgb: 'rgb(75, 131, 252)',
img: '../IMG/cesta rosa azul.webp'
},
{
name: 'Rosada',
rgb: 'rgb(247, 189, 235)',
img: '../IMG/cesta rosa rosada.webp'
},
]
},
{
id: 42,
name: 'Cesta de Gardenias',
category: 'Gardenias',
img: '../IMG/cesta gardenia.webp',
description: 'Durante el final de la primavera produce flores parecidas a las de las rosas.',
precios: [
{
id: 421,
name: 'Cesta pequeña',
img: '../IMG/cesta gardenia.webp',
description: 'Cesta pequeña de 10 Gardenias',
precio: 15
},
{
id: 422,
name: 'Cesta grande',
img: '../IMG/cesta gardenia.webp',
description: 'Para un rango de Gardenias de 28 flores',
precio: 30
}
],
colores: [
{
name: 'Blancas',
rgb: 'rgb(254, 252, 252)',
img: '../IMG/cesta gardenia.webp',
},
{
name: 'Rosadas',
rgb: 'rgb(248, 110, 149)',
img: '../IMG/cesta gardenia rosada.webp',
},
]
},
]
const arrayRamos = [
{
id: 'r1',
name: 'Ramo de flores silvestres',
precio: 15,
img: '../IMG/ramo de flor1.webp',
description: 'Ramo de flores ideal para una mujer sencilla y única'
},
{
id: 'r2',
name: 'Ramo Ada',
img: '../IMG/ramo de flor2.webp',
precio: 17,
description: 'Ramo de flores ideal para una mujer sencilla y única'
},
{
id: 'r3',
name: 'Ramo Celestial',
precio: 15.50,
img: '../IMG/ramo de flor3.webp',
description: 'Rmo de flores ideal para una mujer sencilla y única'
},
{
id: 'r4',
name: 'Ramo combinado',
img: '../IMG/ramo de flor4.webp',
precio: 18,
description: 'Ramo de flores ideal para una mujer sencilla y única'
},
{
id: 'r5',
name: 'Ramo Estephany',
precio: 20,
img: '../IMG/ramo de flor5.webp',
description: 'Rmo de flores ideal para una mujer sencilla y única'
},
{
id: 'r6',
name: 'Ramo Argentina',
img: '../IMG/ramo de flor6.webp',
precio: 18,
description: 'Ramo de flores ideal para una mujer sencilla y única'
},
{
id: 'r7',
name: 'Ramo Barbara',
precio: 20,
img: '../IMG/ramo de flor7.webp',
description: 'Rmo de flores ideal para una mujer sencilla y única'
},
{
id: 'r8',
name: 'Ramo Tu Luz',
precio: 20,
img: '../IMG/ramo de flor8.webp',
description: 'Rmo de flores ideal para una mujer sencilla y única'
},
{
id: 'r9',
name: 'Ramo Sheyla',
img: '../IMG/ramo de flor9.webp',
precio: 18,
description: 'Ramo de flores ideal para una mujer sencilla y única'
},
{
id: 'r10',
name: 'Ramo Caridad',
precio: 20,
img: '../IMG/ramo de flor10.webp',
description: 'Rmo de flores ideal para una mujer sencilla y única'
},
]
const arrayRegalos = [
{
id: 'rg1',
name: 'Set regalo Julia',
precio: 35,
img: '../IMG/regalo cesta+vino+bom.webp',
description: 'Set de cesta de flores, botella de vino y bombones'
},
{
id: 'rg2',
name: 'Set regalo Dunia',
img: '../IMG/regalo cesta+bom.webp',
precio: 37,
description: 'Set de cesta de flores, botella de vino y bombones'
},
{
id: 'rg3',
name: 'Set regalo Almiral',
precio: 58,
img: '../IMG/regalo cesta+fruta.webp',
description: 'Set de cesta de flores, botella de vino y bombones'
},
{
id: 'rg4',
name: 'Set regalo Lucero',
img: '../IMG/regalo cesta+fruta2.webp',
precio: 48,
description: 'Set de cesta de flores, botella de vino y bombones'
},
{
id: 'rg5',
name: 'Set regalo Dalula',
precio: 50,
img: '../IMG/regalo ramo+vino+oso.webp',
description: 'Set de cesta de flores, botella de vino y bombones'
},
{
id: 'rg6',
name: 'Set regalo Oasis',
img: '../IMG/regalo cesta+vino+bom2.webp',
precio: 48,
description: 'Set de cesta de flores, botella de vino y bombones'
},
{
id: 'rg7',
name: 'Set regalo Babyshower',
precio: 20,
img: '../IMG/regalo cesta+globo+pelu.webp',
description: 'Set de cesta de flores, botella de vino y bombones'
},
{
id: 'rg8',
name: 'Set regalo de cumpleaños',
precio: 20,
img: '../IMG/regalo cesta+globo.webp',
description: 'Set de cesta de flores, botella de vino y bombones'
},
{
id: 'rg9',
name: 'Set regalo San Valentín',
img: '../IMG/regalo valentin.webp',
precio: 18,
description: 'Set de cesta de flores, botella de vino y bombones'
},
]
const arrayFlores = [
{
name: 'Girasol', id: 'f1', precio: 0.46, description: ' Representa la alegría y la lealtad, conocido por su color amarillo vibrante y su capacidad de seguir al sol.', img: '../IMG/girasol.jpg',
colores: [
{
name: 'Amarillo',
rgb: 'rgb(247, 191, 71)',
img: '../IMG/girasol.jpg'
}
]
},
{
name: 'Margarita', id: 'f2', precio: 0.78, description: 'Evoca la inocencia y la pureza, y es un símbolo de lealtad y confianza.', img: '../IMG/margarita.jpg',
colores: [
{
name: 'Naranja',
rgb: 'rgb(250, 184, 41)',
img: '../IMG/Margarita naranja.webp'
},
{
name: 'Blanco',
rgb: 'rgb(252, 252, 253)',
img: '../IMG/margarita.webp'
},
{
name: 'Rosa',
rgb: 'rgb(253, 132, 217)',
img: '../IMG/margarita rosa.webp'
},
{
name: 'Amarilla',
rgb: 'rgb(244, 244, 71)',
img: '../IMG/margarita amarilla.webp'
},
]
},
{
name: 'Tulipán', id: 'f3', precio: 0.50, description: ' Simboliza el amor perfecto y la fama, con una forma elegante y variedad de colores.', img: '../IMG/tulipan.jpg',
colores: [
{
name: 'Rosado',
rgb: 'rgb(248, 140, 203)',
img: '../IMG/tulipan rosado.webp'
},
{
name: 'Blanco',
rgb: 'rgb(252, 252, 253)',
img: '../IMG/tulipan blanco.webp'
},
{
name: 'Morado',
rgb: 'rgb(136, 7, 97)',
img: '../IMG/tulipan morado.webp'
},
{
name: 'Amarillo',
rgb: 'rgb(244, 244, 71)',
img: '../IMG/tulipan amarillo.webp'
},
]
},
{
name: 'Dalia', id: 'f4', precio: 0.34, description: ' Representa la dignidad y la elegancia, con una variedad de formas y colores.', img: '../IMG/dalia.jpg',
colores: [
{
name: 'Rosado',
rgb: 'rgb(248, 140, 203)',
img: '../IMG/dalia rosada.webp'
},
{
name: 'Blanco',
rgb: 'rgb(252, 252, 253)',
img: '../IMG/dalia blanca.webp'
},
{
name: 'Naranja',
rgb: 'rgb(250, 107, 24)',
img: '../IMG/dalia naranja.webp'
},
{
name: 'Amarillo',
rgb: 'rgb(244, 244, 71)',
img: '../IMG/dalia amarilla.webp'
},
]
},
{
name: 'Lirio', id: 'f5', precio: 0.67, description: 'Simboliza la pureza y la renovación, frecuentemente utilizado en celebraciones de amor y compasión.', img: '../IMG/lirio.jpg',
colores: [
{
name: 'Rosado',
rgb: 'rgb(248, 140, 203)',
img: '../IMG/lirio rosado.webp'
},
{
name: 'Blanco',
rgb: 'rgb(252, 252, 253)',
img: '../IMG/lirio blanco.webp'
},
{
name: 'Azul',
rgb: 'rgb(121, 163, 237)',
img: '../IMG/lirio azul.webp'
},
{
name: 'Amarillo',
rgb: 'rgb(244, 244, 71)',
img: '../IMG/lirio amarillo.webp'
},
]
},
{
name: 'Hortensia', id: 'f6', precio: 1, description: ' Simboliza la gratitud y la comprensión, conocida por sus grandes cabezas de flores.', img: '../IMG/hortensia.jpg',
colores: [
{
name: 'Rosado',
rgb: 'rgb(248, 140, 203)',
img: '../IMG/hortensia rosada.webp'
},
{
name: 'Blanco',
rgb: 'rgb(252, 252, 253)',
img: '../IMG/hortensia blanca.webp'
},
{
name: 'Azul',
rgb: 'rgb(121, 163, 237)',
img: '../IMG/hortensia azul.webp'
},
{
name: 'Amarillo',
rgb: 'rgb(244, 244, 71)',
img: '../IMG/hortensia amarilla.webp'
},
]
},
{
name: 'Magnolia', id: 'f7', precio: 0.40, description: ' Representa la nobleza y la perseverancia, con flores grandes y fragantes.', img: '../IMG/magnolia.jpg',
colores: [
{
name: 'Blanca',
rgb: 'rgb(254, 253, 254)',
img: '../IMG/magnolia blanca.webp'
},
{
name: 'Rosada',
rgb: 'rgb(244, 151, 225)',
img: '../IMG/magnolia rosada.webp'
},
]
},
]
const arrayOfertas = [
{ name: 'Cesta de Amapolas', color: 'Amarillas', description: 'Cesta pequeña', precio: 9, img: '../IMG/amapolas amarillas.png',precioAntes:'12,00 €' },
{ name: 'Cesta de Rosas', color: 'Naranja', description: 'Cesta grande', precio: 25, img: '../IMG/rosas naranjas.jpg',precioAntes:'30,00 €'},
{ name: 'Lirio', color: 'Azúl', description: 'flor', precio: 0.95, img: '../IMG/lirio-azul.webp',precioAntes:'2,00 €' },
{ name: 'Orquídea', color: 'Morado', description: 'flor', precio: 1, img: '../IMG/orquíea morada.jpg',precioAntes:'3,00€' },
]
const arrayCestas = [
{
name: 'Cesta Julia',
img: '../IMG/cesta1.jpg',
tamano: [
{ size: 'Small', sizeDescrip: '(54cm diámetro, 25cm alto)', precio: 6 },
{ size: 'Medium ', sizeDescrip: '(60cm diámetro, 31cm alto)', precio: 10 },
{ size: 'Large', sizeDescrip: '(66cm diámetro, 37cm alto)', precio: 15 }
]
},
{
name: 'Cesta Luna',
img: '../IMG/cesta2.webp',
tamano: [
{ size: 'Small ', sizeDescrip: '(54cm diámetro, 25cm alto)', precio: 6 },
{ size: 'Medium ', sizeDescrip: '(60cm diámetro, 31cm alto)', precio: 10 },
]
},
{
name: 'Cesta Lousiana',
img: '../IMG/cesta3.jpg',
tamano: [
{ size: 'Small ', sizeDescrip: '(54cm diámetro, 25cm alto)', precio: 6 },
{ size: 'Medium ', sizeDescrip: '(60cm diámetro, 31cm alto)', precio: 10 },
]
},
{
name: 'Cesta París',
img: '../IMG/cesta4.jpg',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 25cm alto)', precio: 6 },
{ size: 'Medium', sizeDescrip: ' (60cm diámetro, 31cm alto)', precio: 10 },
]
},
{
name: 'Cesta Adelia',
img: '../IMG/cesta5.jpg',
tamano: [
{ size: 'Small (54cm diámetro, 25cm alto)', precio: 6 },
{ size: 'Medium (60cm diámetro, 31cm alto)', precio: 10 },
]
},
]
const arrayMolde = [
{
name: 'Molde circular',
img: '../IMG/moldecircular.jpg',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 8cm alto)', precio: 4 },
{ size: 'Medium', sizeDescrip: ' (60cm diámetro, 12cm alto)', precio: 8 },
{ size: 'Large', sizeDescrip: ' (66cm diámetro, 20cm alto)', precio: 11 }
]
},
{
name: 'Molde de corazón',
img: '../IMG/moldecorazón.jpg',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 25cm alto)', precio: 6 },
{ size: 'Medium', sizeDescrip: ' (60cm diámetro, 31cm alto)', precio: 10 },
{ size: 'Large', sizeDescrip: ' (66cm diámetro, 20cm alto)', precio: 11 }
]
},
{
name: 'Molde estrella',
img: '../IMG/moldeestrella.jpg',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 25cm alto)', precio: 5 },
{ size: 'Medium', sizeDescrip: ' (60cm diámetro, 31cm alto)', precio: 9 },
]
},
{
name: 'Molde oso',
img: '../IMG/moldeoso.jpg',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 25cm alto)', precio: 10 },
{ size: 'Medium ', sizeDescrip: '(60cm diámetro, 31cm alto)', precio: 14 },
{ size: 'Large', sizeDescrip: ' (66cm diámetro, 20cm alto)', precio: 16 }
]
},
{
name: 'Molde rectangular',
img: '../IMG/molderectangular.jpg',
tamano: [
{ size: 'Small ', sizeDescrip: '(54cm diámetro, 25cm alto)', precio: 3 },
{ size: 'Medium', sizeDescrip: ' (60cm diámetro, 31cm alto)', precio: 12 },
]
},
]
const arrayJarrones = [
{
name: 'Jarrón Francia',
img: '../IMG/jarron1.webp',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 25cm alto)', precio: 4 },
{ size: 'Medium', sizeDescrip: ' (60cm diámetro, 31cm alto)', precio: 9 },
{ size: 'Large', sizeDescrip: ' (66cm diámetro, 37cm alto)', precio: 15 }
]
},
{
name: 'Jarrón Canadá',
img: '../IMG/jarron2.jpg',
tamano: [
{ size: 'Small ', sizeDescrip: '(54cm diámetro, 25cm alto)', precio: 8 },
{ size: 'Medium', sizeDescrip: ' (60cm diámetro, 31cm alto)', precio: 17 },
]
},
{
name: 'Jarrón Suiza',
img: '../IMG/jarron3.jpg',
tamano: [
{ size: 'Small (54cm diámetro, 25cm alto)', precio: 4 },
{ size: 'Medium (60cm diámetro, 31cm alto)', precio: 8 },
]
},
{
name: 'Jarrón Cuba',
img: '../IMG/jarron4.jpg',
tamano: [
{ size: 'Small (54cm diámetro, 25cm alto)', precio: 5 },
{ size: 'Medium (60cm diámetro, 31cm alto)', precio: 11 },
]
},
{
name: 'Jarrón Egipto',
img: '../IMG/jarron5.jpg',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 25cm alto)', precio: 7 },
{ size: 'Medium', sizeDescrip: ' (60cm diámetro, 31cm alto)', precio: 13 },
]
},
]
const arrayEnvolturas = [
{
name: 'Envoltura Rufi',
img: '../IMG/hojasdeenvolturadeflores3.avif',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 25cm alto)', precio: 2 },
{ size: 'Medium', sizeDescrip: ' (60cm diámetro, 31cm alto)', precio: 5 },
{ size: 'Large', sizeDescrip: ' (66cm diámetro, 37cm alto)', precio: 9 }
]
},
{
name: 'Envoltura Lula',
img: '../IMG/hojasenvolturadeflores4.jpg',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 25cm alto)', precio: 2 },
{ size: 'Medium', sizeDescrip: ' (60cm diámetro, 31cm alto)', precio: 10 },
]
},
{
name: 'Envoltura Nerla',
img: '../IMG/hojasenvolturadeflores5.jpg',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 25cm alto)', precio: 3 },
{ size: 'Medium ', sizeDescrip: '(60cm diámetro, 31cm alto)', precio: 8 },
]
},
{
name: 'Envoltura Lara',
img: '../IMG/hojasenvolturadeflores1.webp',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 25cm alto)', precio: 5 },
{ size: 'Medium', sizeDescrip: ' (60cm diámetro, 31cm alto)', precio: 11 },
]
},
{
name: 'Envoltura Soria',
img: '../IMG/hojasenvolturadeflores2.jpg',
tamano: [
{ size: 'Small', sizeDescrip: ' (54cm diámetro, 25cm alto)', precio: 7 },
{ size: 'Medium ', sizeDescrip: '(60cm diámetro, 31cm alto)', precio: 13 },
]
},
]
const arrayMensaje = [
{ name: 'Mensaje1', img: '../IMG/papelmensaje1.jpg' },
{ name: 'Mensaje2', img: '../IMG/papelmensaje2.jpg' },
{ name: 'Mensaje3', img: '../IMG/papelmensaje3.jpg' },
{ name: 'Mensaje4', img: '../IMG/papelmensaje4.jpg' },
]
/* INICIO SESIÓN */
const formMainContainer = document.getElementById('form_main_container')
const userData = {}
let password
/* Delegación de eventos 'click' */
const loginContainer = document.getElementById('div_container_login')
const registerContainer = document.getElementById('div_container_register')
function translateY() {
registerContainer.style.transform = 'translateX(calc(-100% - 60px))'
loginContainer.style.transform = 'translateX(calc(-100% - 60px))'
}
function translateYback() {
registerContainer.style.transform = 'translateX(0%)'
loginContainer.style.transform = 'translateX(0%)'
}
formMainContainer.addEventListener('click', (e) => {
const target = e.target.id
switch (target) {
case 'enlace_registro':
translateY()
break;
case 'enlace_incio_sesion':
translateYback()
break;
default:
break;
}
})
/* Expresiones Regulares */
const regexName = /^[a-zA-Z]+([-\s][a-zA-Z]+)*$/;
const regexEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const regexPassword = /^[a-zA-Z0-9\W]{1,20}$/;
const regexTel = /^[0-9]{1,9}$/;
/* función estilos para datos correctos e incorrectos */
const rightStylesInputs = ( icon, input, errorMessage) => {
errorMessage.classList.remove('styles_error_message')
icon.classList.remove('styles_error_message')
icon.classList.add('style_right_icon')
input.classList.add('style_right_input')
}
const wrongStylesInputs = ( icon, input, errorMessage) => {
errorMessage.classList.add('styles_error_message')
icon.classList.add('styles_error_message')
icon.classList.remove('style_right_icon')
input.classList.remove('style_right_input')
}
const defaultStylesInputs = ( icon, input, errorMessage) => {
icon.classList.remove('style_right_icon')
input.classList.remove('style_right_input')
errorMessage.classList.remove('styles_error_message')
icon.classList.remove('styles_error_message')
}
/* función reutilizable */
const validInputFunction = (e, regex, icon, input, errorMessage) => {
const target = e.target
const targetId = e.target.id
let targetValue = target.value
if (regex.test(target.value)) {
rightStylesInputs( icon, input, errorMessage)
switch (targetId) {
case 'input_full_name':
userData.name = target.value
target.dataset.boolean = 'true'
break;
case 'input_create_email':
userData.email = target.value
target.dataset.boolean = 'true'
break;
case 'input_tel':
userData.phoneNumber = target.value
target.dataset.boolean = 'true'
break;
case 'input_create_password':
password = target.value
target.dataset.boolean = 'true'
break;
}
} else if (targetValue.trim() === '') {
defaultStylesInputs( icon, input, errorMessage)
target.dataset.boolean = 'false'
} else {
wrongStylesInputs( icon, input, errorMessage)
target.dataset.boolean = 'false'
}
}
const confirmPassword = (target, icon, input, errorMessage) => {
if (password !== undefined && password === target.value) {
userData.password = target.value
rightStylesInputs( icon, input, errorMessage)
target.dataset.boolean = 'true'
} else {
wrongStylesInputs( icon, input, errorMessage)
}
}
/* comprobar datos guardados en localStorage */
const userDataValidation = (target, targetId, icon, input, errorMessage) => {
const objectUserData = JSON.parse(localStorage.getItem('userData'))
switch (targetId) {
case 'input_email':
if (objectUserData.email === target.value) {
rightStylesInputs(icon,input,errorMessage)
target.dataset.boolean = 'true'
} else {
wrongStylesInputs(icon,input,errorMessage)
target.dataset.boolean = 'false'
}
break;
case 'input_password':
if (objectUserData.password === target.value) {
rightStylesInputs(icon,input,errorMessage)
target.dataset.boolean = 'true'
} else {
wrongStylesInputs(icon,input,errorMessage)
target.dataset.boolean = 'false'
}
break;
}
}
/* Delegación de eventos para inputs*/
formMainContainer.addEventListener('input', (e) => {
const targetId = e.target.id
const target = e.target
let parentNode = target.closest('.div_input')
const errorMessage = parentNode.querySelector('.error_message')
const icon = parentNode.querySelector('.icon')
const input = parentNode.querySelector('.input')
switch (targetId) {
case 'input_email':
userDataValidation(target, targetId, icon, input, errorMessage)
/* funcion que compare el email guardado en localStorage */
break;
case 'input_password':
userDataValidation(target, targetId, icon, input, errorMessage)
/* confirmar con la creada en localStorage también */
break;
case 'input_full_name':
validInputFunction(e, regexName, icon, input, errorMessage)
break;
case 'input_create_email':
validInputFunction(e, regexEmail, icon, input, errorMessage)
break;
case 'input_tel':
validInputFunction(e, regexTel, icon, input, errorMessage)
break;
case 'input_create_password':
validInputFunction(e, regexPassword, icon, input, errorMessage)
break;
case 'input_confirm_password':
confirmPassword(target, icon, input, errorMessage)
break;
default:
break;
}
})
/* Enviar datos */
const registerForm = document.getElementById('form_register')
registerForm.addEventListener('submit', (e) => {
e.preventDefault()
const form = e.target.closest('.form')
let nodeListInputs = form.querySelectorAll('.input')//saco el NodeList porque son elemnetos del DOM
let arrayInputs = Array.from(nodeListInputs)//convertir a array para que el método every() funcione ya que hay métodos que no funcionan con el nodelist
console.log(form.id)
//confirma si todos los inputs son correctos (true) o si hay alguno falso, con el método every() estoy preguntando si todos cumplen cierta condición
function boolean(arrayInputs) {
const resultadoBooleano = arrayInputs.every((input) =>{
if (input.dataset.boolean === 'true') {
return true
} else {
return false
}
})
return resultadoBooleano
}
if (boolean(arrayInputs)) {
switch (form.id) {
case 'form_register':
localStorage.setItem('userData',JSON.stringify(userData))
translateYback()
break;
case 'form_login':
//función que me lleve a la página de la cesta de compra con el artículo al que le dió añadir a cesta antes de registrarse
break;
}
} else {
window.alert('Rellene los datos correctamente por favor🙏. ')
}
})
/* CARRITO */
/* evento click en icono cesta */
const iconoCesta1 = document.getElementById('icono_cesta1')
const iconoCesta2 = document.getElementById('icono_cesta2')
const mensajeNoHayArticulos = document.getElementById('mensaje_no_hay_articulos')
const totalCesta = document.querySelector('.total_cesta')
const validacionCarritoVacioOno = ()=>{
if(carrito.length === 0){
mensajeNoHayArticulos.style.display = 'block'
}else{
mensajeNoHayArticulos.style.display = 'none'
}
}
iconoCesta1.addEventListener('click',()=>{
validacionCarritoVacioOno()
})
iconoCesta2.addEventListener('click',()=>{
validacionCarritoVacioOno()
})
const totalCantidadEnCesta = (carritoParametro) => {
const total = carritoParametro.reduce((acumulador, articulo) => {
return articulo.cantidad + acumulador
}, 0)
mostrarCantidadEnCesta.textContent = total
}
const subTotal = (articulo,pTotal) => {
articulo.total = articulo.cantidad * articulo.price
pTotal.textContent = `${articulo.total.toFixed(2)} €`
}
const totalCarrito = ()=>{
const resultado = carrito.reduce((acc,obj)=>{
return obj.total + acc
},0)
totalCesta.textContent = resultado.toFixed(2) + '€'
}
const mostrarCantidadEnCesta = document.querySelector('.mostrar_cantidad_en_cesta')
const formCarrito = document.getElementById('form_cesta')
const renderizarEnCarrito = (carritoParametro) => {
formCarrito.innerHTML = ''
carritoParametro.forEach((articulo) => {
const cajaArticulo = document.createElement('div')
cajaArticulo.className = 'caja_articulo'
cajaArticulo.innerHTML = `
${articulo.name}
${articulo.name} de color : ${articulo.flowerColor}
Precio:
${articulo.price.toFixed(2)}€
Total:
${articulo.total.toFixed(2)}€
`
formCarrito.append(cajaArticulo)
const iconPlus = cajaArticulo.querySelector('.icon_plus')
const iconMinus = cajaArticulo.querySelector('.icon_minus')
const iconDelete = cajaArticulo.querySelector('.delete')
const inputCantidad = cajaArticulo.querySelector('.input_cantidad')
const pTotal = cajaArticulo.querySelector('.total')
iconPlus.addEventListener('click', () => {
articulo.cantidad = articulo.cantidad + 1
inputCantidad.value = articulo.cantidad
subTotal(articulo,pTotal)
totalCantidadEnCesta(carritoParametro)
totalCarrito()
})
iconMinus.addEventListener('click', () => {
if (inputCantidad.value === '0') return
articulo.cantidad = articulo.cantidad - 1
inputCantidad.value = articulo.cantidad
subTotal(articulo,pTotal)
totalCantidadEnCesta(carritoParametro)
totalCarrito()
})
iconDelete.addEventListener('click', (e) => {
const targetId = e.target.id
carrito = carrito.filter(obj => obj.id !== targetId)
totalCantidadEnCesta(carrito)
renderizarEnCarrito(carrito)
validacionCarritoVacioOno()
totalCarrito()
})
})
}
/* btn pagar y mandar datos del carrito a /HTML/pago.html */
const btnPagar = document.getElementById('pagar')
btnPagar.addEventListener('click',()=>{
const carritoJSON = JSON.stringify(carrito)
/* codifico el carrito para poderlo pasar dentro de una url */
const codificarCarrito = new URLSearchParams({data: carritoJSON}).toString()
window.location.href = `pago.html?${codificarCarrito}`
})
/* PAGO */
function limitLength(event, number) {
const input = event.target;
const value = input.value;
let maxLength = number; // Límite de tantos dígitos
// Si el valor excede el máximo permitido, se recorta
if (value.length > maxLength) {
input.value = value.slice(0, maxLength);
}
}
/*RECIBIR DATOS DEL ARRAY POR PARÁMETROS EN UNA URL*/
/* busco parámetro en la URL */
const urlParametros = new URLSearchParams(window.location.search)
/* obtengo el dato guardado en el parámetro con el nombre 'data'; que es un array con objetos de tipo String */
const arrayParametro = urlParametros.get('data')
/*para poderlo utilizar convertir a tipo objeto */
let arrayCarrito = JSON.parse(arrayParametro)
console.log(arrayCarrito)
/* variables globales */
let subtotal
let totalPagar
let objDirecc = {}
let objTarjeta = {}
/* RENDERIZADO DE LOS DATOS DEL ARRAY */
const divSectionResumen = document.getElementById('div_section_resumen')
const contenedorPadre = document.getElementById('div_container')
const divListAside = document.getElementById('div_list_aside')
const sectionResumen = document.getElementById('section_resumen')
const sectionDatosEnvios = document.getElementById('section_datos_envio')
const sectionDatosTarjeta = document.getElementById('section_datos_tarjeta')
const sectionRecibo = document.getElementById('section_recibo')
const loading = document.getElementById('loading')
const mostrarTotalSectionPago = document.getElementById('mostrar_total_pago2')
/* RESUMEN RESUMEN RESUMEN */
const subtotalResumen = document.getElementById('subtotal_resumen')
const contenedorMensaje = document.getElementById('contenedor_nota_regalo')
/* funciones de cálculo */
const calcularSubTotal = (arrayCarrito) => {
subtotal = arrayCarrito.reduce((acc, obj) => {
return obj.total + acc
}, 0)
subtotalResumen.textContent = subtotal.toFixed(2) + ' €'
}
const mostrarimpuestoIva = document.getElementById('impuesto_iva')
const calcularIva = () => {
let iva = (subtotal + 3.50) / 100 * 21
mostrarimpuestoIva.textContent = iva.toFixed(2) + ' €'
return iva
}
const mostrartotalPagar = document.getElementById('total_pagar_resumen')
const calcularTotal = () => {
totalPagar = calcularIva() + 3.50 + subtotal
mostrartotalPagar.textContent = totalPagar.toFixed(2) + ' €'
}
/* RENDERIZADO */
const renderizado = (arrayCarrito) => {
divSectionResumen.innerHTML = ''
calcularSubTotal(arrayCarrito)
calcularIva()
calcularTotal()
arrayCarrito.forEach((objeto) => {
const cajaProducto = document.createElement('div')
cajaProducto.className = 'caja_producto'
cajaProducto.id = `${objeto.id}`
cajaProducto.innerHTML = `
${objeto.tamanoCesta}
${objeto.name} color ${objeto.flowerColor}
Cantidad de cestas
${objeto.cantidadCesta}
Cada cesta contiene ${objeto.cantidadFlores} ${objeto.name}
Total:
${objeto.total.toFixed(2)} €
`
divSectionResumen.append(cajaProducto)
const iconDelete = cajaProducto.querySelector('.delete')
iconDelete.addEventListener('click', (e) => {
const targetId = e.target.id
arrayCarrito = arrayCarrito.filter(obj => obj.id !== targetId)
renderizado(arrayCarrito)
calcularSubTotal(arrayCarrito)
calcularIva()
calcularTotal()
})
});
}
renderizado(arrayCarrito)
let inputRadioActivadoId
const textareaMensaje = document.getElementById('textarea_mensaje_regalo')
/* delegación de evento para input radio mensaje de regalo*/
divSectionResumen.addEventListener('change', (e) => {
if (e.target && e.target.classList.contains('mostrar_ms')) {
const btn = e.target
if (btn.checked) {
inputRadioActivadoId = btn.id
textareaMensaje.innerHTML = ''
contenedorMensaje.style.display = 'block'
console.log('input clicado ' + inputRadioActivadoId)
} else {
contenedorMensaje.style.display = 'none'
}
}
})
const btnGuardarMensaje = document.getElementById('btn_guardar_mensaje')
btnGuardarMensaje.addEventListener('click', () => {
const objeto = arrayCarrito.find(obj => obj.id === inputRadioActivadoId)
objeto.mensaje = textareaMensaje.value
textareaMensaje.value = ''
const divMensaje = document.getElementById(`div_ms_${inputRadioActivadoId}`)
divMensaje.innerHTML = ''
divMensaje.innerHTML = `
Editar mensaje
Eliminar mensaje
`
contenedorMensaje.style.display = 'none'
})
/* delegación de evento en article con clases*/
const cerrarMensaje = document.getElementById('cerrar_mensaje')
cerrarMensaje.addEventListener('click', () => {
contenedorMensaje.style.display = 'none'
textareaMensaje.value = ''
})
const btnResumenArticulos = document.getElementById('pagar_resumen')
btnResumenArticulos.addEventListener('click', () => {
sectionResumen.style.display = 'none'
sectionDatosEnvios.style.display = 'block'
document.querySelector('.li_1').classList.remove('active')
document.querySelector('.li_2').classList.add('active')
console.log(mostrartotalPagar.textContent)
arrayCarrito.totalApagar = parseFloat(mostrartotalPagar.textContent)
mostrarTotalSectionPago.textContent = arrayCarrito.totalApagar + ' €'
})
/* DATOS DE ENVÍO DATOS DE ENVÍO DATOS DE ENVÍO */
const regexNombre = /^[a-zA-Z\s]{1,80}$/
const regexCp = /^[0-9]{1,8}$/
/* Delegación de eventos de inputs de todo el contenedor padre de las sections */
const article = document.getElementById('article')
const placeholderFake = document.querySelector('.placeholder_fake')
article.addEventListener('input', (e) => {
const target = e.target
const targetId = target.id
const targetValue = target.value
let msError = target.nextElementSibling
switch (targetId) {
case 'input_nombre',
'input_apellidos',
'input_envio_nomb_apell':
if (regexNombre.test(targetValue)) {
msError.style.display = 'none'
} else {
target.value = targetValue.slice(0, -1)
msError.style.display = 'block'
}
break;
case 'input_numero_tarjeta',
'input_expiracion',
'input_c_seguridad':
if (regexCp.test(targetValue)) {
msError.style.display = 'none'
} else {
target.value = targetValue.slice(0, -1)
msError.style.display = 'block'
}
break;
default:
break;
}
})
/* delegación de eventos click en article por id , clases y parentNode */
const ulCountryCode = document.getElementById('ul_country_code')
const inputTel = document.getElementById('input_telefono')
article.addEventListener('click', (e) => {
const target = e.target
const parentNode = target.parentNode
/* por parentNode id */
switch (parentNode.id) {
case 'cambiante':
ulCountryCode.style.display = 'block'
break;
default:
break;
}
if (parentNode.className === 'option') {
placeholderFake.innerHTML = ''
const optionHtml = parentNode.innerHTML
placeholderFake.innerHTML = optionHtml
placeholderFake.style.opacity = 1
ulCountryCode.style.display = 'none'
inputTel.focus()
}
/* por clase */
const objId = parentNode.id
const obj = arrayCarrito.find(obj => obj.id === objId)
switch (target.className) {
case 'editar_ms':
contenedorMensaje.style.display = 'block'
textareaMensaje.value = obj.mensaje
break;
case 'borrar_ms':
delete obj.mensaje
textareaMensaje.value = ''
contenedorMensaje.style.display = 'none'
const divMensaje = document.getElementById(`div_ms_${objId}`)
divMensaje.innerHTML = ''
divMensaje.innerHTML = `
`
break;
default:
break;
}
})
/* submit */
const guardarDireccion = document.getElementById('guardar_direcc')
const inputNombApll = document.getElementById('input_envio_nomb_apell')
const inputDirecc = document.getElementById('input_envio_direcc')
const inputProv = document.getElementById('input_provincia')
const inputCp = document.getElementById('input_cp')
const formDatosEnvio = document.getElementById('form_datos_envio')
formDatosEnvio.addEventListener('submit', (e) => {
const codigPais = document.querySelector('#cambiante span')
sectionDatosEnvios.style.display = 'none'
sectionDatosTarjeta.style.display = 'block'
document.querySelector('.li_2').classList.remove('active')
document.querySelector('.li_3').classList.add('active')
arrayCarrito.envio = objDirecc
objDirecc.nombApll = inputNombApll.value
objDirecc.direcc = inputDirecc.value
objDirecc.prov = inputProv.value
objDirecc.codP = inputCp.value
objDirecc.tel = codigPais.textContent + inputTel.value
e.preventDefault()
console.log(arrayCarrito)
htmlDireccEntrega(objDirecc)
})
/* PAGO PAGO PAGO */
const punticosNodeList = document.querySelectorAll('.punticos')
const inputTitular = document.getElementById('input_nombre')
const inputTitularApell = document.getElementById('input_apellidos')
const inputNumTarj = document.getElementById('input_numero_tarjeta')
const inputExpiracion = document.getElementById('input_expiracion')
const inputCodSeg = document.getElementById('input_c_seguridad')
const inputEmail = document.getElementById('input_email')
const formDatosTarjeta = document.getElementById('form_datos_tarjeta')
formDatosTarjeta.addEventListener('submit', (e) => {
sectionDatosTarjeta.style.display = 'none'
loading.style.display = 'block'
loading.dataset.value = '1'
document.querySelector('.li_3').classList.remove('active')
document.querySelector('.li_4').classList.add('active')
arrayCarrito.tarjeta = objTarjeta
objTarjeta.titular = inputTitular.value
objTarjeta.titularApell = inputTitularApell.value
objTarjeta.tarjeta = inputNumTarj.value
objTarjeta.expiracion = inputExpiracion.value
objTarjeta.codSeg = inputCodSeg.value
objTarjeta.email = inputEmail.value
e.preventDefault()
if (loading.dataset.value === '1') {
let contador = 0
let intervalo = setInterval(() => {
if (contador === 5) {
clearInterval(intervalo)
punticosNodeList.forEach(puntico => {
puntico.classList.remove('animacion_activa')
})
loading.style.display = 'none'
sectionRecibo.style.display = 'block'
console.log(arrayCarrito)
}
punticosNodeList.forEach(puntico => {
puntico.classList.add('animacion_activa')
})
contador += 1
}, 2000)
}
})
/* RECIBO RECIBO RECIBO */
const fecha = document.getElementById('fecha_compra')
const date = new Date()
fecha.textContent = `${date.getDate()}/${date.toLocaleString("default",{month:'long'})}/${date.getFullYear()}`
const NumEnvio = document.getElementById('numero_envio')
NumEnvio.textContent = `${Math.floor(Math.random() * 100) + 1}`// + 1 para que incluya el 100
const copiaDate = new Date(date)
copiaDate.setDate(date.getDate() + 7)
const plazoEntrega = document.querySelector('#plazo_entrega')
plazoEntrega.textContent = `${copiaDate.getDate()}/${copiaDate.toLocaleString("default",{month:'long'})}/${copiaDate.getFullYear()}`
function htmlDireccEntrega (objeto){
const pDirecc = document.getElementById('direcc_entreg')
const caja = document.createElement('div')
caja.className = 'd_envio'
caja.innerHTML= `
Enviar a:
${objeto.nombApll}
Dirección de envío:
${objeto.direcc}
${objeto.prov}
${objeto.codP}
Teléfono:
${objeto.tel}
`
pDirecc.append(caja)
}
/* CRÉALO TU MISMO */
const titulo = document.getElementById('titulo_opcion')
const contenedorDinamico = document.getElementById('contenedor_dinamico')
const opcionesSeleccion = document.getElementById('opciones_seleccion')
const body = document.getElementById('body')
const h3 = document.getElementById('h3')
const mostrar = document.getElementById('mostrar')
function productoXdefecto(array, arrayMensaje) {
mostrar.innerHTML = ''
h3.innerText = ''
//IMG por defecto
const obj1 = array[0]
h3.innerText = obj1.name
mostrar.innerHTML = `
`
const divTamano = mostrar.querySelector('#div_tamano')
obj1.tamano.forEach((tamano) => {
const div2 = document.createElement('div')
div2.className = 'div2'
div2.innerHTML = `
${tamano.size}
${tamano.sizeDescrip}
${tamano.precio.toFixed(2)} €
`
divTamano.append(div2)
})
const mensaje1 = mostrar.querySelector('#mensaje')
arrayMensaje.forEach((mensaje) => {
const div2 = document.createElement('div')
div2.className = 'div_mensaje'
div2.innerHTML = `
${mensaje.name}
`
mensaje1.append(div2)
})
}
function renderizar(arrayProducto, arrayMensaje, label) {
titulo.innerText = label
titulo.style.textTransform = 'uppercase'
opcionesSeleccion.innerHTML = ''
arrayProducto.forEach((item) => {
const caja = document.createElement('div')
caja.innerHTML = `
${item.name}
`
opcionesSeleccion.append(caja)
/* item.addEventListener('click',()=>{
}) */
});
productoXdefecto(arrayProducto,arrayMensaje)
}
renderizar(arrayCestas, arrayMensaje, arrayCestas[0].name)
body.addEventListener('click', (e) => {
const label = e.target.closest('label')//propagación de evento burbuja, de lo contrario no entra al switch xq el id de la 'img' o la 'p' no coincide .
const labelId = label.id
switch (labelId) {
case 'cestas'://quitar éste de aquí y ponerlo fuera para que salga siempre por defecto en la página
renderizar(arrayCestas, arrayMensaje, labelId)
break;
case 'jarrones':
renderizar(arrayJarrones, arrayMensaje, labelId)
break;
case 'moldes':
renderizar(arrayMolde, arrayMensaje, labelId)
break;
case 'envolturas':
renderizar(arrayEnvolturas, arrayMensaje, labelId)
break;
default:
break;
}
})