A store highlight

I've just rolled out some minor changes to the Dejal Store, to enhance the item selection. Having recently bought a new MacBook Pro, I admired how the Apple Store makes it easy to choose the options, and highlights the selected items. (If you're familiar with the way web browsers work, you'll know that clicking on text next to a radio button doesn't normally work; you have to click the actual button.)

Anyway, I wanted to improve the Dejal Store in a similar way, since it has sets of radio buttons to select the license levels for each product. It now looks the same as before, but when you point to a license for a product, the line is highlighted in grey, and you can now click anywhere in that highlighted space to select that license. When you do, the line is nicely highlighted with a blue background. The blue highlight works for the pop-up menus and receipt checkbox, too.

A challenge was that the page allows yellow product highlighting via a page argument - e.g. as used when clicking on a Buy Now link on the product pages. That is still supported:

This was all done via CSS for the styles, JavaScript for the click handlers, and PHP to generate the page with no code duplication. Each license line on the page is constructed via a PHP function call - every page on my site has at least a little PHP magic driving it. A JavaScript onclick handler on the license text simulates a click on the corresponding radio button, and JavaScript functions alter the class of the line based on whether it is selected, highlighted, or neither. The various highlights are done in CSS via classes, and the grey highlight is done purely in CSS via the :hover meta attribute.

The JavaScript code probably isn't all that elegant, since I'm not as familiar with that language as PHP etc, but it works. I am quite impressed with the JavaScript DOM (Document Object Model); it seems quite flexible. I've only had occasion to mess with JavaScript a few times (most recently redoing the screenshot pages, and for a Dashboard widget a while back), but I expect to do a lot more JavaScript stuff in the future, both on my site and in app contexts.

All this was created in Panic's excellent Coda application; my preferred web environment now.