如何将Javascript变量发送到WooCommerce购物车页面总计以创建自定义折扣?

时间:2019-01-31 03:58:26

标签: javascript php ajax hook-woocommerce

我正在尝试创建自定义凭证折扣,并将其作为购物车总计中的折扣应用到WooCommerce购物车页面。定制凭证是从存储凭证的另一台服务器中获取的。我在购物车页面上添加了一个带有woocommerce_before_cart_totals钩的表单,以输入凭证编号和一个值,以花费表单按钮的onclick()。要查询凭证,我正在使用JSON回调来请求在外部凭证系统上花费凭证。我从JSONcallback请求获取响应数据。然后,我可以console.log(voucherAmountSpent);和console.log(remainingVoucherBalance); ...,这很好。我现在需要做的是获取JavaScript值voucherAmountSpent,并将其发送到WooCommerce购物车页面以创建凭证折扣,该折扣适用于购物车总计并计算以相应地调整购物车总计。

那么我该如何获取JavaScript变量voucherAmountSpent并将其作为WooCommerce自定义折扣应用?

我在这里关注添加自定义折扣示例:dynamic cart

这可以为总数添加自定义折扣,但是由于某些原因,它会禁用结帐页面上的“下订单”按钮。它应该重定向到PayPal来支付其余的费用,但是当单击按钮时什么也没发生。

如何找出导致结帐页面上的“下订单”按钮被禁用的原因?这是到目前为止的代码...

    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 giftcard_front_end_scripts() {
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/gift_card.js' , array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'giftcard_front_end_scripts' );

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

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

            redeemCard();

            $.ajax({
                type: "post",
                url:  wc_checkout_params.ajax_url,
                data: {
                     'action' : 'gift_card_redeem',
                     //'gift_card_value' : $("#rx-redemption-points").val()
                     'gift_card_value' : $("#gift_card_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_card_redeem_script' );

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

// Add a custom dynamic discount based on gift_card_data_value
function gift_card_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( __( 'Giftcard discount', 'woocommerce' ), -$discount );
}   
add_action( 'woocommerce_cart_calculate_fees', 'gift_card_value_discount', 20, 1 );


// Add the gift card fields to the checkout page
function customise_checkout_field($checkout)
{
    echo '<div id="customise_checkout_field"><h3>' . __('Have a Giftcard?') . '</h3>';
    echo '<form>';
    woocommerce_form_field('card_number_field', array(
        'type' => 'text',
        'class' => array(
            'my-field-class form-row-wide'
        ) ,
        'label' => __('Enter your giftcard number') ,
        'id' => 'gift_card_number',
        'placeholder' => __('19 digits, no spaces') ,
        'required' => true,
    ) , $checkout->get_value('card_number_field'));
    woocommerce_form_field('pin_field', array(
        'type' => 'text',
        'class' => array(
            'my-field-class form-row-wide'
        ) ,
        'id' => 'gift_card_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_card_redeem',
        'placeholder' => __('0.00') ,
        'required' => true,
    ) , $checkout->get_value('redeem_amount_field'));
    //echo '<input type="button" value="Redeem Giftcard" onclick="redeemCard()"';
    echo '<span id="redeemed"></span>';
    echo '</form>';
    echo '</div>';
}
add_action('woocommerce_after_order_notes', 'customise_checkout_field');

任何帮助,将不胜感激……谢谢。

如果有什么用,我正在使用WordPress 5.0.3和WooCommerce 3.5.4

0 个答案:

没有答案