Question

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");
            }

        });
}

Answer 1

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