On_Load オーバーライドの方法

Zen Magicの例

Zen Cartのモジュールシステムは<BODY> タグの "onload" の結果がとても簡単にサイト全体にもしくはページベースで扱われます。
あなたの/includes/templates/YOURTEMPLATE フォルダーの中に、機能させるために /jscript/on_loadフォルダーを作れます。

このディレクトリーのどのon_load_*.jsもjavascriptのon_load()機能でbodyタグを修正するのに使用されます。

サイト全体の利用Site-Wide Use

サイト全体への操作は、on_load.jsファイルに名前を付け /includes/templates/YOURTEMPLATE/jscript/on_loadフォルダーに置いてください。多数のファイルは与えられるかも知れませんし、ファイル名に下線の付け加えや文字数の付け加えが施される可能性があります。

Page-Specificの利用

page-specificの操作は、/includes/modules/pages/{pagename}/ 以下にファイルを置いてください。

ファイルの内容File Contents

NOTE:on_load_*.jsファイルは未処理のコードだけがon_load="" パラメーターの<body>タグに挿入され含まれます。

結果はこのようになります:
<body onload="WHATEVER_YOUR_FILE_CONTAINS_GOES_HERE">

基本的に、ファイル内容はDOMに機能を呼び込むかもしくはjscriptファイルに機能を読み込むようになります。

OVERRIDEの操作:

1. はじめに個々のページの"on_load"スクリプトがあるかチェックしましょう。
       "/includes/modules/pages/{PAGENAME}/"の"on_load_*.js"と名付けられたファイルを調べます。
2. そして"includes/templates/TEMPLATE/jscript/on_load/on_load_*.js"のサイト全体のOVERRIDEを調べます。

EXAMPLES

EXAMPLE #1 ((ページごとのon_loadコーディング)per-page on_load coding)

2つのZen Cartのデフォルトの"login" と "contact us" のページが存在する例Two live examples of this exist for the default "login" and "contact us" pages in Zen Cart.
ログインページを見てみましょう:

/includes/modules/pages/login/on_load_main.jsを見るとわかりますが、<body>タグにコードが挿入されています: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('email_address').focus();

これはDOMがページが開かれた時にカーソルが点滅する最初のスポットとしてのページの場所で"email_address"での焦点を当てるようにしています。

ログインページが読み込まれたとき、このように<body>タグが読まれています。When the login page is loaded, the <body> tag will read like this:
       <body id="login" onload="document.getElementById('email_address').focus();">

EXAMPLE #2 (on_loadはあなたのショップの全てのページ読み込まれます)

WEBデザイナはメニュー作成のためにページにロールオーバーイメージをプリロードさせたいと考えますが、この場合、方法は2要素あります:

1. プリロードの働きをさせるためにjavascript機能の定義をするファイルを作ります。そして置きます。
      includes/templates/{template_directory}/jscript/jscript_preloadimages.js

2. onloadコードのファイル以下のように作ります:
      includes/templates/{template_directory}/jscript/on_load/on_load_image_preload.js
    そしてファイルにあなたのjsファイルにプリロード機能を呼び込む定義とマッチするための機能を置きます。以下のように:
      preloadImages();

3. もちろん、プリロードの働きをサポートするための実際に使われるイメージファイルや他のファイルのアップロードは必ず確かめてください。