CODEWITHSUNDEEP
javascriptjqueryajaxwordpresswoocommerce
Avishay28
Avishay28

Reputation: 2456

Script don't work in woocommerce "place order" section

I put custom button in the place order section, in the file review-order.php. I want to run a script that makes things happen when the button is clicked, but the script in that area does't work. And also the button is running twice, once when the page is load, and once after ajax finish to load. In any other part in the page, the script does work.

The code where I put the button:

<table class="shop_table woocommerce-checkout-review-order-table">
    <tfoot>
    <?php foreach ( WC()->cart->get_coupons() as $code => $coupon ) : ?>
        <tr class="cart-discount coupon-<?php echo esc_attr( sanitize_title( $code ) ); ?>">
            <th><?php wc_cart_totals_coupon_label( $coupon ); ?></th>
            <td><?php wc_cart_totals_coupon_html( $coupon ); ?></td>
        </tr>
    <?php endforeach; ?>

    <?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>

        <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>

        <?php wc_cart_totals_shipping_html(); ?>

        <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>

    <?php endif; ?>

    <?php foreach ( WC()->cart->get_fees() as $fee ) : ?>
        <tr class="fee">
            <th><?php echo esc_html( $fee->name ); ?></th>
            <td><?php wc_cart_totals_fee_html( $fee ); ?></td>
        </tr>
    <?php endforeach; ?>

    <?php if ( wc_tax_enabled() && 'excl' === WC()->cart->tax_display_cart ) : ?>
        <?php if ( 'itemized' === get_option( 'woocommerce_tax_total_display' ) ) : ?>
            <?php foreach ( WC()->cart->get_tax_totals() as $code => $tax ) : ?>
                <tr class="tax-rate tax-rate-<?php echo sanitize_title( $code ); ?>">
                    <th><?php echo esc_html( $tax->label ); ?></th>
                    <td><?php echo wp_kses_post( $tax->formatted_amount ); ?></td>
                </tr>
            <?php endforeach; ?>
        <?php else : ?>
            <tr class="tax-total">
                <th><?php echo esc_html( WC()->countries->tax_or_vat() ); ?></th>
                <td><?php wc_cart_totals_taxes_total_html(); ?></td>
            </tr>
        <?php endif; ?>
    <?php endif; ?>

    <?php do_action( 'woocommerce_review_order_before_order_total' ); ?>

    <tr class="order-total">
        <th><?php _e( 'Total', 'woocommerce' ); ?></th>
        <td><?php wc_cart_totals_order_total_html(); ?></td>
    </tr>

    <?php do_action( 'woocommerce_review_order_after_order_total' ); ?>

    <a id="test-btn">test</a>

    </tfoot>
</table>

The js file:

jQuery(document).ready(function($){

    $('#shipping_method input').change(function(){
        if($('#shipping_method_0_local_pickup5').is(':checked')){
            $('#billing_address_1_field, #billing_address_2_field, #billing_address_3_field, #billing_city_field, #billing_note_field').addClass('hide');
        }
    });
    $('#test-btn').click(function(){
        alert('test');

    });

});

I enqueue this file in functions.php:

add_action( 'wp_enqueue_scripts', 'sukot_wp_enqueue_scripts' );
function sukot_wp_enqueue_scripts(){

    if( is_checkout() ) {
        wp_enqueue_script('checkout', get_template_directory_uri() . '/checkout.js', array('jquery'), time() );
    }
}

Anyone knows what's going on?

Upvotes: 4

Views: 1131

Answers (1)

helgatheviking
helgatheviking

Reputation: 26319

As Sergeon suggested, you can use .on.

$( ".shop_table" ).on( "click", "#test-btn", function() {
  alert("clicked");
});

If that doesn't work then you may need to "bubble" up the chain a little higher than .shop_table and I would try the next closest container div.

Upvotes: 1

Related Questions