1

Estoy creando un carrito de compras, y necesito un poquito de ayuda u orientación. Tengo un jQuery DataTable y en la parte de cantidad, agregue una función keyup para saber el total a pagar por producto solicitado. El asunto es que funciona, pero cuando agrego más de 1 producto al datatables, los valores se vuelven crazy (loco), y solo funciona la primera fila con el keyup, pero el valor del producto cambia al de la segunda fila, NO a la fila que corresponde. ¿Cómo podría hacer que el keyup funcione en todas las filas donde corresponde? Imagen con problemas al tener 2 registros en el datatables

Imagen datatables con problemas con mas de 1 registro

//
$(document).ready( function(){
    tablaProductoCarritoMujer = $('#tablaProductoCarritoMujer').DataTable({
        "language": {
                "sProcessing":     "Procesando...",
                "sLengthMenu":     "Mostrar _MENU_ registros",
                "sZeroRecords":    "No se encontraron resultados",
                "sEmptyTable":     "No existen Productos Agregados al Carrito",
                "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix":    "",
                "sSearch":         "Buscar:",
                "sUrl":            "",
                "sInfoThousands":  ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst":    "Primero ",
                    "sLast":     " Último",
                    "sNext":     " Siguiente",
                    "sPrevious": "Anterior "
                },
                "oAria": {
                    "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
        responsive: "true",
        dom: "Bfrtilp",
        "columnDefs":[{
        "targets": -1,
        "data": null,
        //Acá le colocamos los botones, editar y borrar.
        //Colocamos esto ``, para que no haya problemas con las comillas.
        "defaultContent": 
            `<div class='text-center'><div class='btn-group'>                               
                    <button type='button' class='btn btn-danger btnBorrarProductoCarrito'>ELIMINAR</button>
                </div>
             </div>`
        }],     
    });
});
//Función para Obtener el valor de los datos de la sección de imágenes.
var precioP;
//Esta es una función onclick que utilicé para obtener los valores del producto.
function carritoCompras(id_producto, nombreProducto,stockActual, precioProductoTotal,imgProducto, precioProducto, envio){

//var lg = [id_producto, nombreProducto, stockActual, precioProductoTotal, imgProducto, precioProducto, envio];
//console.log(lg[0], lg[2], lg[3]);
//Agregamos los datos nuevos al DataTables.
//contarCantidad(id_producto,stockActual, precioProducto);
    Swal.fire({
        title: "¡Producto Agregado al Carrito de Compras!",
        icon: 'success',
        showCancelButton: false,
        showConfirmButton: false,
        timer: 2000,
    });

    //En esta parte agrego una fila a mi tabla.
    tablaProductoCarritoMujer.row.add([id_producto,nombreProducto,'<img src="'+imgProducto+'" width="50">',precioProducto,'<input type="number" name="carritoProducto" id="carritoProducto" class="text-center" value="" style="width: 50%;" required="true">','<input type="number" name="precioTotal" id="precioTotal" class="text-center" style="width: 70%;" readonly="true">'])
    .draw();

    //console.log(tablaProductoCarritoMujer[0]);
    var trElement = $('#tablaProductoCarritoMujer').find('td.sorting_1');
    var resultado = "";
    for(i=0; i < trElement.length; i++){ //Recorre las filas 1 a 1
        var celdas = $(trElement[i]);//devolverá las celdas de una fila
        codigo = $(celdas[0]).text();//Me devuelve el valor del id del segundo Producto.
        //console.log(codigo);
    }
    //Funcionando, el input muestre el valor actual de los productos agregados. 
    var filas = [$('#tablaProductoCarritoMujer').find('tbody tr').length];
    if (filas > 0) {
        for(let i =0; i < filas.length; i++){
            let resultado = filas[i];
            let valorInput = parseInt(resultado);
            $('#txtProductosAdquiridos').val(valorInput);
            //$('.precioTotal').val(valorInput);
        }
    }
    //console.log(array); 
    //Borrar una fila de Productos, funcionando correctamente.
    $('.btnBorrarProductoCarrito').on('click', function(){
        //Nos dirigimos al tr de nuestra tabla.
        //this, hace referencia al atributo fila creado arriba.
        fila = $(this).closest('tr');
        //Para Borrar la fila.
        if (tablaProductoCarritoMujer.row(fila).remove(fila).draw(true)) {
            //Funcionando, el input muestre el valor actual de los productos agregados.
            var filas = [$('#tablaProductoCarritoMujer td.sorting_1').length];
            for(let i =0; i < filas.length; i++){
                var resultado = filas[i];
                var valorInput = parseInt(resultado);
                $('#txtProductosAdquiridos').val(valorInput);
            }
        }
    });
    
    //Agrego clases a cada td.
    var row = $("#tablaProductoCarritoMujer tbody td");
    $('td',row)
    //Acá le agruegé la clase.
    console.log($(row).addClass("cantidad"));
    //Agrego id a cada td. 
    var row = $("#tablaProductoCarritoMujer tbody td");
    $.each(row, function(i, td) {
      if (!$(td).attr('id')) {    
            $(td).attr('id', i+1);
        }
    });
    //Función keyup para mostrar el total por producto.
    $('#carritoProducto').keyup(function(event){
        event.preventDefault();
        //Cantidad Ingresada.
        let cantidad = $(this).val();
        console.log(cantidad);
        let total = precioProducto * cantidad;
        //$('#precioTotal').val(total), esto corresponde al input de la imagen 
       //del th TOTAL, eso debiese aparecer. 
        let precioTotal = $('#precioTotal').val(total);
    });
}

6
  • Podrías agregar un fragmento de código donde se entienda quien es carritoProducto y quien es precioTotal? Commented el 3 sept. 2020 a las 0:37
  • ok, amigo, lo hago altiro, lo que sucede, no lo hice por que es mucho código, pero agregare más código.
    – plask
    Commented el 3 sept. 2020 a las 3:28
  • Si quería ver esa parte para confirmar lo que pensaba. Tienes IDs que se repiten N veces en el DOM carritoProducto y precioTotal Commented el 3 sept. 2020 a las 3:34
  • como lo puedo solucionar amigo, que me recomienda??, llevo días pegado en eso XD
    – plask
    Commented el 3 sept. 2020 a las 3:39
  • Ricardo Campos Villarroel, muchas gracias por tu ayuda, agradecido y me funciono todo correctamente, una vez más, gracias..
    – plask
    Commented el 3 sept. 2020 a las 18:22

1 respuesta 1

3

La solución podría ser la siguiente, a los input carritoProducto (que segun entiendo es el dato cantidad de productos) agrégales una clase al momento de añadirlos a la tabla. Por el ejemplo el nombre de la clase seria cantidad_productos.

<input type="number" name="carritoProducto" id="carritoProducto" class="cantidad_productos text-center" value="" style="width: 50%;" required="true" data-precio-producto="'+precioProducto+'">

Como aspecto adicional incorpora el precio del producto ya que es un dato que vamos a utilizar mas adelante (para esto debes agregar el atributo data-"nombre de la variable", en este caso seria data-precio-producto, mayor información sobre los atributos de datos (dataset) y manipulación de dataset con jquery).

Tambien incluye una clase al input precioTotal (en este caso el nombre seria total_productos)

<input type="number" name="precioTotal" id="precioTotal" class="text-center total_productos" style="width: 70%;" readonly="true">

Dentro del $(document).ready(function(){ ... }) agrega lo siguiente:

$('#tablaProductoCarritoMujer').on('keyup','.cantidad_productos', function(){
    var precio_p = $(this).data('precio-producto') // obtenemos el valor asignado en el atributo data-precio-producto
    var cantidad = $(this).val() //obtenemos el valor propio del input
    var input_total = $(this).closest('tr').find('.total_productos'); //con closest obtenemos el padre mas cercano tipo 'tr' y buscamos dentro de el input con la clase .total_productos
    var total = precio_p * cantidad; //calculamos
    input_total.val(total); //asignamos el valor
});

Con esto configuramos el evento keyup de los input independientes si son o no preexistentes en el DOM.

2
  • Te sugiero que para el botón eliminar hagas una lógica parecida. Seria algo asi $('#tablaProductoCarritoMujer').on('click','.eliminar_productos', function(){ ... }); Commented el 3 sept. 2020 a las 18:20
  • 2
    Muy buena respuesta. Puedes mejorarla si agregas enlace a documentación sobre temas interesantes, por ejemplo: atributos de datos (dataset), será de utilidad para el autor de la pregunta y para visitantes con problemas similares. +1
    – Triby
    Commented el 4 sept. 2020 a las 4:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.