El añadir lightbox con sus efectos visuales parece una tarea difícil y que requiere el uso de un nuevo plugin, pero nada más lejos de la realidad, con Oxygen lo tenemos muy fácil, realmente asombrosamente fácil con dos líneas de código HTML y pocas más de código JavaScript, aquí mostramos como hacerlo.
Con un pequeño código de JavaScript podemos tener la funcionalidad del cálculo y salida en pantalla de la cantidad resultante de las cuotas correspondientes cuando se cambia a una variante de un producto con un precio diferente.
En el video se puede ver el funcionamiento.
Instrucciones de Implementación
Incluir el código abajo propuesto, bien en un elemento Code-Block o bien mediante un plugin gestor de snippets como WpCodebox
Código
const selector = document.getElementById('pa_size')
const btnReset = document.querySelector('.reset_variations')
let precioArr= document.querySelectorAll('bdi')
const valInicial = precioArr[precioArr.length-1].lastChild.data
const plazos = 3 //Cambiar por el número de plazos
mostrar =(reseteo)=>{
precioArr= document.querySelectorAll('bdi')
let largo = precioArr.length
valor = precioArr[largo-1].lastChild.data.replace(/[^0-9]/g, ".")
valor = valor * 1
aplazado = valor/plazos;
aplazado = aplazado.toFixed(2)
aplazado =aplazado.replace(/[^0-9]/g, ",")
if(reseteo) aplazado = valInicial;
precioArr[2].lastChild.data = aplazado
}
selector.addEventListener('change', ()=>{
setTimeout(mostrar, 200, false)
})
btnReset.addEventListener('click', () =>{
setTimeout(mostrar, 200, true)
})
Consideraciones:
- El valor de la cuota debe de estar posicionado de manera que sea el tercer valor monetario en el DOM(contando de arriba hacia abajo)
- El valor del precio que aparece una vez seleccionada una opción debe ser el que ocupe la última posición en el DOM.
- El valor de la constante "plazos", en nuestro ejemplo 3, se cambiará por el número de plazos deseado.
Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.
Nos vemos en la próxima. 👌