Calcular financiación al elegir un número de meses con jQuery
En este artículo vamos a ver un ejemplo en el que tras elegir un número de meses (12, 24, 36 meses) de un selector o dropdown se calcule la financiación correspondiente de un precio especificado sin recargar la página con jQuery.
El código de este ejemplo puede ser muy útil para tiendas virtuales que ofrecen formas de pago fraccionado como Cetelem o Cofidis. Es interesante ofrecer a los posibles clientes la posibilidad de saber con antelación cuanto tendrán que pagar al mes de un producto en su misma ficha.
En el ejemplo haremos una simulación con PHP y jQuery que luego se podrá adaptar perfectamente a cualquier programa de ecommerce.
En el <body>, en el lugar donde se desee ver el selector y sus resultados deberemos añadir algo como lo siguiente:
<?php $price = 400; ?> <select name="months" id="months" onChange="calculate(this.value, <?=$price?>);"> <option value="12">12 meses</option> <option value="24">24 meses</option> <option value="36">36 meses</option> </select> <div class="price_month"> <span id="price_month"><?php echo round(($price / 12), 2); ?></span> € / mes en <span id="months_selected">12</span> meses </div>
Se trata de un selector de meses que en el evento onChange estamos llamando a la función calculate() y un contenedor donde mostramos los resultados de los cálculos de esta función.
<script type="text/javascript">
function calculate(months, price) {
var cost = price / months;
$('#price_month').text(cost.toFixed(2));
$('#months_selected').text(months);
}
</script>
La función calculate() recibe 2 parámetros de entrada, el número de meses elegido en el selector y el precio del producto para calcular el coste de la división del precio entre los meses. Luego tan solo añadimos el coste al contenedor deseado y hacemos lo mismo con el número de meses elegido.
Para adaptarlo a cualquier programa ecommerce tan solo deberás pasar como parámetro a la función la variable que contiene el precio del producto.
Es importante saber que para que todo funcione se debe añadir la librería jQuery en la página en el caso de que no estuviera.
Autor
¿Buscas trabajo de programador?
65 artículos que te podrían interesar
Deja una respuesta