CS-Cart3カスタマイズ!管理画面のメニューに独自のメニューを追加したい

管理画面カスタマイズ

CS-Cartのバージョン3で管理画面のカスタマイズを試してみたのでその時のメモです。

いろいろと方法はあるのですが、今回は管理画面のスキンを作成してみました。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

検証バージョン

CS-Cart Free Edition v3.0.2-jp-1 を使用して検証しています。

カスタマイズ内容

メニューの追加前と追加後
CS-Cartの管理画面で、どうも ショップを表示ログアウト が以前から分かりにくいなと思っていて、横並びのメニューに追加したいと考えました。

本当はアドオンで実装したかったのですが、いろいろありまして別スキンとして作成しました。

スキンの作成

作成したオリジナルテンプレート

テンプレートの作成
作成したテンプレートファイルです。基本的にメニューの追加のテンプレートは basicplus/admin/top.tpl の一つのみです。
標準のスキンの basic/admin/top.tpl をコピーしてカスタマイズしました。

オリジナルのスキンを認識させるためには manifest.ini が必要になります。

manifest.iniについて

top.tplの追記部分

{* Add ショップを表示 *}
<li class="basicplus-menu">
	<a href="{$config.http_location|fn_url|escape}" target="_blank" title="{$lang.view_storefront}">{$lang.view_storefront}</a>
</li>
		
{* Add ログアウト *}
<li class="basicplus-menu">
	<a href="{$index_script|fn_url}?dispatch=auth.logout" title="{$lang.sign_out}">{$lang.sign_out}</a>
</li>

top.tplにオリジナルで追記した部分です。

オリジナルのCSSをテンプレートフックで読み込む

テンプレートフックでCSSファイルを読み込む
オリジナルのCSSファイルを読み込みたいので basicplus/admin/addons/my_changes/hooks/index/styles.post.tpl を作成して basicplus/admin/addons/my_changes/hooks/basicplus.css を読み込むようにします。

テンプレートフックについて

スキンを設置する

var/skins_repositoryに配置
CS-Cartのインストールディレクトリの var/skins_repository に作成したスキンを配置します。

スキンセレクターで選択して保存
管理画面右上のメニューの デザイン から スキンセレクター を選択します。
Basic Plus Skin が表示されているので選択して 保存 を押下します。

テンプレートフックのファイルを合わせると作成したテンプレートはたったの2つですが、スキンセレクターで選択してスキンを切り替えた時に足りないテンプレートは標準のbasicからコピーしてくれます。

スキンのダウンロード

※ご利用は自己責任でお願いします。

その他のカスタマイズ方法

本当はアドオンを有効にした際に、ショップを表示ログアウト をメニューに追加するというものを作成したかったのですが良さげなテンプレートフックのポイントを見つけられず別スキンにしてテンプレートファイルを作成してみました。
以下の他のカスタマイズ方法も考えたのですが、トップレベルのメニューにはhrefが指定されていなかったのが別スキンにした理由です。

アドオンを作成してmenu.xmlを配置する

schemas/menu/menu.xml というファイルにメニューの情報が記述されています。

これをコピーして addons/アドオンの識別子/schemas/menu/menu.xml というファイルを作成してオリジナルのアドオンを有効にした際に、メニューを変更するということも可能でした。

アドオンを作成してload_xml_menuesフックを使う

fn_set_hook(‘load_xml_menues’, $menues); というフックが存在するようですので、アドオンを作成してPHPコードによるカスタマイズも可能なようです。

/controllers/admin/init.php の fn_set_hook(‘load_xml_menues’, $menues);
一旦ここでメニューをロードしたあとループでメニューを生成しているようです

フックの件に関しては株式会社あんどぷらすの望月さんに教えて頂きました!ありがとうございます!

  

共有やブックマークなど