カラーミーショップのテンプレートカスタマイズ ループとif文

Pocket

カラーミーショップのカスタマイズ方法
簡単にネットショプを作ることができるカラーミーショップ。公式サイトでさまざまなテンプレートが公開されていますが、テンプレートのカスタマイズ方法がわかればオリジナルデザインのショップを作ることもできます。どうせ作るなら自分だけのオリジナルサイトを作ってしまいましょう。

しかしカスタマイズするには独自タグやsmartyの使い方などを知る必要があります。前回のカラーミーショップのテンプレートカスタマイズ 独自タグの使い方では独自タグの基本的な使い方を紹介しました。ここではもう一歩突っ込んでループやif文の使い方を紹介していきます。

また、カラーミーショップってなに?という方はこちらの記事で紹介しています。
カラーミーショップのテンプレートをカスタマイズする方法

カラーミーショップのループタグを使いこなす

前回の記事ではカラーミーショップで用意されている独自タグの基本的な使い方を紹介しました。ここからはループやif文などの使い方を紹介していきます。

ループタグ sectionの使い方

ループタグは公式サイトではこのように紹介されています。
カラーミーショップ独自タグ ループの使い方
特に説明がなくわかりにくいのですが、簡単に説明すると、

<{section name=num loop=$productlist}>

<{section name=変数名 loop=$繰り返し処理をする配列名}>

このようになります。変数にはインデックス番号がセットされ配列の中のインデックス番号と合致する値を取り出すことができます。変数名はnumでなく、varやiでもOK。

使い方はこんな感じになります。

<{section name=num loop=$history}>

<p class="item_name">
    <a href="<{$history[num].link_url}>"><{$history[num].name}></a>
</p>
<!-- /item-name -->

<{$history[num].price}><br />
<!-- /price -->

<{/section}>

$historyという配列の[num]番のlink_urlを取得のような意味になります。ただ、この場合$historyに格納されている全ての値を取得することになります。例えばサイドバーに商品一覧を表示する場合。このまま使うと配列にある全ての商品が取り出されるので、とんでもなく長いサイドバーになったりすのです。

そんなときは属性を指定することで解決します。section関数には以下のような属性があります。

<{section name=num loop=$history start=3 step=2 max=5}>



<p class="item_name">
    <a href="<{$history[num].link_url}>"><{$history[num].name}></a>
</p>
<!-- /item-name -->

<{$history[num].price}><br />
<!-- /price -->

<{/section}>

この場合の意味は、インデックス番号3から2ずつ増やして5回取得という意味になります。全ての属性を指定する必要はないので必要に応じて設定するようにします。

ループ中の状態を取得する方法

公式のテンプレートでも使用されている以下のようなコードがあります。

<{if $smarty.section.num.iteration % 3 == 0 and $smarty.section.num.last == false}>
    <br style="clear:both;" />
<{/if}>

if文については後で説明しますが、やっていることはif文の状態になったらclear:bothを出力するという意味になります。この、

$smarty.section.num.iteration

でループ中の状態を取得しているわけです。

使い方は以下の通り。

<{$smarty.section.num.iteration}>

<{$smarty.section.変数名.プロパティ}>

<!--
プロパティ一覧
index = 現在のインデックス番号(0スタートでstep数分増加)
index_prev = 前回のインデックス番号
index_next = 次回のインデックス番号
iteration = 現在のループ回数(1スタートで1ずつ増加)
first = 最初の要素か判定(true , false)
last = 最後の要素か判定(true , false)

loop = ループの最終インデックス値(sectionの外でも使用化)
total = ループの総回数(sectionの外でも使用化)
-->

このような関数を使うことで公式テンプレートで使用されているように、特定の回数ループしたらHTMLのコードを挿入するという使い方ができるようになります。

カラーミーショップのif文を使いこなす

では次にif文の使い方を紹介します。if文に関してはその他多くの言語で使用されているものと同じなので特に詳しく説明する必要もないかもしれませんが、一応まとめておきたいと思います。

if文の基本的な使い方

if文は条件分岐と言われているように、ある条件を満たす場合処理1を行いそうでない場合別の処理を行うという使い方をします。

実際にコードを書いてみるとこんな感じ。

<{if $history_num == 0}>
    <span>0だよ</span>
<{elseif $history_num == 1}>
    <span>1つだけあるよ</span>
<{else}>
    <span>1以上あるよ</span>
<{/if}>

このようにif文で条件を書き、elseifでさらに別の条件、elseは最終的に行う処理を記述し、最後は/ifで終わります。elseifは必要な数だけ書くことができます。

条件式の書き方は以下の通り。

<{if $history_num == 0}>

<{if 比較したい値(変数) 演算子 条件}>

<!-- 演算子の例 -->
<{if 10 == 0}> <!-- 等しい? false -->

<{if 10 == 10}> <!-- true -->

<{if 10 != 0}> <!-- 等しくない? true -->

<{if 10 > 0}> <!-- 右より大きい? true -->

<{if 10 < 0}> <!-- 右より小さい? true -->

また、条件は同時に複数指定することができます。

<{if $num != 0 &amp;&amp; $num &lt;= 5}>
<!-- $が0でなく、5以下の場合true -->

<{if $num == 0 || $num == 1}>
<!-- $が0、もしくは1の場合true -->

このときの&&はand、||はorで書くこともできます。section関数のときに出てきたこちらのコードの意味は、

<{if $smarty.section.num.iteration % 3 == 0 and $smarty.section.num.last == false}>
    <br style="clear:both;" />
<{/if}>

現在のセクションのループ回数が3で割り切れるか、ループの最後の場合はbrのコードを出力するという意味になります。

さいごに

これまでカラーミーショップのテンプレート構造独自タグの基本的な使い方を解説してきました。独自タグやsmartyをうまく使えば公式テンプレートにはない様々な機能を追加することもできます。やや機能的に物足りないと感じる方はタグを使ったテンプレートのカスタマイズに挑戦してみて下さい。

さいごまでご覧いただきありがとうございました。

p.s
現在鋭意製作中のカラーミーテンプレートでは画像スライダーのや関連商品の出力、Amazonのようなナビメニューやカルーセルなどの機能を盛り込んでいるので是非使ってみて下さいね!

ショップはこちら -> TetraThemes