Top > MyPage
 
 
XML - icon
XML

ZenCartのカスタマイズ(3)

2007年7月22日 柴田 一志

カスタマイズのサンプル

追加するテンプレート名がcustomであり、必要なファイルはデフォルトから所定の場所にコピーして編集するということにして説明する。

アカウント登録の際の国名選択は削除したい

利用者のアカウント登録の画面には、デフォルトのままだと「国名選択」が存在する。日本国内のみを対象としたサイトの場合、この項目は非常に邪魔である。

アカウント作成画面、住所

この項目を画面上から削除し、必ず国名がJapanとなるようにする方法を説明する。

この入力フォームは次のファイルを利用して出力される。

/includes/templates/custom/templates/tpl_modules_create_account.php

デフォルトでいうと

/includes/templates/template_default/templates/tpl_modules_create_account.php

である

上記ファイルの78行目前後付近の次の部分が国名選択の部分なので、次に示すその部分をコメントアウトする。


<label class="inputLabel" for="country"><?php echo ENTRY_COUNTRY; ?></label>
<?php
  $selected_country = ($_POST['country']) ? $country : SHOW_CREATE_ACCOUNT_DEFAULT_COUNTRY;
?>
<?php
   echo zen_get_country_list('country', $selected_country, 'id="country"')
    . (zen_not_null(ENTRY_COUNTRY_TEXT) ? '<span class="alert">'
    . ENTRY_COUNTRY_TEXT . '</span>': ''); ?>

そうすると、国名選択が入力項目から無くなる。

変更後、アカウント作成画面、住所

ここをコメントアウトしただけであると、フォームから入力項目が消えたため、国コードのパラメータが得られなくなる。それに対処するため、次に示す1行をかわりに挿入しておく。


<input type="hidden" name="country" value="107" />

これで、Japanに対応する国コード「107」が必ずポストされるので、問題なく動作する。

JavaScriptサンプル

利用者がアカウントを作成する時、「個人情報保護方針に同意します」にチェックを入れたときのみ、個人情報入力フォームが表示されるようにしたい。

　

  1. 先ず、ログインページのモジュールディレクトリにJavaScriptファイルを置きその中に関数checkPrivacy()を定義する。

    ファイル名はjscript_login.jsとする。

    /includes/modules/pages/login/jscript_login.js

    関数checkPrivacyでチェックボックスを調べて、入力フォームの表示、非表示を切り替える。jscript_login.jsの内容を次に示す。

    function checkPrivacy(obj) {
        if( obj.checked == true ) { //チェックされている場合
                setFieldStyle("block");
            } else {                //チェックされていない場合
                setFieldStyle("none");
            }
}

function setFieldStyle(value) {
        document.getElementById("company_field").style.display = value;
        document.getElementById("address_field").style.display = value;
        document.getElementById("phone_field").style.display = value;
        document.getElementById("birth_field").style.display = value;
        document.getElementById("login_field").style.display = value;
        document.getElementById("email_field").style.display = value;
        document.getElementById("submit_button").style.display = value;
}

    JavaScriptでは要素のスタイルは次のように設定する。

    element.style.styleAttr = styleValue;

    elementは要素のid属性を用いてdocument.getElementById(id)として求めることが出来る。

  2. 初期状態は入力フォームが非表示なので、onloadイベントでsetFieldStyle()を呼び出してそのようにする。

    オンロード用のファイルを作成する。

    /includes/modules/pages/login/on_load_login.js

    その中に次のように記述すると、初期状態は非表示となる。

    setFieldstyle('none');

  3. 関数checkPrivacy()は、「個人情報保護方針に同意します」のチェック欄がクリックされたときに呼び出されるようにすれば良いので、チェックボックスのタグに次のようなonclickイベントを追加します。

    onclick="checkPrivacy(this)"

    今回の場合変更するファイルは、次のテンプレートファイルである。

    /includes/templates/テンプレート名/templates/tpl_modules_create_account.php

    このファイルの27行目のタグに書き足して、次のようにします。

    <?php echo zen_draw_checkbox_field('privacy_conditions', '1', false, 'id="privacy", 

      onclick="checkPrivacy(this)"  ');?>

  4. 同じテンプレートファイルにfieldsetタグがあるので、先に作った関数setFieldStyle()で呼び出しているidを該当するタグにセットする。

    送信ボタンのみ、tpl_login_default.phpにあるのでこちらを修正する。このファイルの53行目に送信ボタンを含むdiv要素があるので、このタグにidを追加する。

柴田が試したところ、ログイン画面を開いたときは入力フォームがかくされていなかった。一度チェックを入れてから、チェックをはずすと隠された。

初期状態をうまく作るにはどうしたらよいのだろうか。

また、ZOXで同様にしてみたが、bodyタグにonloadイベントが入らなかった。

by 柴田 一志