Question

我正在制作一个WordPress插件，该插件添加了一个选项，可以向结帐页面添加自定义礼品券。我设法获得了礼券输入，并且“立即申请”按钮起作用，并将礼券值添加到结帐总额中，并相应地调整了总额。

问题是我的插件似乎导致“下订单”按钮不可点击。当我停用插件时，签出按钮可以正常工作，因此插件代码中有引起冲突的内容。我已经在浏览器控制台中签到，并且此页面没有显示任何错误。这是到目前为止的代码：

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery'); 
        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, '1.3.2'); 
        wp_enqueue_script('jquery');
    }
}

function giftvoucher_front_end_scripts() {
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/gift_voucher.js' , array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'giftvoucher_front_end_scripts' );

// Displaying a select field and a submit button in checkout page
function gift_voucher_value_check() {
    echo '<a class="button alt" name="gift_voucher_action_btn" id="gift_voucher_action" value="Apply" data-value="gift_voucher_data_value">Apply Now</a>';
}
add_action( 'woocommerce_checkout_after_customer_details', 'gift_voucher_value_check', 10, 0 );

// jQuery - Ajax script
function gift_voucher_redeem_script() {
    // Only checkout page
    if ( ! is_checkout() ) return;
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('#gift_voucher_action').on('click', function() {

            redeemvoucher();

            $.ajax({
                type: "post",
                url:  wc_checkout_params.ajax_url,
                data: {
                     'action' : 'gift_voucher_redeem',
                     //'gift_voucher_value' : $("#rx-redemption-points").val()
                     'gift_voucher_value' : $("#gift_voucher_redeem").val()
                },
                success: function(response) {
                    $('body').trigger('update_checkout');
                    console.log('response: '+response); // just for testing | TO BE REMOVED
                },
                error: function(error){
                    console.log('error: '+error); // just for testing | TO BE REMOVED
                }
            });
        })
    }
    </script>
    <?php
}

add_action( 'wp_footer', 'gift_voucher_redeem_script' );

// Wordpress Ajax code (set ajax data in Woocommerce session)
add_action( 'wp_ajax_gift_voucher_redeem', 'gift_voucher_redeem' );
add_action( 'wp_ajax_nopriv_gift_voucher_redeem', 'gift_voucher_redeem' );
function gift_voucher_redeem() {
    if( isset($_POST['gift_voucher_value']) ){
        WC()->session->set( 'custom_fee', esc_attr( $_POST['gift_voucher_value'] ) );
        echo true;
    }
    exit();
}
add_action( 'wp_ajax_gift_voucher_redeem', 'gift_voucher_redeem' );
add_action( 'wp_ajax_nopriv_gift_voucher_redeem', 'gift_voucher_redeem' );

// Add a custom dynamic discount based on gift_voucher_data_value
function gift_voucher_value_discount( $cart ) {
    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return;

    // Only for targeted shipping method
    if (  WC()->session->__isset( 'custom_fee' ) )
        $discount = (float) WC()->session->get( 'custom_fee' );

    if( isset($discount) && $discount > 0 )
        $cart->add_fee( __( 'Giftvoucher discount', 'woocommerce' ), -$discount );
}   
add_action( 'woocommerce_cart_calculate_fees', 'gift_voucher_value_discount', 20, 1 );


// Add the gift voucher fields to the checkout page
function customise_checkout_field($checkout)
{
    echo '<div id="customise_checkout_field"><h3>' . __('Have a Giftvoucher?') . '</h3>';
    echo '<form>';
    woocommerce_form_field('voucher_number_field', array(
        'type' => 'text',
        'class' => array(
            'my-field-class form-row-wide'
        ) ,
        'label' => __('Enter your giftvoucher number') ,
        'id' => 'gift_voucher_number',
        'placeholder' => __('19 digits, no spaces') ,
        'required' => true,
    ) , $checkout->get_value('voucher_number_field'));
    woocommerce_form_field('pin_field', array(
        'type' => 'text',
        'class' => array(
            'my-field-class form-row-wide'
        ) ,
        'id' => 'gift_voucher_pin',
        'label' => __('Enter your PIN') ,
        'placeholder' => __('4 digits') ,
        'required' => true,
    ) , $checkout->get_value('pin_field'));
    woocommerce_form_field('redeem_amount_field', array(
        'type' => 'text',
        'class' => array(
            'my-field-class form-row-wide'
        ) ,
        'label' => __('Amount to redeem $') ,
        'id' => 'gift_voucher_redeem',
        'placeholder' => __('0.00') ,
        'required' => true,
    ) , $checkout->get_value('redeem_amount_field'));
    //echo '<input type="button" value="Redeem Giftvoucher" onclick="redeemvoucher()"';
    echo '<span id="redeemed"></span>';
    echo '</form>';
    echo '</div>';
}
add_action('woocommerce_after_order_notes', 'customise_checkout_field');

有人可以通过“下订单”按钮协助我查找导致此冲突的原因吗？预先感谢。

Answer 1

事实证明，答案是“立即申请”按钮实际上在表单标签之外...可以，我可以接受...但是当我注释掉表单标签时，点击“下订单”按钮时，结帐功能非常完美。

必须感谢一位看过代码并向我指出问题的同事...谢谢詹姆斯！

WooCommerce插件开发：结帐“下订单”按钮不起作用。如何修复我的插件？

1 个答案: