entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

problema al añadir un producto al carrito por medio de ajax

hola. estoy intentando hacer un botón de añadido rápido al carrito pero tengo cierto problema, el cual es que no importa en que producto haga click siempre me agrega el primer producto al carrito, estoy usando ajax y todavía soy novato en esto, así que acudo a ustedes por su ayuda les adjunto el codigo:

PHP

$registros2=mysqli_query($conexion,"select id_producto, nombre, precio, descripcion, id_categoria from productos where inicio=1 LIMIT ".$inicio."," . $TAMANO_PAGINA);

                <?php
                  while($fila2=mysqli_fetch_array($registros2)){
                    $registros3=mysqli_query($conexion,"select nombre from imagenes where id_producto='$fila2[id_producto]' and prioridad=1");
                    $fila3=mysqli_fetch_array($registros3);
                ?>

                <article class="articulo wow fadeInUp" id="article">
                    <a href="detalles_producto.php?id_categoria=<?php echo $fila2['id_categoria']; ?> & id_producto=<?php echo 
    $fila2['id_producto']; ?>"><img src="img/<?php if(mysqli_num_rows($registros3)>0) echo $fila3['nombre']; else echo "sin-imagen.jpg"; ?>"></a>
                </article>

               <div class="articulo2 wow fadeInUp" data-wow-delay=".1s" id="article">

                    <div class="contenidoArticulo">
                        <h2><?php echo utf8_encode($fila2['nombre']); ?></h2>
                        <p><?php $array=explode(" ",utf8_encode($fila2['descripcion']));
                        for($i=0;$i<count($array);$i++){
                          echo $array[$i]." ";
                          } ?></p>
                        <div class="botonDetalles">
                          <a href=""><?php echo $fila2['precio']."$"; ?></a>
                        </div>
                        <form name="formAnadirCarrito">

                            <input type="text" name="nombre_producto" value="<?php echo utf8_encode($fila2['nombre']); ?>">
                            <input type="text" name="precio_producto" value="<?php echo $fila2['precio']; ?>">
                            <input type="text" name="cantidad_producto" value="1" maxlength=2>
                            <input type="text" name="id_producto" value="<?php echo $fila2['id_producto']; ?>">
                            <button type="button" onclick="anadirAlCarrito()" class="botonCarrito">Añadir al carrito</button>
                        </form>
                    </div> 

                </div>
                <?php
                }
                cerrarconexion(); 
                ?>

JS

function anadirAlCarrito(){
    var form=document.querySelector('[name="formAnadirCarrito"]');
    var nombre_producto=form.elements.nombre_producto.value;
    var precio_producto=form.elements.precio_producto.value;
    var cantidad_producto=form.elements.cantidad_producto.value;
    var id_producto=form.elements.id_producto.value;

    $.ajax({
            type:"POST",
            url:"compra/carrito.php",
            data:{"nombre_producto":nombre_producto,"precio_producto":precio_producto,
            "cantidad_producto":cantidad_producto,"id_producto":id_producto},

            success:function(respuesta){

                    $("#contenedor_carrito").html(respuesta);
                    $("#contenedor_carrito").show("fast");
                    $("#menu").load(location.href + " #menu");
            }

        });
}

1 Respuesta

2votos

Leonardo-Tadei Puntos227320

Hola @elaprendiz,

habría que ver la salida completa que genera tu código, pero por lo que se puede ver, el problema está en que la función anadirAlCarrito() busca los elementos de un formulario por su nombre, pero en el bucle, todos los formularios tienen el mismo nombre... al repetir en NAME del formulario, JS encuentra el primero y luego no sigue buscando y por eso se te agrega siempre el primer producto.

Podés solucionar esto de 2 maneras: haciendo que los NAME del formulario sean distintos o mejor todavía, agregando al formulari oun ID que sea siempre distinto (por ejemplo, agregando al ID el id_producto del artículo).

Luego en la función, le pasás como parámetro el ID generado y así obtenés los elementos correctos:

En el PHP:

...
<form name="formAnadirCarrito" id="formAnadirCarrito<?php echo $fila2['id_producto']; ?>">
...
<button type="button" onclick="anadirAlCarrito('formAnadirCarrito<?php echo $fila2['id_producto']; ?>')" class="botonCarrito">Añadir al carrito</button>
...

y en el JavaScript:

function anadirAlCarrito(f){
    var form=document.getElementById(f);
...

Saludos cordiales

1voto

elaprendiz comentado

hola gracias por tu respuesta, ese era justamente el problema y ya esta funcionando el botón correctamente.

0voto

elaprendiz comentado

hola Leonardo lamento molestarte, pero quisiera pedir tu ayuda nuevamente, sucede que quiero que el texto de el botón del carrito cambie, ya lo he logrado pero tengo el mismo problema de antes, cuando hago click el texto de los demás botones también cambia, te dejo el codigo por si puedes echarme una mano:

function anadirAlCarrito(f){

    var form=document.getElementById(f);
    var nombre_producto=form.elements.nombre_producto.value;
    var precio_producto=form.elements.precio_producto.value;
    var cantidad_producto=form.elements.cantidad_producto.value;

    $.ajax({
                type:"POST",
                url:"compra/carrito.php",
                data:{"nombre_producto":nombre_producto,"precio_producto":precio_producto,
                "cantidad_producto":cantidad_producto},

                beforeSend:function(){

                    $(".botonCarrito").html('añadiendo...');
                },

                success:function(respuesta){

                        $("#contenedor_carrito").html(respuesta);
                        $("#contenedor_carrito").show("fast");
                        $("#menu").load(location.href + " #menu");
                        $(".botonCarrito").html('añadido');
                }

            });

}

0voto

Peter comentado

Por favor abre una pregunta nueva con tu segundo problema y así no mezclamos temas.

Saludos.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta