ajax - 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，然后将其作为对 jQuery ajax 调用的响应返回，然后只需将前端上的整个迷你购物车 HTML 替换为更新的 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 将具有迷你购物车的新 HTML，因此您可以使用 jQuery 的 html() 函数替换它...

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