検証バージョン

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ファイルを読み込みたいので basicplus/admin/addons/my_changes/hooks/index/styles.post.tpl を作成して basicplus/admin/addons/my_changes/hooks/basicplus.css を読み込むようにします。

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

スキンを設置する

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コードによるカスタマイズも可能なようです。

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