Woocommerce Question posted in
The official Woocommerce documentation can be found here.

WooCommerce JS event doesn't work using Vanilla JS but works fine with jQuery

I have the following code that triggers whenever the cart is updated.
The problem is that the jQuery version works as expected but the Vanilla JS doesn’t.

jQuery( document.body ).on('updated_cart_totals', function( event ) {
    console.log( 'in here' ); // Works.
} );

document.body.addEventListener( 'updated_cart_totals', function( event ) {
    console.log( 'in here too' ); // Doesn't work.
} );

Is there something I am missing?

Tags:

2

Answers


  1. 0

    It appears to be answered before
    https://stackoverflow.com/a/41727891/5454218

    jQuery uses its own system of event/data binding which inter-operates only one way. In WooCommerce context it’s an essential part of its system, so don’t shy away from it. No shame in using jQuery when you’re already deep in this pile of s**t.

    Login or Signup to reply.
  2. 0

    My Answer would be, Yes it’s now possible to detect by addAction() and doAction() using Vanilla JS –

    1. wp.hooks.addAction().
    2. wp.hooks.doAction()

    How to do – My Approach

    // Trigger any jQuery event
$document.trigger( 'test-trigger', [data] );

// Fire action
wp.hooks.doAction( 'test.trigger', data );

// Catch this event from anywhere in JS
wp.hooks.addAction( 'test.trigger', 'cp/test-trigger', function(data) {
    console.log('JS Response data', data);
} , 10);

    Reference Example of WordPress Core

    For reference, Let’s see a WordPress heartbeat js’s doAction() – https://github.com/WordPress/wordpress-develop/blob/trunk/src/js/_enqueues/wp/heartbeat.js#L460

    // heartbeat.js#L460
$document.trigger( 'heartbeat-tick', [response, textStatus, jqXHR] );
wp.hooks.doAction( 'heartbeat.tick', response, textStatus, jqXHR );

// Catch that heartbeat tick from anywhere in JS
wp.hooks.addAction( 'heartbeat.tick', 'cp/heartbeat-tick', function(response, textStatus, jqXHR) {
    console.log('heartbeat response', response);
} , 10, 3);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search