JavaScript Customization
Site-Wide jscript’s
jscript*.js files -- to be "linked" by your site
Any file in the includes/templates/{template_directory}/jscript/ directory with the following filename format will be loaded globally on every page of your shop:
jscript_{unique_name}.js
(where {unique_name} can be anything you want)
Effectively, the file will be loaded as if you had inserted the following into an HTML page:
<script type="text/javascript" src="includes/templates/{template_directory}/jscript/jscript_{unique_name}.js"></script>
jscript*.php files -- to be "included" in your HTML content sent to the browser, inline.
If you need to control the content of certain PHP variables inside jscript code on the page, OR if you need to include several <script>...</script> tags, use a jscript_*.php file instead.
However, in this case, you DO need to include the <script .... > and </script> tags in the file.
Page-Specific jscript files
For page-specific operation, put the file under the /includes/modules/pages/{pagename}/ folder.
jscript*.js files -- to be "linked" by your site
Note: jscript_*.js files must not contain any <script...> .... </script> tags. They should contain ONLY the contents that are to go "between" those tags.
jscript*.php files -- to be "included" in your HTML content sent to the browser, inline.
If you need to control the content of certain PHP variables inside jscript code on the page, use a jscript_*.php file.
However, in this case, you DO need to include the <script .... > and </script> tags in the file.
On_Load Override How-To
This is a bit of another angle on the use of JavaScript in Zen Cart pages.
Zen Cart's modular system can be used to insert <body> tag "onload" event handling on a site-wide or per-page basis very easily. Within your /includes/templates/YOURTEMPLATE/ folder, you can create a /jscript/on_load/ folder for this purpose.
Any on_load_*.js file in this directory can be used to modify the body tag with a JavaScript on_load() function.
Site-Wide Use
For site-wide operation, just name the file on_load_.js (you need the trailing underscore; on_load.js does not work) and store it in the /includes/templates/YOURTEMPLATE/jscript/on_load/ folder. Multiple files may be present, and can be added by adding an underscore and more letters to the filename.
Page-Specific Use
For page-specific operation, put the file under the /includes/modules/pages/{pagename}/ folder.
File Contents
Note: on_load_*.js files must contain ONLY the raw code to be inserted in the <body> tag in the on_load="" attribute.
The effect is like this:
<body onload="WHATEVER_YOUR_FILE_CONTAINS_GOES_HERE">
Essentially, the contents of the file will be a function call to the DOM or to functions loaded in a jscript file.
OVERRIDE Operation:
1. Checks the existence of "on_load" scripts for the individual page first. Looks in
"/includes/modules/pages/{PAGENAME}/" for files named "on_load_*.js"
2. Then checks for site-wide overrides in
"includes/templates/TEMPLATE/jscript/on_load/on_load_*.js"
EXAMPLES
EXAMPLE #1 (per-page on_load coding)
Two live examples of this exist for the default "login" and "contact us" pages in Zen Cart®. Let's look at the login page:
You'll see that in /includes/modules/pages/login/on_load_main.js the code that is inserted into the <body> tag for that page is this:
document.getElementById('login-email-address').focus();
This is a DOM call to set focus on the "login-email-address" field on the page as the first spot where the cursor will be flashing when the page is opened.
When the login page is loaded, the <body> tag will read like this:
<body id="login" onload="document.getElementById('login-email-address').focus();">
EXAMPLE #2 (on_load calls on all pages in your shop)
Sometimes a designer wishes to preload rollover images on the page for menu purposes. In this case, the implementation is two-fold:
1. Create a file with JavaScript function definitions for the preload activities, and place it in:
includes/templates/{template_directory}/jscript/jscript_preloadimages.js
2. Create a file for the onload code as:
includes/templates/{template_directory}/jscript/on_load/on_load_image_preload.js
and in the file put just one function call to match the preload function definition in your js file, such as:
preloadImages();
3. Of course, be sure to upload the real image files, etc to support the preload activities.