那須です。
最近クライアントからAjaxを使ってくださいと言われる事があります。Ajax自体は技術的要素なので、それ自体をクライアントが使って欲しいと望んでるわけではなく、Ajaxにまつわる周辺の効果等が欲しいという風に解釈をしています。
フラッツでは最近、Ruby on Rails を使った開発が多くなってきたので、Ajaxを使ったインタフェースを用意する事も自然になってきました。ですが、PHPによる実装はまだ試行錯誤の状態です。そこで、ZenCartでAjaxを簡単に実装できるような改善を試みました。
手順としては次のような感じになりますが、概略のため、ピンと来ない部分が多いかもしれません。近いうちにサンプルやソースコードをアップしたいと思います。
■用意するもの
- ajax_index.php
（index.phpをコピー） - includes/templates/template_default/common/ajax_template_vars.php
（main_template_vars.phpをコピー） - includes/templates/template_default/common/tpl_ajax_page.php
（tpl_main_page.phpをコピー） - includes/modules/ajax/
（新規作成） - includes/templates/template_default/ajax_templates/
（新規作成） - prototype.js
- お好みで scriptaculous.jsとその仲間たち
■手順：
１．ajax_index.php を修正
mbhttpoutput(‘UTF-8’);
obstart(‘mboutput_handler’);
require($template->get_template_dir('html_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/html_header.php');
や
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>
</html>
を削除
$code_page_directory = DIR_WS_MODULES . 'pages/' . $current_page_base;
を
$code_page_directory = DIR_WS_MODULES . 'ajax/' . $current_page_base;
に
require($template->get_template_dir('tpl_main_page.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_main_page.php');
を
require($template->get_template_dir('tpl_ajax_page.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_ajax_page.php');
に
require($template->get_template_dir('main_template_vars.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/main_template_vars.php');
を
require($template->get_template_dir('ajax_template_vars.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/ajax_template_vars.php');
に
２．ajaxtempatevars.php を修正
if (fileexists(DIRWSMODULES . ‘pages/’ . $currentpagebase . ‘/maintemplatevars.php’)) {
$bodycode = DIRWSMODULES . ‘pages/’ . $currentpagebase . ‘/maintemplatevars.php’;
を
if (fileexists(DIRWSMODULES . ‘ajax/’ . $currentpagebase . ‘/maintemplatevars.php’)) {
$bodycode = DIRWSMODULES . ‘ajax/’ . $currentpagebase . ‘/maintemplatevars.php’;
に変更
$bodycode = $template->gettemplatedir(‘tpl’ . pregreplace(‘/.php/’, ”,$GET[‘mainpage’]) . ‘default.php’,DIRWSTEMPLATE, $currentpagebase,’templates’). ‘/tpl’ . $GET[‘mainpage’] . ‘default.php’;
を
$bodycode = $template->gettemplatedir(‘tpl’ . pregreplace(‘/.php/’, ”,$GET[‘mainpage’]) . ‘default.php’,DIRWSTEMPLATE, $currentpagebase,’ajaxtemplates’). ‘/tpl’ . $GET[‘mainpage’] . ‘_default.php’;
に変更
３．tplajaxpage.php を修正
< ?php require($body_code); ?>
↑の一文だけ残して全て削除
ここまでで準備は完了です。次からは、具体的にAjaxを実装したい各モジュールとテンプレートでの作業になります。
４．JavaScriptの読み込み
Ajaxを利用したいページのjscriptmain.php（例えば、includes/modules/page/productinfo/jscript_main.php) でprototype.js を読み込む
５．Ajaxを動かす
Ajaxを動作させるための記述を行います。このとき作動させるサーバスクリプトを ajax_index.php としてください。
onChange=”new Ajax.Updater(‘productinfoimage’,'ajaxindex.php’,{method:’get’, parameters:’mainpage=productsimage&productsid=’.$GET[‘productsid’],onComplete:function(res){Element.hide(‘productinfospinner’);}, onLoading:function(res){Element.show(‘productinfospinner’)}});”
この例は、プルダウンを切り替えるとそれに応じた画像に切り替わると言うものです。
ZenCart特有の mainpage=hoge 式処理の切り分けを踏襲するので、この辺りの修正はZenCartでページを追加する場合の手順とほぼ一緒になるかと思います。
このとき、pages/ ではなく ajax/ を、templates/ ではなく ajaxtemplates/ が用いられることに注意してください。
■問題点
上の例からも分かるように、今はまだ Ajax.Updater()のようなよく使うメソッドですら手打ちしなくてはならず、ものすごく冗長になります。また、ZenCartはHTML埋め込み型のPHPのため、Ajaxを多用する事になると、１ファイルで HTMLとPHPにJavaScriptが絡んできて、かなり分かりづらいソースになる事が難点です。
■今後の課題
以上から早急に解決すべき課題として
- AJAXを扱うクラスか関数ライブラリをまとめる
- PHPとの親和性を高めるため、JSONの採用
を対応していく必要があります。
■おまけ
Lightbox JS v2.0をOSCommerceで使っているサイトを発見した。OSCommerceにはもしかして標準装備？
