Zen Magicの例
Zen Cartのモジュールシステムは<BODY> タグの "onload"
の結果がとても簡単にサイト全体にもしくはページベースで扱われます。
あなたの/includes/templates/YOURTEMPLATE フォルダーの中に、機能させるために
/jscript/on_loadフォルダーを作れます。
このディレクトリーのどのon_load_*.jsもjavascriptのon_load()機能でbodyタグを修正するのに使用されます。
サイト全体への操作は、on_load.js
ファイルに名前を付け /includes/templates/YOURTEMPLATE/jscript/on_loadフォルダーに置いてください。多数のファイルは与えられるかも知れませんし、ファイル名に下線の付け加えや文字数の付け加えが施される可能性があります。
page-specificの操作は、/includes/modules/pages/{pagename}/
以下にファイルを置いてください。
NOTE:on_load_*.jsファイルは未処理のコードだけがon_load=""
パラメーターの<body>
タグに挿入され含まれます。
結果はこのようになります:
<body onload="WHATEVER_YOUR_FILE_CONTAINS_GOES_HERE">
基本的に、ファイル内容はDOMに機能を呼び込むかもしくはjscriptファイルに機能を読み込むようになります。
1. はじめに個々のページの"on_load"スクリプトがあるかチェックしましょう。
"/includes/modules/pages/{PAGENAME}/
"の"on_load_*.js"と名付けられたファイルを調べます。
2. そして"includes/templates/TEMPLATE/jscript/on_load/on_load_*.js
"のサイト全体のOVERRIDEを調べます。
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();">
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. もちろん、プリロードの働きをサポートするための実際に使われるイメージファイルや他のファイルのアップロードは必ず確かめてください。