Woocommerce 迷你购物车 ajax 申请优惠券

Question

我一直在兜圈子我已经向 mini-cart.php 添加了一个申请优惠券字段，并试图在不刷新整个页面的情况下将其添加到运行。任何建议都会有很大的帮助。

函数：

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' );

输入：

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

Answer 1

您可以在服务器上的 ajax 回调中获取新的迷你购物车 HTML，然后 return 作为对 jQuery ajax 调用然后简单地用更新的 HTML.

替换 front-end 上的整个迷你购物车 HTML

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' );

这里使用了output buffer，因为woocommerce_mini_cart使用了wc_get_template，它只是呼应了内容。输出缓冲区将允许您将其捕获为字符串。

现在您需要告诉 jQuery 您正在等待 HTML 从服务器返回...

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

现在 response 将为 mini-cart 提供新的 HTML，因此您可以使用 jQuery 的 html() 函数替换它...

success: function (response) {
    console.log(response);
    jQuery('.mini-cart-wrapper').html(response);
},

Woocommerce 迷你购物车 ajax 申请优惠券

Woocommerce mini-cart ajax apply coupon

ajax

wordpress

woocommerce

woocommerce-theming

minicart