カラーミーショップのカスタマイズに便利なSmartyを学ぶ (1/2)

Smarty公式ページ

カラーミーショップでは、Smartyという「テンプレートエンジン」を使って、ショップに必要なページを出力しています。
テンプレートエンジンの機能でわかりやすい例では、カラーミーショップの「管理画面>商品登録」で項目を入力したら商品詳細ページができあがるところです。
また、無料ブログも似たような仕組みを持っていますので、テンプレートエンジンの役割はなんとなくご理解いただけるかと思います。

既存のテンプレートをそのまま利用する場合はSmartyの知識は不要ですが、テンプレートをカスタマイズしたりデータを加工して表示する場合は、Smartyの機能を使うことで実現できることが結構あります。
そこそこいじりたい方は、押さえておく知識だと思います。

Smartyを苦手にしている方向けに、全二回でSmartyの解説を書こうと思っています。
今回はSmarty概要で、次回が実践編になります。

Smartyの説明をすっきり理解しようとすると、説明に使う用語がわかる程度のプログラミング経験が必要になります(Smartyの敷居の高さはこういうところでしょうか)。
なんとなく使えるくらいでしたらサンプルをみて、書き方のパターンを覚えればなんとかできると思います。

テンプレートエンジンとは

データ部分(データベースとそれを実行するプログラム)とテンプレート部分(HTMLやSmartyの構文でページデザインするところ)に分かれていて、それらをひとまとめにして、ページとして表示する役割を担うのがテンプレートエンジン(=Smarty)という図式になります。
テンプレートエンジンの利点は、プログラマーとデザイナーの作業が分担できるところ、分けて管理できるところです。

内容はすこし難しくなりますが、Smarty マニュアルの「Chapter 1. Smarty とは? | Smarty」も併せてどうぞ。

テンプレートエンジンと切っても切れない独自タグ

独自タグはプログラミング的には変数のようなもので、これもテンプレートエンジンの機能の一部です。カラーミーショップでカスタマイズする際には独自タグの知識は必須です(Smartyの知識があればなおよいです)。

カラーミーショップではテンプレート(ひな型)をひとつ作れば、各商品の商品詳細ページができあがります。
一方、テンプレートエンジンを使用しない場合は、商品点数の分だけページを作る必要があります。仮にページのヘッダーを修正することになった場合、全ページを修正しなくてはいけなくなります(いま思うと死んじゃいそうですが、昔のホームページはこんな感じ)。

デザインが共通している部分はテンプレートで共通に出力すればよいのですが、デザインが共通していない部分はどうするのでしょうか。
カラーミーショップの商品詳細ページの場合ですと、商品名、販売価格、商品画像、説明など、商品ごとに個別に登録する項目がたくさんあります。
そういう箇所は、商品に合わせて動的に(※)に文字や数値をテンプレートに差し込む必要があります。その役割を受け持つのが「独自タグ」になります。

記述例:<{ $product.id }>
内 容:商品IDを表す独自タグ

カラーミーショップのテンプレート内でよく見かける<{ }>はデリミタといって、ここからここまではSmartyで構文解釈してね、という範囲を示す目印。
HTMLタグに似ていますがまったく別ものなので、HTMLの延長線上で理解しようとしては混乱の原因になります。このあとのSmartyの構文を注意して見て下さい。

※ 「動的に」はあまり深く考えないで

記述例:class="<{ $tpl_name }>"
内 容:商品IDを表す独自タグ

SmartyはHTMLの構文解釈よりも先に処理しますので、一見すると上のような不思議な書き方もできます。
ページごと(トップページ、商品詳細ページ、フリーページなど)にクラスをセットします。ページごとにスタイルを振るときに便利です。

テンプレート内に書くSmartyの構文が難しい

テンプレートエンジンの利点のひとつに、プログラマーとデザイナーの作業分担がありました。とはいっても、きちんと分離できているわけではありません。
いろんな場面で、テンプレート内にSmartyの構文に基づいたコードを書く必要があります。

動的にページを出力するために、例えば、配列に入った項目を表示をするために繰り返し文が必要になったり、表示・非表示の判断に条件文を書いたり、デザイン部分でもプログラミングの初歩を学んでおく必要があります(条件文、繰り返し文、関数、変数、配列といった、プログラミングを習得する際に一番最初に学ぶ知識)。

それに加えて、テンプレート内を見ると、HTMLとSmartyの構文がごちゃ混ぜに書かれているように見えます。Smartyに慣れていないと面喰うところです。

