CS-CARTのデザインとアドオン

らら
らら

はじめに

CS-CARTで、デザインを変更するには、既存のテンプレートからCSSのみ変更することが一番よいです。

これは、CS-CARTではデザインをブロックでテンプレートを構成できることと、同梱されているプラグインに関係します。その他のパッケージソフトも同様のものは、多いと思います。

すべてを、HTMLから作成することも可能ですが、CS-CART全体を把握していないと難しいですし、既存のclass名、ID名などを変更するだけでjavaスプリクトが動作しない。管理画面のレイアウトが動作しない、プラグインを有効にしても動かないなど大変です。テンプレートもresponsiveであれば900近くのテンプレートを変更する必要があります。

これを、hookポイント、ID,Class名など消さずに、変更しないといけません。

CS-CARTデザイン方法

CS-CART管理画面のメニューから、デザイン→レイアウトを選択。まずここでレイアウトを作成します。ここのブロックごとのプロパティでユーザー定義CSSクラスがあるのでここに、自分がスタイルをあてたいクラス名を定義します。

CS-CART管理画面レイアウト

CSSの追加は、デザイン→テーマ→テーマエディターでカスタマイズのカスタムCSSでスタイルを追加します。

CS-CART管理画面テンプレート

ここでは、カスタムCSS以外にベースカラー、背景、ロゴ、フォントなどエンドユーザーで変更可能な設定があるので、CSSと、この設定にて調整をしていきます。

逆にいえば、HTMLを知らなくてもレイアウトの変更が可能です。ただ、デザインを大幅に変更をしたい場合などは、CSSの知識が必要になります。

レイアウトでは、Smartyが使用できます。eccube2、WordPressなど使用していた人ではおなじみですが、下記のようにログインしているかどうか、判定ができます。


{if $auth.user_id}
	<p><span>ログインしています。</span></p>
{/if}

上記ので作業を行っていく中で、どうしてもテンプレートを変更しないといけないことが発生してきます。ECCUBEでも同様ですが。直接既存のテンプレートを変更することは可能ですが、システムのバージョンアップした場合、変更したものがなくなってしまう可能性があります。

これを回避するのに、ECCUBE3同様、プラグインにて、デザインを上書きできる機能があります。ECCUBE4では、プラグインでなくapp/Customizeフォルダーですよね。

実際には、バージョンだけでは、上書きされません。テンプレートの再設定を行うことで、上書きされます。

CS-CARTプラグイン作成方法

筆者が作成した、googleタグマネージャープラグインを元に対応方法を紹介します。

プラグインといっても今回は、テンプレートをフックするだけのプラグインです。とっても簡単です。たぶん。

例はresponsiveを前提としています。

プラグインディレクトリー構成


google_tag_manager                              < Folder >
├ app                                          < Folder >
│ └ addons                                    < Folder >
│    └ google_tag_manager                     < Folder >
│       └ addon.xml
└ var                                          < Folder >
   ├ langs                                     < Folder >
   │ ├ en                                     < Folder >
   │ │ └ addons                              < Folder >
   │ │    └ google_tag_manager.po
   │ └ ja                                     < Folder >
   │    └ addons                              < Folder >
   │       └ google_tag_manager.po
   └ themes_repository                         < Folder >
      └ responsive                             < Folder >
         └ templates                           < Folder >
            └ addons                           < Folder >
               └ google_tag_manager            < Folder >
                  └ hooks                      < Folder >
                     └ index                   < Folder >
                        ├ body.pre.tpl
                        └ head_scripts.pre.tpl

6行のaddon.xmlの内容


<?xml version="1.0"?>
<addon scheme="3.0">
    <id>google_tag_manager</id>
    <version>1.0</version>
    <priority>2555</priority>
    <position>0</position>
    <status>active</status>
    <supplier>作成者の名前</supplier>
    <supplier_link>https://作成者のURL</supplier_link>
    <default_language>ja</default_language><authors>
        <author>
            <name>作成者の名前、会社名</name>
            <email>作成者のメールアドレス</email>
            <url>https://作成者のURL</url>
        </author>
    </authors>
    <settings edition_type="ROOT,ULT:VENDOR">
        <sections>
            <section id="general">
                <items>
                    <item id="google_container_id">
                        <type>input</type>
                    </item>
                </items>
            </section>
        </sections>
    </settings>
