Display a message for users with JavaScript disabled

Last modified by Nick Rigby on Thu, June 24, 2010 17:22
Source|Old Revisions  

This is an old revision of the document!

If you’re at all familiar with Magento, you will know that as well as the backend, the frontend relies very heavily on JavaScript; to the point where it is impossible to carry out core site functions like checking out using the onepage checkout, configuring products and using the default image zoom. The way JavaScript has been integrated isn’t ideal in my opinion (JavaScript should enhance the user experience, not cripple it) but because of it’s extensive use, it’s extremely difficult to get past it.

This article explains how to use some JavaScript and CSS to display a message to users who do not have JavaScript enabled. This stops users being able to use any part of the site and not becoming frustrated when they can complete some functions on the site, but not others (like checking out).

Adding a JavaScript controlling class to your HTML

The first thing we need do is use JavaScript to add a class to the body element of the HTML. We can then use this class to target specific CSS elements that will only work when JavaScript is enabled (when JavaScript is not enabled, the class will not be added to the body element).

This is very easy to do by using the Prototype JavaScript library, which Magento uses for most of it’s JavaScript functionality. Add the following code into the miscellaneous scripts box, which can be found in admin → system → configuration → design → HTML head

<script type=”text/javascript”> document.observe(”dom:loaded”, function() { $$(’body’).first().addClassName(’js-enabled’) }); </script>

Save this and refresh your cache in admin → system → cache management

Modifying the CSS

We now need to add some rules to the CSS files, to control which elements are displayed when JavaScript is enabled/disabled. You can add this to any CSS file that is used globally throughout the site, but I recommend adding it to boxes.css found in skin/frontend/default/default/css/

div.wrapper { display: none; } .js-enabled div.wrapper { display: block; } .js-enabled div#js-alert { display: none; }

The first rule sets the main site container (div.wrapper) not to display, so the site will not display. If JavaScript is enabled however, the next rule will override this setting and the site will display as normal. The third rule controls the message that we will use to display our warning to users that have JavaScript disabled.

Adding the message for users with JavaScript disbaled

If you have followed successfully so far, when JavaScript is disabled you will be presented with a blank screen. Obviously this stops users without JavaScript using the site, but it is not very helpful to just display a blank screen. What we’ll do is display a message that tells them they must have JavaScript enabled to use the site.

Back in the admin system, go to system → configuration → design → footer

In the miscellaneous HTML section, add the following (or whatever message you want to be displayed.

<div id=”no-js”> <p>JavaScript must be enabled to use this site. Please enable JavaScript in your browser</p> </div>

Save this and refresh your cache in admin → system → cache management

Styling your error message

If you want to style your error message, just add some styles into boxes.css that you edited earlier.

div#js-alert { margin: 10px; padding: 10px; border: 1px solid #cc3; background: #ff9; font-weight: bold; color: #000; }

Hope you all find this article useful!