Estoy creando una página para un producto y esta tiene un personalizador como color, textura, nombre y cantidad, esta tiene la capacidad de generar el carrito en la misma web con ajax brindando la posibilidad de modificar el producto personalizado anteriormente.
El problema esta en que tiene una calculadora implementada y esta debe ir sumando en la misma web, tiene un input
de type='number'
que a medida que el usuario de click esta va sumando o restando el precio del producto.
El problema radica en que esto funciona sólo si el usuario da clicks de una forma lenta, es decir un click, dos click, tres click funciona y le calcula perfectamente, pero cuando por ejemplo quiere agregar 100 cantidades nuevas y deja el click pegado, no funciona, muere y sólo suma 1 en vez de 99 mas.
Por ejemplo si quiero sumar 5 productos nuevos, funciona, porque son pocos clicks, pero cuando el usuario deja el click pegado para sumar por ejemplo 100 cantidades, no funciona sólo suma 1 en vez de los 99 faltantes.
Intente con los eventos keyup,keydown,mouseup,mousedown y change de Jquery
Este es el código que genera el servidor al cliente
echo "
<script>
function keyup(key){
var price_ = $('#total').text();
var new_price = price_.replace('TOTAL: $','');
var setter_calculator = parseFloat(Math.round(new_price));
$.ajax({
url:'admin/ajax_actualizador.php?value_='+key+'&calculator='+setter_calculator,
method:'GET',
cache:false,
success:function(data){
var new_operation = parseFloat(Math.round(data));
$('#total').text('TOTAL: $'+new_operation);
$('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
},
error:function(data){
console.log(data);
}
});
}
</script>
";
<td>
<input style='width:5em' name='update_num' oninput='keyup($( this ).val())' type='number' data-bind='$this->num_' value='$this->num_' id='update_qty'>
</td>
Este es el código que se encarga de sumar los productos
<?php
$obj = new budget();
class budget{
protected $Price, $SUM_VALUE = 0;
protected $calculator;
public function __construct() {
if(isset($_GET["value_"]) && (!empty($_GET["value_"])) && isset($_GET["calculator"]) && (!empty($_GET["calculator"]))){
$this->__setSum__($_GET["value_"]);
$this->__setCalculator__($_GET["calculator"]);
$this->__sum__($this->__getSum__(), $this->__getCalculator__());
}
}
protected function __setSum__($value){
$this->Price = $value;
}
protected function __getSum__(){
return $this->Price;
}
protected function __setCalculator__($total){
$this->calculator = $total;
}
protected function __getCalculator__(){
return $this->calculator;
}
private function __sum__($QTY, $total_price){
if($QTY>=1 && $QTY<=4){
$this->SUM_VALUE = 5;
echo ($total_price+$this->SUM_VALUE);
}
if($QTY>=5 && $QTY<=9){
$this->SUM_VALUE = 3;
echo ($total_price+$this->SUM_VALUE);
}
if($QTY>=10 && $QTY<=49){
$this->SUM_VALUE = 2;
echo ($total_price+$this->SUM_VALUE);
}
if($QTY>=50){
$this->SUM_VALUE = 1;
echo ($total_price+$this->SUM_VALUE);
}
}
}
En resumen, lo que busco es que esto haga todas las sumas, asi el usuario deje el click pegado, ¿es esto posible?
Este es el código viejo, que funcionaba sin AJAX, pero tenía el mismo problema cuando dejaba el click presionado.
echo "
<script>
$('tr[id=$data] input[data-bind=$this->num_]').change(function(){
var qty = parseFloat(Math.round($('tr[data-bind=$data] td[id=$this->num_]').text()));
var price_ = $('#total').text();
var new_price = price_.replace('TOTAL: $','');
var setter_price = parseFloat(Math.round(new_price));
if($( this ).val() > qty){
var price = parseFloat(Math.round($( this ).val()));
if(price>=1 && price<=4){
var new_operation = parseFloat(Math.round((setter_price+5)));
$('#total').text('TOTAL: $'+new_operation);
$('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
}
if(price>=5 && price<=9){
var new_operation = parseFloat(Math.round((setter_price+3)));
$('#total').text('TOTAL: $'+new_operation);
$('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
}
if(price>=10 && price<=49){
var new_operation = parseFloat(Math.round((setter_price+2)));
$('#total').text('TOTAL: $'+new_operation);
$('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
}
if(price>=50){
var new_operation = parseFloat(Math.round((setter_price+1)));
$('#total').text('TOTAL: $'+new_operation);
$('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
}
}else{
var price = parseFloat(Math.round($( this ).val()));
if(price>=1 && price<=4){
var new_operation = parseFloat(Math.round((setter_price-5)));
$('#total').text('TOTAL: $'+new_operation);
$('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
}
if(price>=5 && price<=9){
var new_operation = parseFloat(Math.round((setter_price-3)));
$('#total').text('TOTAL: $'+new_operation);
$('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
}
if(price>=10 && price<=49){
var new_operation = parseFloat(Math.round((setter_price-2)));
$('#total').text('TOTAL: $'+new_operation);
$('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
}
if(price>=50){
var new_operation = parseFloat(Math.round((setter_price-1)));
$('#total').text('TOTAL: $'+new_operation);
$('tr[data-bind=$data] td[id=$this->num_]').text($( this ).val()+ ' ');
}
}
});
</script>
";
onblur
que se dispara al quitar el foco del input<input style='width:5em' name='update_num' onblur='keyup(this.value)' type='number' data-bind='$this->num_' value='$this->num_' id='update_qty'>
y para que realice la operación das click en otro lado de la ventana