JavaScript Customization

Adding or changing JavaScript

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.




Still have questions? Use the Search box in the upper right, or try the full list of FAQs. If you can't find it there, head over to the Zen Cart support forum and ask there in the appropriate subforum. In your post, please include your Zen Cart and PHP versions, and a link to your site.

Is there an error or omission on this page? Please post to General Questions on the support forum. Or, if you'd like to open a pull request, just review the guidelines and get started. You can even PR right here.
Last modified March 27, 2021 by Scott C Wilson (960e201).