Hola comunidad!
Estoy tratando de implementar una funcionalidad en el carrito de mi sitio y no logro que funcione al 100%.
Consiste en que si el usuario marca (o no) unos radio buttons, se agregue unos productos al carrito luego de hacer click en el botón de checkout. Son dos radio buttons con dos productos distintos. El problema es que a veces agrega solo uno, a veces ninguno y a veces los dos pero no es consistente en su funcionamiento.
La función que estoy utilizando para agregar el producto al carrito es esta:
function agregarProductoAlCarrito(variant_id){
let data = {
'items':[{
'id': variant_id,
'quantity': 1
}]
};
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
}
Para eliminar el producto (en caso de que ya esté en el carrito):
function eliminarProductoDelCarrito(variant_id){
let data = {
'items':[{
'id': variant_id,
'quantity': 0
}]
};
fetch('/cart/change.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
}
Luego, en el onclick del botón de checkout hago lo siguiente:
$(".custom-btn-checkout").click( function(e){
e.preventDefault();
if(radio1Si.checked){
agregarProductoAlCarrito({{ variant1_id }});
}
if(radio1No.checked){
eliminarProductoDelCarrito({{ variant1_id }});
}
if(radio2Si.checked){
agregarProductoAlCarrito({{variant2_id }});
}
if(radio2No.checked){
eliminarProductoDelCarrito({{ variant2_id }});
}
$(this).submit();
}
});
Alguien podría darme una idea de que puede estar pasando? Quizás sea algo referido al tiempo de la ejecución de las funciones de agregar y eliminar. Probé agregandoles setTimeout pero no termina de funcionar al 100%.
Agradecería mucho si alguien puede brindarme alguna ayuda.
Muchas gracias!