</addon>

idは言語ファイル名、addons配下のディレクトリ名は、ここで定義したものと同じにします。

ここで定義したID.po

priorityは、非常に重要です。ここの数値によって、hookなどの優先順位が決まります。もし変更しても変更されない場合、自分のテンプレートではなく。

他のプラグインのテンプレートが優先されている可能性があります。プログラミング上のhookも同様です。多くは、日本語プラグイン(localization_jp)とぶつかることが多いです。

日本語プラグインの数値は9999です。hookとoverridesでは、priorityの意味合いが違う感じがしますが、深くを調べてません。

settings句は、プラグイン設定の定義です。今回は、タグマネージャーのIDを入力できるようにしています。ここで定義するだけで、設定データの保存など、自動でやってくれます。Movable Typeとかと同じですね。

11行目英語用google_tag_manager.po　UTF8で作成


msgid ""
msgstr "Project-Id-Version: tygh\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Language-Team: English\n"
"Language: en_US"
msgctxt "Addons::name::google_tag_manager"
msgid "Google Tag Manager"
msgstr "Google Tag Manager"
msgctxt "Addons::description::google_tag_manager"
msgid "Google Tag Manager plugin"
msgstr "Google Tag Manager pluging"
msgctxt "SettingsOptions::google_tag_manager::google_container_id"
msgid "Container ID"
msgstr "Container ID"

google_tag_managerの部分はaddon.xmlで定義したIDと同じものです。

14行目日本語用google_tag_manager.po　UTF8で作成


msgid ""
msgstr "Project-Id-Version: tygh\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Language-Team: English\n"
"Language: ja_JP"
msgctxt "Addons::name::google_tag_manager"
msgid "Google Tag Manager"
msgstr "Google Tag Manager"
msgctxt "Addons::description::google_tag_manager"
msgid "Google Tag Manager plugin"
msgstr "グーグルタグマネージャー管理 グーグルタグマネージャーの管理を行います"
msgctxt "SettingsOptions::google_tag_manager::google_container_id"
msgid "Container ID"
msgstr "Container ID"

google_tag_managerの部分はaddon.xmlで定義したIDと同じものです。

Addons::name::はアドオン名

Addons::descriptionはアドオン名の説明文になります。

CS-CARTでは、英語を基準に、各言語割り当てされているので、英語を必ず作成してmsgidを合わせます。

22行目body.pre.tplの内容


<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={$addons.google_tag_manager.google_container_id}"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

{$addons.google_tag_manager.google_container_id}はaddon.xmlで定義した、設定の変数です。

23行目head_scripts.pre.tplの内容


<!-- Google Tag Manager -->
<script data-no-defer>{literal}(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
}){/literal}(window,document,'script','dataLayer','{$addons.google_tag_manager.google_container_id}');</script>
<!-- End Google Tag Manager -->

ここで、scriptタグのdata-no-deferと{literal}{/literal}が一般のタグを異なることに、注意してください。

CS-CARTはjavascriptのタグを追加すると、強制的に、HTMLの下に移動されます。それを避けるために、data-no-deferをつけることで回避できます。

{literal}{/literal}は、Smartyの機能で、Smartyで置き換えしないようにしたい部分を指定します。

CS-CARTテンプレートについて

CS-CARTでは、テンプレートフォルダーは２つ存在します。

１つ目は、初期用のフォルダーです。

\var\themes_repository\responsive\templates\

これはプラグインインストール時ここから、有効用のフォルダーへコピーします。

２つ目は、プラグイン有効にした時のフォルダーです。

\design\themes\responsive\templates

こちらが、動作中に実際に使用されます。

インストール後の修正は、上記２か所を修正する必要があります。

