Cotizador web 
Autor: Ariel P.
Visitado 1276,
Followers 1,
Compartido 0
Buenos días, en mi web quiero colocar un cotizador online para que el visitante pueda tener una idea del costo y que no esté relacionado con el carro de compras, no encuentro como hacerlo.
La idea es poner la publicidad de un intercomunicador para edificios con un precio básico que incluye hasta 20 departamentos, digamos que el precio ficticio es $120000 +IVA, cuando el visitante de la web quiere saber el costo para su edificio y coloca la cantidad de departamentos, hasta un máximo de 200, el resultado debe ser $120000 + $3000 por cada uno de los que sumó a los 20 incluidos.
Ej.: si pone 32 el resultado es $156000 +IVA.
Agradecería si me pueden dar alguna idea, muchas gracias.
Publicado en
Hola Ariel:
Es un poquito complicado como lo propones, pero, te dejo un ejemplo de cómo hacerlo.
<html>
<title>Incrementar precio</title>
<body>
<h2>Cotizar costo</h2>
<h3>El precio BASE es por 20 departamentos = $120,000.00 + IVA</h3>
<p>
<label>Ingresa la cantidad extra de departamentos:</label>
<input id="inputDepartamentos" type="number" placeholder="Cantidad" oninput="Converter(this.value)" onchange="Converter(this.value)">
</p>
<p>Precio Base 120000 + Cantidad de Departamentos = $ <span id="outputPrecio"></span> + IVA</p>
<script>
function Converter(valNum) {
valNum = parseFloat(valNum);
document.getElementById("outputPrecio").innerHTML=(valNum*3000)+120000;
}
</script>
</body>
</html>
Espero te sirva, Saludos.
Nota1:
Hay una cantidad de departamentos como base: 20
Se ingresan cantidad de departamentos extra: 12
Un total de 32 Departamentos = 156 000
Nota2: en la caja de ingreso se da clic y se ingresa la cantidad por teclado numérico o con flecha arriba, flecha abajo o con las flechita que aparecen.
Si quieres que aparezca con IVA incluido es un poco más complicado, de cualquier forma lo intentaré hacer.
xD
Yo de nuevo...
DE esta otra forma si el cliente ingresa la cantidad como la pides (32) da el resultado correcto, pero, si el cliente ingresa 10 el total de departamentos sería de 10 y no los 20 de base, por lo que no sé si eso te conviene.
Es decir: si ingresa 5 sería 5-20 =15 departamentos con un costo de 75000 +IVA lo cual indica que reduce los mismos 3000 por cada departamento menos.
Espero explicarme: De lo contrario prueba las dos formas a ver cual te conviene.
<!DOCTYPE html>
<html>
<title>Incrementar precio</title>
<body>
<h2>Cotizar costo</h2>
<h3>El precio BASE es por 20 departamentos = $120,000.00 + IVA</h3>
<p>
<label>Ingresa la cantidad de departamentos tomando en cuenta que 20 es la base:</label>
<input id="inputDepartamentos" type="number" placeholder="Cantidad" oninput="Converter(this.value)" onchange="Converter(this.value)">
</p>
<p>Precio Base 120000 + Cantidad de Departamentos = $ <span id="outputPrecio"></span> + IVA</p>
<script>
function Converter(valNum) {
valNum = parseFloat(valNum);
document.getElementById("outputPrecio").innerHTML=((valNum-20)*3000)+120000;
}
</script>
</body>
</html>
Saludos.
Listo, con IVA incluido del 16%: Cambia la cantidad acorde a tu país, si es del 20% el multiplicativo sería de 1.20.
Lo resalté en negrita.
<!DOCTYPE html>
<html>
<title>Incrementar precio</title>
<body>
<h2>Cotizar costo</h2>
<h3>El precio BASE es por 20 departamentos = $120,000.00 + 16% de IVA</h3>
<p>
<label>Ingresa la cantidad de departamentos tomando en cuenta que 20 es la base:</label>
<input id="inputDepartamentos" type="number" placeholder="Cantidad" oninput="Converter(this.value)" onchange="Converter(this.value)">
</p>
<p>Precio Base 120000 + Cantidad de Departamentos = $ <span id="outputPrecio"></span> Incluye 16 % de IVA</p>
<script>
function Converter(valNum) {
valNum = parseFloat(valNum);
document.getElementById("outputPrecio").innerHTML=((((valNum-20)*3000)+120000)*1.16).toFixed(2);
}
</script>
</body>
</html>
Autor
Hola Miguel, muchas gracias por tu colaboración, no esperaba una respuesta tan rápida.
Cuando digo que el precio base es hasta 20 departamentos, me refiero que cualquier dato que pongan por debajo de ese número, el resultado es $120000,00, a partir de 21 hasta 200 departamentos se incrementa en $3000,00 cada uno.
Puse el código pero no se ven los resultados en vista previa, hay que subirlo a la web para verlos.
Desde ya te vuelvo a agradecer que hayas tomado un día de descanso para ayudarme.
Un fuerte abrazo a la distancia
Como dije, es algo un poco más complicado. Lo más que puedo por el momento es establecer un mínimo de 20 y un máximo de 200. Aunque si ingresan cantidades menores de 20 con el teclado numérico les aparece el precio abajo del de base. Pero, eso lo puedes aclarar en una línea de texto que lo mínimo son 20 departamentos.
En cuanto tenga un poco más de tiempo le sigo experimentando. Ahora que si hay alguien más que lea esto y lo resuelva, pues mejor que mejor.
Te envío el proyecto con el objeto html. Yo si lo puedo visualizar en vista previa.
Autor
Hola Miguel, dando vueltas me acerque bastante a lo que buscaba para el cotizador online, comienza desde 25 hasta 200, el problema es que si agrego la cantidad con el teclado, el número puede ser infinito en más o en menos y no puedo solucionar que desde 0 hasta 25 el resultado es el mismo.
Desde ya muchas gracias.
Cotizador Online
Precio: $160.000,00 +IVA
Si necesita cotización para mas de 25 U/F:
<html>
<title>Incrementar precio</title>
<body>
<p>
<label>Ingrese la cantidad de U/F:</label>
<input type="number" pattern="\d*" id="unidades" name="unidades" placeholder="0" value="0" min="25" max="200" required="required" class="Converter(this.value)" onchange="Converter(this.value)"> = $ <span id="outputPrecio"></span> + IVA</p>
<script>
function Converter(valNum){
valNum = parseFloat(valNum);
document.getElementById("outputPrecio").innerHTML=(valNum*2000)+110000;
}
</script>
</body>
</html>
Saludos: Si esto resulta como lo quieres, me tendrás que incluír en tu testamento xD.
<html>
<title>Incrementar precio</title>
<body>
<h1>Cotizador Online.</h1>
<br>
<h2>Precio: $160.000,00 + IVA</h2>
<br>
<h3>Si necesita cotización para mas de 25 U/F (Máximo 200):</h3>
<h3>
<label>Ingrese la cantidad de U/F:</label>
<input type="number" pattern="\d*" id="unidades" name="Unidades" value="25" placeholder="25" min="25" max="200" required="required" oninput="Converter(this.value)" onchange="Converter(this.value)"><b> = $ <span id="outputPrecio"> 160000.00</span> + IVA</b><br><br>
<!-- Con IVA. -->
<label>Precio con IVA del 16%:</label>
<b> = $ <span id="Precio+IVA" style="color:red;text-align:center;"> 185600.00</span></b></h3>
<!-- Fin Línea Precio con IVA. -->
<script>
function Converter(valNum){
if (valNum < 25) {valNum = "25";}
if (valNum > 200) {valNum = "err";}
valNum = parseFloat(valNum);
document.getElementById("outputPrecio").innerHTML=((valNum*2000)+110000).toFixed(2);
<!-- Con IVA. -->
document.getElementById("Precio+IVA").innerHTML=(((valNum*2000)+110000)*1.16).toFixed(2);
<!-- Fin Línea Precio con IVA. -->
}
</script>
</body>
</html>
Nota: Acá en México es norma incluir el precio junto con el IVA.
Autor
Miguel sos un grande, quedo genial, solo 2 cosas, una es que el analizador y optimizador web de Website encuentra como error el código html, (adjunto imagen de pantalla) con la versión anterior también marcaba error.
En Argentina se agrega mas IVA sin calcularlo, porque algunos productos tienen 21% (la mayoría) y otros el 10,5 %, en este producto depende quien lo compre paga 21 o 10,5% IVA ¿se puede anular? y ya que pedimos tanto si se puede dar mas separación entre lineas (adjunto imagen de pantalla).
Estoy muy agradecido por tu colaboración, un abrazo a la distancia.
Ariel
Ok, solo es quitar las etiquetas <html> y <body> así como la línea del <title> y debería de dejar de marcar error.
Quedaría así, sin las líneas del IVA.
<h1>Cotizador Online.</h1><br>
<h2>Precio: $160.000,00 + IVA</h2><br>
<h3>Si necesita cotización para mas de 25 U/F.<br>(Máximo 200):</h3><br>
<b>
<label>Ingrese la cantidad de U/F:</label>
<input type="number" pattern="\d*" id="unidades" name="Unidades" value="25" placeholder="25" min="25" max="200" required="required" oninput="Converter(this.value)" onchange="Converter(this.value)"> = $ <span id="outputPrecio"> 160000.00</span> + IVA</b>
<br><br>
<script>
function Converter(valNum){
if (valNum < 25) {valNum = "25";}
if (valNum > 200) {valNum = "err";}
valNum = parseFloat(valNum);
document.getElementById("outputPrecio").innerHTML=((valNum*2000)+110000).toFixed(2);
}
</script>
Nota: Las etiquetas <br> son saltos de línea. Si quieres más espaciado agrega más:
Ejemplo: <br><br><br> serían 3 saltos de línea en total y se visualiza como; salto de línea + 2 líneas de espacio.
Ya incrustado en un objeto html se ve así: (Solo cambia el estilo del objeto si quieres otro color específico)
Autor
Sos un genio Miguel, quedo espectacular, solo si puedes indicarme como agrando el tamaño de las fuentes en el códgo html, la web lleva Tahoma 16.
Gracias, un abrazo
Saludos:
Dentro de cada etiqueta se puede agregar un estilo.
Ej. <h1 style="color:#b300b3;text-align:center;font-family:tahoma;font-size:40px;"> ... </h1>
:)
Autor
OK, Miguel, muchisimas gracias, tienes el don de un maestro.
Abrazos a la distancia