次に、カラーミーショップのテンプレート内でよく見かけるSmartyの制御構文を挙げてみます。

1. 条件文

<{if}>から<{/if}>までがひとかたまりで、条件を満たしている場合は内側のコードを出力します。
下記コードは、お知らせ欄( $info )が空か空でないかで条件分岐します。

お知らせ欄内の文字が入っていればHTMLを表示する

<!-- お知らせ -->
<{if $info != ""}>
  <div class="info">
    <h2 class="info_heading heading">インフォメーション</h2>
    <dl class="info_detail info_detail_lists">
      <{$info}>
    </dl>
  </div>
<{/if}>
<!-- // お知らせ -->

次もよくみる例で、閲覧中のページがトップページでスライド登録しているなら、スライドを表示するというコード。
具体例としては、テンプレート(共通HTML)に下記コードを書いて、トップページを開いたときはテンプレート(共通HTML)にあるヘッダーにスライドを表示して、トップページ以外の場合はスライドを表示しないという使い方ができます。
実際カスタマイズしているとよく見かけますし、Panoramaのサンプルショップでも使われています。
また、特定の商品・カテゴリー・グループなら条件分岐するという使い方がよくあります。

トップページ表示時にスライドを表示する

<{if $tpl_name == "top" && $slideshow_html}>
  <!-- スライドを表示するコード(省略) -->
<{/if}>
条件文によるスライドの表示・非表示

条件文によるスライドの表示・非表示

assignと条件文を組み合わせた使い方も参考になります。
条件判断して、class名と値をセットするという方法。

テンプレートICE内の使用例

<{if $calendar != ""}>
  <{assign var="guide_col_class" value="col-lg-4"}>
  <{assign var="guide_unit_class" value="col-lg-12"}>
<{/if}>

セットしたvalue値を呼び出します。
<div class="guide__col col col-md-12 <{$guide_col_class}>">
<div class="guide__unit col col-md-6 col-sm-12 <{$guide_col_class}>">

2. 繰り返し文(ループ文)

<{section}>から<{/section}>までがひとかたまり。「loop=$sub_category」の指定は、配列 $sub_category が空になるまで繰り返すという意味になります。
下記コードはカテゴリー(小)の登録されている数だけ、<{section}>から<{/section}>の間を繰り返し出力します。繰り返しのたびにnumをカウントアップします。
サイドメニューのカテゴリー画像が並んでいるところなどに使われています。

カテゴリー(小)に登録があれば、カテゴリー画像・リンクなどを出力する

<{if $subcategory_num != 0}>
  <!-- カテゴリー(小)一覧 -->
  <div class="grp-lst grid-row col-lg-12 col">
    <ul>
      <{section name=num loop=$sub_category}>
        <li class="grp-lst-unit col-sm-3 col-lg-2 col">
          <a href="<{$sub_category[num].link_url}>">
            <{if $sub_category[num].img_url != "" }>
              <img src="<{$sub_category[num].img_url}>" class="grp-lst-img" />
            <{/if}>
            <span class="grp-lst-name text-center">
              <{$sub_category[num].name}>
            </span>
          </a>
        </li>
      <{/section}>
    </ul>
  </div>
  <!-- //カテゴリー(小)一覧 -->
<{/if}>

HTMLタグがごちゃっとしていてわかりにくいですが、HTMLタグを削るとそれほどでもないはずです。

カテゴリー(小)に登録があれば、カテゴリー名を出力する

<{section name=num loop=$sub_category}>
  <{$sub_category[num].name}>
<{/section}>

今回のまとめ

テンプレート内に条件文や繰り返し文を書くことで、デザインを変えたり、データを表示したりすることができるようになります。
次回はより実践的な内容で、よく使うデータ加工についてご紹介します。

テンプレートのカスタマイズにおける重要度は、独自タグ>Smartyの構文です。先に学ぶべきは独自タグになります。
カラーミーショップの独自タグは下記ページの「共通」を除き、HTML編集ページで使える・使えないがあります(重要!)。
上記の文章をSmarty的に言い換えると、テンプレートからどの変数が見えるのか、ということを「変数のスコープ」と言います。

また、同じ項目でも書き方が異なる場合もあります。たとえば、商品IDは商品一覧ページと商品詳細ページでは別の独自タグを使います。

参考)独自タグ一覧(PC、スマートフォン) | ネットショップ開業マニュアル - カラーミーショップ

執筆者

えーじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
カラーミー歴10年目/カラーミーショップ公認パートナー。
好きが高じてブログを書いていますが、カラーミーの中の人ではありません。