EC-CUBE初心者のためのSmartyの使い方入門

Pocket

EC-CUBEのカスタマイズをしていると避けて通れないのがSmarty。EC-CUBEではテンプレートエンジンにSmartyを使っており、クラスファイル(コントローラー)からデータを受け取って表示する際に必要になってきます。

EC-CUBEでSmartyを使うときに注意したいのは書き方が少し違うということ。こちらのようにコメントで囲むような感じになってます。

// 通常の書き方
{$foo.bar.baz}

// EC-CUBEのSmarty
<!--{$foo.bar.baz}-->

ちなみにカラーミーショップでもSmartyが使われていますが、こちらもすこし書き方が異なります。カラーミーについてはこちらでまとめています。

このページではEC-CUBEをカスタマイズする際に必要になるSmartyの書き方の基本をまとめてみたいと思います。

EC-CUBEのためのSmartyの使い方

Smartyとは?

EC-CUBEに入る前にSmartyについて簡単にまとめておきます。

SmartyはPHPをベースにしたテンプレートエンジンで、ロジックとデザイン部分を分離し、プログラマーとデザイナーが分担して作業を行う際に扱いやすい構造になっています。

Smartyのリファレンスページが日本語でまとめられているので詳しいことはそちらをチェックして下さい。

EC-CUBEでSmartyを使ってみる

EC-CUBEをインストールしたら、デフォルトテンプレートを開いてみます。data->Smarty->templates->defaultにあるのがテンプレートです。

このindex.tplを開くと以下のようなコードになっています。

<!--{strip}-->
    <div id="main_image">
        <a href="<!--{$smarty.const.P_DETAIL_URLPATH}-->1">
            <img class="hover_change_image" src="<!--{$TPL_URLPATH}-->img/banner/bnr_top_main.jpg" alt="詳細はこちら" />
        </a>
    </div>
<!--{/strip}-->

最初にも書いたようにstrip$smartyなどがSmartyになります。

Wordpressの場合はcodexが充実しているのですべての独自タグについてドキュメントが用意されてますが、残念ながらEC-CUBEの場合これらのタグについての解説ページがありません。なので基本的には自分で探すしかないです(^▽^;)

ただ、こちらのページでデフォルトで用意されているブロックやページについての解説をしているので参考にしてみてください。

タグの意味を探すにはクラスファイルを見る必要があります。このindexページの場合はルートパスなどの定数を読み込んでいるだけ。定数の設定ファイルはdata->mtb_constants_init.phpに記述されてます。管理画面のシステム管理->マスターデータ設定から変更可能。

EC-CUBEのクラスファイルからデータを取得する方法

定数や相対パスの読み込みだけなら楽なんですが、各ページやブロックで用意された値にアクセスする必要もでてきます。

そんなときはデータが必要なページのクラスファイルを見ればOK。例えば新着情報ならnews.phpとなりますね。

新着情報はブロックなので、data->class->pages->frontparts->blocからnews.phpを探します。

あとはクラスファイルの中身を見ながら必要なデータをチェックすればOK。配列にどんなデータが入っているかはvar_dump関数を使うと便利。

echo '<pre>';
var_dump($this->arrNews);
echo '</pre>';

EC-CUBE初心者のためのSmarty入門
この方法でデータをチェックして、欲しいデータを引っ張り出します。本来は複数の値があるのでループを作るのですが、1つだけ取り出す場合はこんな感じでデータを取得することができます。

// タイトルを取得
<!--{$arrNews[0].news_title}-->

// URLを取得
<!--{$arrNews[0].news_url}-->

// コメントを取得
<!--{$arrNews[0].news_comment}-->

// 日付を取得
<!--{$arrNews[0].news_cast_news_date}-->

EC-CUBEのSmartyまとめ

ここまで簡単にEC-CUBEのクラスからデータをとったり、それを表示したりしてみました。次回はSmartyテンプレートでif文やsection,for文を使ってループを作ってみたいと思います。

Smartyの使い方まとめ