Woocommerce aJax 在结帐页面应用优惠券代码答案

【问题标题】：Woocommerce aJax apply coupon code in checkout pageWoocommerce aJax 在结帐页面应用优惠券代码
【发布时间】：2020-03-19 08:25:15
【问题描述】：

我通过使用 this method 编辑 review-order.php 结帐页面将 WooCommerce 优惠券输入字段移动到订单总额下方

但问题是使用 ajax 应用优惠券不起作用。所以我的目标是在应用优惠券上实现 ajax 功能。

所以我正在尝试我的 PHP ajax 动作函数

function implement_ajax_apply_coupon() {

    global $woocommerce;

    // Get the value of the coupon code
    //$code = $_REQUEST['coupon_code'];
    $code = filter_input( INPUT_POST, 'coupon_code', FILTER_DEFAULT );

    // Check coupon code to make sure is not empty
    if( empty( $code ) || !isset( $code ) ) {
        // Build our response
        $response = array(
            'result'    => 'error',
            'message'   => 'Code text field can not be empty.'
        );

        header( 'Content-Type: application/json' );
        echo json_encode( $response );

        // Always exit when doing ajax
        exit();
    }

    // Create an instance of WC_Coupon with our code
    $coupon = new WC_Coupon( $code );

    // Check coupon to make determine if its valid or not
    if( ! $coupon->id && ! isset( $coupon->id ) ) {
        // Build our response
        $response = array(
            'result'    => 'error',
            'message'   => 'Invalid code entered. Please try again.'
        );

        header( 'Content-Type: application/json' );
        echo json_encode( $response );

        // Always exit when doing ajax
        exit();

    } else {
          if ( ! empty( $code ) && ! WC()->cart->has_discount( $code ) ){
            WC()->cart->add_discount( $code ); // apply the coupon discount
            // Build our response
            $response = array(
                'result'    => 'success',
                'message'   => 'successfully added coupon code'
            );

            header( 'Content-Type: application/json' );
            echo json_encode( $response );

            // Always exit when doing ajax
            exit();
        }
    }
}

add_action('wp_ajax_ajaxapplucoupon', 'implement_ajax_apply_coupon');
add_action('wp_ajax_nopriv_ajaxapplucoupon', 'implement_ajax_apply_coupon');

我的脚本是

( function($) {
    $( document ).ready( function() {
        $( '#apply_coupon').click( function( ev ) {
            // Prevent the form from submitting
            ev.preventDefault();

            // Get the coupon code
            var code = $( '#coupon_code').val();
            var button = $( this );
            data = {
                action: 'ajaxapplucoupon',
                coupon_code: code
            };


           button.html( 'wait.');
           // Send it over to WordPress.
            $.post( wc_checkout_params.ajax_url, data, function( returned_data ) {
                if( returned_data.result == 'error' ) {
                    $( 'p.result' ).html( returned_data.message );
                } else {
                    setTimeout(function(){
                    //reload with ajax
                        $(document.body).trigger('update_checkout');
                        button.html( 'Apply');
                    }, 2000);
                    console.log( returned_data+code );
                }
            })
        }); 
    });
})(jQuery);

我的 AJax Action 函数什么也不返回请帮忙。

【问题讨论】：

标签： php ajax wordpress woocommerce

【解决方案1】：

data = {
                action: 'ajaxapplucoupon',
                coupon_code: code
            };

应该是：

var data = {
                action: 'ajaxapplucoupon',
                coupon_code: code
            };

【讨论】：

【解决方案2】：

我知道我迟到了，我们知道为什么提交不起作用。

当您分享文章链接时 - 如果我们采用相同的方式，则优惠券代码不起作用，因为您在结帐表格中使用结帐优惠券表格意味着表格中的表格，因此首先删除表格标签表格优惠券 html 并像这样使用：

<tr class="coupon_checkout">

    <td colspan="2">
    
        <?php
        if ( ! defined( 'ABSPATH' ) ) {
        exit; // Exit if accessed directly
        }

        if ( ! wc_coupons_enabled() ) {
        return;
        }

        ?>
        <a href="#" class="showcoupon"><i class="fa fa-plus"></i> REDEEM A PROMO CODE/GIFT VOUCHER</a>
        <div class="checkout_coupon" method="post" style="display:none">

            <p class="form-row form-row-first">
            <input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" id="checkout_coupon_code" value="" />
            </p>

            <p class="form-row form-row-last">
            <input id="checkout_apply_coupon" type="button" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply Coupon', 'woocommerce' ); ?>" />
            </p>
        </div>
    </td>
</tr>

然后将 jquery 添加到您的 custom.js 文件或直接在页脚页面上，如下所示：

<script>
jQuery(document).on('click','#checkout_apply_coupon', function() {
    // Get the coupon code
    var code = jQuery( '#checkout_coupon_code').val();
    var button = jQuery( this );
    alert(code);
    data = {
        action: 'ajaxapplucoupon',
        coupon_code: code
    };
    button.html( 'wait.');
    // Send it over to WordPress.
    jQuery.post( wc_checkout_params.ajax_url, data, function( returned_data ) {
        if( returned_data.result == 'error' ) {
            jQuery( 'p.result' ).html( returned_data.message );
        } else {
            setTimeout(function(){
            //reload with ajax
            jQuery(document.body).trigger('update_checkout');
                button.html( 'Apply');
            }, 2000);
            console.log( returned_data+code );
        }
    })
}); 
</script>

它在我的结帐页面中工作： https://www.loom.com/share/7dfc833895d248f191ba327cf5290403

【讨论】：