Este es mi archivo PHP, que me permite agregar productos a la cesta:
<?php
if (isset($_POST) OR isset($_POST['addCart'])) {
$attributes = (
isset($_POST['qtyupdate']) && is_array($_POST['qtyupdate'])
) ? $_POST['qtyupdate'] : array();
$itemId = isset($_POST['itemId']) ? $_POST['itemId'] : "";
$item_color = isset($_POST['color']) ? $_POST['color'] : "Normal";
$item_size = isset($_POST['size']) ? $_POST['size'] : "Normal";
$qty = isset($_POST['qty']) ? intval($_POST['qty']) : 1;
if (
$_SERVER['REQUEST_METHOD'] == 'POST' and
isset($_POST['qtyupdate'])
) {
foreach ($attributes as $id_article => $variations) {
foreach($variations as $color => $sizes) {
foreach($sizes as $size => $quantity) {
if ($quantity <= 0) {
echo json_encode([
'status' => FALSE,
'message' => "<strong>Error no hemos podido actualizar su producto.</strong>"
]);
exit;
} else {
$_SESSION['cart'][$id_article][$color][$size] = intval($quantity);
echo json_encode([
'status'=> TRUE,
'message'=>"<strong>Se ha actualizado su producto.</strong>"
]);
exit;
}
}
}
}
}
if (is_numeric($itemId)) {
$_SESSION['cart'][$itemId][$item_color][$item_size] = $qty;
echo json_encode([
'status' => TRUE,
'message' => "<strong>El producto ha sido añadido a su carrito.</strong>"
]);
exit;
}
}
Este es mi código ajax
, funciona bien cuando el botón añadir esta en una pagina individual y si es el único botón que existe:
$(function() {
$(document).on('click', '.close', function(e){
e.preventDefault();
$('.alert-success').hide();
$('.alert-danger').hide();
});
var frm = $('#frmCart');
frm.submit(function(e){
e.preventDefault();
var formData = frm.serialize();
formData += '&' + $('#addCart').attr('name') +
'=' + $('#addCart').attr('value');
var url = "addItem_cart.ini.php";
$.ajax({
type: frm.attr('method'),
url: url,
data: formData,
})
.done(function(data) {
console.log(data);
let res = JSON.parse(data);
if(res.status){
$("#wrapp-basket").load(" #wrapp-basket").fadeIn();
$("#qty").load(" #qty").fadeIn();
$('.alert-success').fadeIn();
$('.alert-success').html(res.message).delay(2000).fadeOut(2000);
$(".alert-success").append(
"<button class='close' type='button'><span aria-hidden='true'>x</span></button>"
);
} else {
$('.alert-danger').fadeIn();
$('.alert-danger').html(res.message).delay(2000).fadeOut(2000);
$(".alert-danger").append(
"<button class='close' type='button'><span aria-hidden='true'>x</span></button>"
);
}
})
.fail(function( jqXHR, textStatus ) {
alert("Ajax Request fail");
//$('.warning').fadeIn();
//$('.warning').html(textStatus).delay(3000).fadeOut(3000);
//console.log(jqXHR.responseText);
//console.log("Request failed: " + textStatus );
})
});
});
El problema es cuando tengo varios botones de añadir productos en este caso desde un paginador, el botón no funciona o más bien el ajax
deja de funcionar:
Así es el HTML
de los botones cuando están en la paginación:
<form><div class="shipping">
<label></label>
<em>$13,00</em>
<input type="hidden" name="itemId" value="2">
<input type="submit" id="addCart" class="addCart buy"
name="addCart" value="Añadir a la cesta" formnovalidate="">
</div></form>
<form><div class="shipping">
<label></label>
<em>$8,00</em>
<input type="hidden" name="itemId" value="2">
<input type="submit" id="addCart" class="addCart buy"
name="addCart" value="Añadir a la cesta" formnovalidate="">
</div></form>
<form><div class="shipping">
<label></label>
<em>$10,00</em>
<input type="hidden" name="itemId" value="2">
<input type="submit" id="addCart" class="addCart buy"
name="addCart" value="Añadir a la cesta" formnovalidate="">
</div></form>
El botón de añadir esta dentro de un form
es porque envió otros datos adicionales de otros campos input, select, radio
Como le puede decir a ajax
o jquery
que datos debe tomar y que funcione al presionar el botón añadir teniendo en cuenta que todos tiene el mismo nombre: id="addCart" class="addCart buy"
ya que se encuentra listado en una paginación.
id
duplicados así limpiamos eso primero y el resto sale mas simpleHTML
es sencillo de eliminar, solo basta con cambiar en el ciclo, de esto<input type="submit" id="addCart" class="addCart buy"
puede quedar así sin problemas<input type="submit" class="addCart buy"
ya descartando problemas con PHP, el problema va en el ajax, creo que toca pasarle algo así como un$(this).parent().attr('id');
para queajax
pueda saber que form enviarwhile($stmt->fetch()){ echo '<form><div class="shipping"> <label></label> <em>$'.$price.'</em> <input type="hidden" name="itemId" value="'.$id_product.'"> <input type="submit" id="addCart" class="addCart buy" name="addCart" value="Añadir a la cesta" formnovalidate=""> </div></form>';