php - tutorial - mostrar los mensajes de woocommerce en superposición div o información sobre herramientas sin actualización de página

wordpress tutorial español pdf

Question

Estoy tratando de deshacerme de la redirección / recarga cuando el usuario agrega un producto o recibe un mensaje de información en mi tienda woocommerce. Solo quiero mostrar el mensaje "agregado al carrito" en una información sobre herramientas o en un div superpuesto y dejar que continúen comprando sin volver a abrir en la tienda.

AJAX agregar al carrito está habilitado

entonces mi pregunta es: ¿qué puedo hacer para mostrar estos mensajes sin refrescar toda la página?

EDITAR: tal vez sea útil para cualquier persona, aquí está mi CÓDIGO FINAL:

$(''.add_to_cart_button, .single_add_to_cart_button'').click(function(e) {
var produkt_id;
if ($(this).attr(''data-product_id'') == undefined) {
produkt_id = $(''input[type=hidden]'').val();
} else {
produkt_id = $(this).attr(''data-product_id'');
}
var amount;
if ($(this).hasClass(''single_add_to_cart_button'') == true) {
if ($(''.qty'').val() !== ''1'') {
amount = $(''.qty'').val();
}
console.log(amount + '' single_add_to_cart_button'');
}
else {
amount = ''1'';
console.log(amount + '' add_to_cart_button'');
}
function addToCart(produkt_id) {
$.ajax({
type: ''POST'',
url: ''?add-to-cart='' + produkt_id,
data: {''product_id'': produkt_id,
''quantity'': amount},
success: function(response, textStatus, jqXHR) {
// callback
}/*,
dataType: ''JSON''*/
});
}
e.preventDefault();
addToCart(produkt_id);
});

Answer 1

¿Te refieres a algo como esto? Si haces la función "addedToChart", hará un ajax y creará un mensaje en la parte superior de la página.

$(document).on(''click'',''.add_to_cart_button'',function(e) {
e.preventDefault();
addedToCart($(this).data(''product_id''));
});
function addedToCart(id){
$.ajax({
type: "POST",
url: "some.php",
data: { product_id: id},
success: function(){
$(''body'').prepend(''<div style="position:fixed; height:20px; width:100%; background-color:red; text-align:center;">Added to chart</div>'');
}
});
}