Sorry! Internet Explorer is not supported on this site. Please view on Chrome, Firefox, or Edge.

Having fun at Zao is one of our values. We’ve put limited animated flourishes throughout our site to communicate our love of levity. We also recognize that onscreen movement is not fun or possible for everyone. We've turned off all our animations for you per your browser's request to limit motion. That said, we don't want you to miss out on the party.

Here's a funny joke to enjoy!

What do you get when you cross a dyslexic, an insomniac, and an agnostic?

Someone who lays awake at night wondering if there is a dog.

Using Custom jQuery events in WP eCommerce

Custom events in jQuery are super simple, and really neat to use.  Unless and until a javascript framework like this ends up in core, they are probably the best way to allow for a nice degree of extensibility in your javascript for other developers.

For the 3.8.11 release of WP eCommerce, we did a massive overhaul of our JavaScript.  To give an idea of the scope, we ended up removing 20,000 lines of code.  That’s right, bold and italicized – it was that awesome.

One of the elements we added were a few custom events.  For example, we had a particularly nasty action hook in our add_to_cart() function.  It essentially encouraged developers to hook in and echo out some eval()’d javascript, so that when something was added to the cart, they could override our default javascript mechanism that does, well, stuff.

Not only is this equally insecure and lame – it’s actually a fantastic use case for a custom event.  Rather than insecurely eval()ing javascript here like we were before*, we have a sexy new custom event for plugins to use.  Here’s a really basic overview of how you might use it.  As a plugin author or theme author, you’d likely put the following code in a javascript file, properly enqueued and such.  For my example, I’m just outputting it to wp_head.  For an exercise in futility, check out our veritably imperfect attempt at backwards compatibility.

// This is the code that actually hooks into the custom event.
function zao_update_cart_item_count() {
    ?>
    <script>// <![CDATA[
    jQuery( document ).on( 'wpsc_fancy_notification', function( response ){
        jQuery('#cart-top a span.cartcount').html( response.response.item_count );
    });
    // ]]></script>
    <?php
}

add_action( 'wp_head', 'zao_update_cart_item_count' );

// This adds custom data to the response object, accessible in the custom JS event.
function zao_add_json( $response ) {
    $response['item_count'] = sprintf( _n( '%d item', '%d items', wpsc_cart_item_count(), 'wpsc' ), wpsc_cart_item_count() );
    return $response;
}

add_filter( 'wpsc_add_to_cart_json_response', 'zao_add_json' );

And voila, lovely custom JS events for everyone.  A fantastic and incredibly useful development concept.

Join the Conversation

2 Comments

  1. I’m using WPEC v3.8.12 and trying to run your example above. The jQuery hook works and I’m able to grab the response, but I’m having trouble adding to it.

    I search the WPEC codebase for “wpsc_add_to_cart_json_response” and get no results, which may or may not matter (I’m a mid-level WP dev). As a starting point I have exactly what you have above in my theme’s functions.php but there is no “item_count” added to the response. Any ideas on what the issue could be?

  2. Hi Phil!

    You should see that on Line 174 of /wpsc-components/theme-engine-v1/helpers/ajax.php. I have very similar code to this currently running on a few client sites.

    Hope this helps!

Leave a comment

Your email address will not be published. Required fields are marked *