Blog

WooCommerce is a big plugin that ships with several JavaScript loading animations. There is no reason to roll your own when you need one.

This week, I am hacking on WooCommerce to convert “Add to Cart” buttons to prevent redirecting users to different pages. Here’s a great tutorial I used to accomplish this goal. Without page loads, users benefit from loading animations in understanding that something is happening that they otherwise cannot see.

Buttons

Adding a loading class to buttons dims the button and shows a white spinning gear inside the button to the right of its label.

Usage

jQuery('button.single_add_to_cart_button').addClass('loading');
jQuery('button.single_add_to_cart_button').removeClass('loading');

Containers

WooCommerce also provides JavaScript to block and dim a whole content container because it ships with BlockUI. BlockUI is a jQuery plugin that WooCommerce uses to obscure the user interface while executing synchronous JavaScript. You can see how it’s used by WooCommerce core when removing an item from the shopping cart on the cart page.

Usage

jQuery.blockUI();
jQuery('.product').block();
jQuery('.product').unblock();

The default message is “Please Wait…” but you can provide your own text in the options array.

jQuery('.product').block({message:'Updating cart...'});

There are more examples on the plugin’s demos page.

Yesterday, I needed to create a modal, but I didn’t want to create a modal.

“Surely, this is already in WordPress.”Corey Salzano

So, I went looking for a modal in WordPress core, and I was delighted when I found one. Thickbox is JavaScript library that was created more than one decade ago and began shipping with WordPress in 2008.

Why Thickbox in WordPress is great

1. It’s a modal API built into core
2. It’s a simple white box with an optional title, close button, and no offensive styling
3. You don’t have to build it

Perhaps Also Not Great

I quickly noticed one shortcoming of the implementation. There is no way to specify the height and width of the modal using percentages. The values are required to be supplied in pixels, unless you use this JavaScript that enables the use of percentages:

Thickbox’s fate as a part of WordPress core is questionable. Here’s a six year discussion of whether it should still be included, and WordPress core also bundles jQuery UI Dialog via the ‘jquery-ui-dialog’ script handle.

Even if WordPress core drops this library in a future version, a plugin could be written to maintain compatibility. Today, I prefer thickbox because its implementation is so simple.