Cálculo Automático de cuotas para Woocommerce - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4

Cálculo Automático de cuotas para Woocommerce

¿Cómo puedes 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. 👌

5 1 voto
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios
img-8
Añadir lightbox "Facilmente"

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.

Leer más
img-9
Imagen de Fondo Archivo de Categorías

Vamos a tratar de como añadir un encabezado con la imagen predeterminada para el archivo de categorías, cada categoría tendrá su imagen predeterminada.
Para esto solo se necesita de un plugin gratuito, aunque también se puede hacer con otros como por ejemplo el HappyFiles.

Leer más
img-10
Botón de Todos los Templates

Se echa de menos un botón que estando en la sección "Edit Template" nos lleve directamente a la página de Templates que es donde se muestra todo el listado de plantillas de Oxygen, parece que alguien se ha olvidado de este detalle que debería estar implementado nativamente y a veces hasta fastidia un poco tener que cargar dos páginas para llegar ahí estando en la sección de edición de template.

Leer más