Johnson Industries International

Imperial-to-Metric Javascript Switch

Challenge

With customers in nearly every country on the planet, but a huge majority in the USA, Johnson needed a simple way to flip between imperial and metric measurements in their equipment specifications and text descriptions.

Solution

Astuteo added the ability to label each relevant number with two swappable data values. In addition to a global switch in the website footer, we made each numerical value clickable in order to easily set one's preferences.

Imperial metric switch

When adding a specification value to the website, we incorporated the ability to wrap the value in an HTML span tag that included both data-metric and data-imperial parameters. There were a number of different ways to approach this, some more automated than others, but we went with the slightly more manual approach to give the client greater control over the units presented (grams, kilograms, etc.)

When the values were changed by click or switch, all the relevant numbers on the screen briefly flashed in a highlighted color to communicate the sitewide change. The preferred state was then stored in cookie to keep the settings persistent for visitors across future visits.

Johnson Industries International was acquired by Tetrapak® in 2017.