That Software Guy! eCommerce Starts Here!

Checking to Ensure Javascript is enabled in Zen Cart

Donate: This is free software. Show your appreciation by supporting my efforts. Donate

Relevance: Zen Cart™ 1.3.0.* and forward
Cost: Free, but donation appreciated

After adding validations like the ones described in some of my other Zen Cart articles, you'll want to ensure that the user is running with Javascript enabled. Always bear in mind that client-side validations are not bullet proof. This check just helps the user interact with your site the way you intended; it does not prevent you from someone turning off javascript and skipping all your validations. Validations which are business critical must be checked on the server side.

Create your custom template if you haven't already done so.

Create a new file called
includes/languages/english/extra_definitions/my_defines.php 

In this file, add the line
<?php
define('NO_JS_MSG', 'Please, turn javascript on in your browser');
?>

Create a customized copy of
includes/templates/custom/common/tpl_header.php 
(from includes/templates/template_default/common/tpl_header.php).

Just before the "headerWrapper," insert the code
<noscript>
<center>
<blink class="important"><font color="#FF0000" size="3">
<?php echo NO_JS_MSG; ?>
</font></blink>
</center>
</noscript>
Of course you can put the display related html in your css file if you would prefer. Just make it unbearably hideous to ensure compliance. :)

Suppose you only want to do this on secure pages, so it shows up at checkout time (I'm assuming you have ENABLE_SSL set to true in your configure.php file). Just check the variable $request_type prior to the noscript logic:
<?php
if ($request_type == 'SSL') {
?>

<noscript>
<center>
<blink class="important"><font color="#FF0000" size="3">
<?php echo NO_JS_MSG; ?>
</font></blink>
</center>
</noscript>

<?php
}
?>
Similarly, you could do a check on just one page, by checking the variable $current_page_base:
<?php
if ($current_page_base == "checkout_confirmation") {
?>

<noscript>
<center>
<blink class="important"><font color="#FF0000" size="3">
<?php echo NO_JS_MSG; ?>
</font></blink>
</center>
</noscript>

<?php
}
?>


Test this by turning off Javascript in your browser, and reloading a page. In FireFox, you can do this by selecting Edit->Preferences->Content and unchecking "Enable Javascript."
This tip was developed in July, 2006.