He estado dando vueltas con esto. He agregado un campo de cupón de aplicación a mini-cart.php y estoy tratando de hacer que se ejecute sin actualizar toda la página. Cualquier sugerencia sería una ayuda increíble.
funciones:
function apply_coupon_code(){ $coupon_code = isset( $_POST["coupon_code"] ) ? $_POST["coupon_code"] : ''; WC()->cart->apply_coupon($coupon_code); } add_action( 'wp_ajax_apply_coupon_code', 'apply_coupon_code' ); add_action( 'wp_ajax_nopriv_apply_coupon_code', 'apply_coupon_code' );Aporte:
<?php if (empty (WC()->cart->get_coupons())): ?> <span id="coupon-form"> <?php if ( wc_coupons_enabled() ) { ?> <form class="widget_shopping_cart_content" action="<?php echo $cart_url ?>" method="post"> <?php } else { ?> <form id="apply-promo-code" class="widget_shopping_cart__coupon"> <?php } ?> <label id="promo-code" for="coupon-code">Promo Code:</label> <input id="minicart-coupon" class="input-text" type="text" value="" name="coupon_code"/> <button type="submit" id="minicart-apply-button" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_attr_e( 'Apply', 'woocommerce' ); ?></button> <?php do_action( 'woocommerce_cart_coupon' ); ?> <?php do_action( 'woocommerce_cart_actions' ); ?> </form> <?php endif; ?> <?php foreach ( WC()->cart->get_coupons() as $code => $coupon ) : ?> <span id="widget-shopping-cart-remove-coupon" class="mini_cart_coupon-<?php echo esc_attr( sanitize_title( $code ) ); ?>"> Promo Code: <?php echo esc_attr( sanitize_title( $code ) ); ?> <?php $remove_url = $cart_url.'?remove_coupon='.$coupon->code; ?> <?php wc_cart_totals_coupon_html( $coupon ); ?> </span> <?php endforeach; ?>jQuery:
jQuery(document).on('click', 'button#minicart-apply-button', function() { var coupon = jQuery( 'input#minicart-coupon' ).val(); var button = ( this ); var data = { action: "apply_coupon_code", coupon_code: "coupon" }; jQuery.ajax({ type: 'POST', dataType: 'json', url: wc_add_to_cart_params.ajax_url, data: data, success: function (response) { console.log(response); }, error: function (errorThrown) { console.log(errorThrown); } }); });Puede obtener el nuevo HTML del mini carrito dentro de su devolución de llamada ajax en el servidor y luego devolverlo como respuesta a la llamada jQuery ajax y luego simplemente reemplazar todo el HTML del mini carrito en el front-end con el HTML actualizado.
function apply_coupon_code(){ $coupon_code = isset( $_POST["coupon_code"] ) ? $_POST["coupon_code"] : ''; WC()->cart->apply_coupon($coupon_code); ob_start(); woocommerce_mini_cart(); $cart_html = ob_get_clean(); return $cart_html; } add_action( 'wp_ajax_apply_coupon_code', 'apply_coupon_code' ); add_action( 'wp_ajax_nopriv_apply_coupon_code', 'apply_coupon_code' ); El búfer de salida se usa aquí, ya que woocommerce_mini_cart usa wc_get_template que solo refleja el contenido. El búfer de salida le permitirá capturar esto como una cadena.
Ahora necesita decirle a jQuery que espera HTML del servidor...
jQuery(document).on('click', 'button#minicart-apply-button', function() { var coupon = jQuery( 'input#minicart-coupon' ).val(); var button = ( this ); var data = { action: "apply_coupon_code", coupon_code: "coupon" }; jQuery.ajax({ type: 'POST', dataType: 'html', url: wc_add_to_cart_params.ajax_url, data: data, success: function (response) { console.log(response); }, error: function (errorThrown) { console.log(errorThrown); } }); }); Ahora la response tendrá el nuevo HTML para el mini-carrito, por lo que puede reemplazarlo usando la función html() de jQuery...
success: function (response) { console.log(response); jQuery('.mini-cart-wrapper').html(response); },