もしくは、初期用のフォルダーにいれて、プラグインアンインストール・インストールを繰り返すか、ただ、その他のプラグインでは、アンインストール時、追加したデータベースを削除してしまうものもありますので、２か所修正して、キャッシュクリアをするのがよいと思います。

テンプレートキャッシュクリアについて

CS-CART管理画面の

一般設定→ストレージ→キャッシュのクリア

CS-CART管理画面キャッシュクリア

上記でクリアされない場合があります。

その場合、FTPで直接下記の３つのフォルダーごと削除します。

CS-CARTでFTPキャッシュクリア

テンプレートのhookについて

テンプレートのhookは、既存のテンプレートのhookが記載されている部分に、タグを追加することができます。

例えば消費税の8% 10%など記載したい場合に、使用できます。

まずは、フックしたい、テンプレートを探します。

HTML表示されているときに、ソースを見て、かぶりそうもない、クラス名、ID名を見つけてgrepします。

今回の場合、ベーステンプレートなので、下記のようになります。

\var\themes_repository\responsive\templates\index.tplの中に

index.tpl {hook name="index:head_scripts"}{/hook}

index.tpl {hook name="index:body"}{/hook}

今回は、下記の配下にhooksというフォルダーを作成して、hook name="index:head_scripts"のindexの部分のフォルダーを作成します。

/var/themes_repository/responsive/templates/addons/google_tag_manager

↓

/var/themes_repository/responsive/templates/addons/google_tag_manager/hooks/index

この中に

[hook name].[pre|post|override].tplのルールに基づいて

[hook name]はhook name="index:head_scripts"の場合、head_scripts

head_scripts.pre.tplファイルを新規作成します。UTF8で作成します。

ここのpreは前に、postは後になります。

下記の感じになります。

前に{hook name="index:head_scripts"}{/hook}後に

overrideを使用してしまうと、プラグインなどで追加されるものが追加されなくなったりしますので、きちんと把握して使用しましょう！

注意：index:bodyのフックは、cscart_v4.3.7 から追加されています。

それ以前のバージョンは、index.tplご自身で追加する必要があります。

テンプレートを自体をoverrides（上書きする）について

hook同様に

/var/themes_repository/responsive/templates/addons/google_tag_manager

↓

/var/themes_repository/responsive/templates/addons/google_tag_manager/overrides/

overridesディレクトリを追加します。

追加後、下記のフォルダーから上書きしたい、ファイルを探します。

/var/themes_repository/responsive/templates

下記だった場合

/var/themes_repository/responsive/templates/views/profiles/components/profiles_account.tpl

下記のフォルダーを作成して、上記のprofiles_account.tplを作成したフォルダーへコピーします。

/var/themes_repository/responsive/templates/addons/google_tag_manager/overrides/views/profiles/components/

上記のフォルダーにコピーしたprofiles_account.tplを、変更します。

これでベースのテンプレートはそのままで、コピーしたほうを変更することで、ベースが上書きされても問題ありません。

この時、addon.xmlのpriority優先順位が関連しますので、priority変更しながら、調整します。

注意として、この方法は、日本語プラグイン(localization_jp)も使用しており、コピー元がlocalization_jpのoverridesディレクトリにある可能性があります。

その場合、overridesできないですし、テンプレートが日本語化されていない場合がありますので、アドオンのテンプレートも確認することが必要です。

変更後は、必ず、テンプレートキャッシュクリアを行いましょう！

上記のように、テンプレート自体を上書きするものを追加していくことで、ベースのテンプレートがバージョンアップなどで上書きされた場合、変更したものがなくなることはありません。バージョンアップ後、カスタマイズしたものと、新しくなったものを比較して、カスタマイズしたものにも新しい修正を追加できます。

さいごに

今回は、筆者がもっているテンプレートフックのみの良いサンプルがタグマネージャーしかなかったのでこちらをベースに、カスタマイズしましたが、このままだと、プラグイン名など、紛らわしくなりますので、変更してくださいね。

こちらベースに、もし次回があれば、プログラミングのカスタマイズ方法を紹介します。

関連記事