UNORTHODOX WORKBOOK

BLOG TOPColor Me Shop!カラーミーショップでカスタマイズするときに覚えておきたい条件分岐【ページ編】

カラーミーショップでカスタマイズするときに覚えておきたい条件分岐【ページ編】

conditional-colorme

カラーミーショップでカスタマイズする際に、覚えておくと便利な条件分岐をまとめました。色々と組み合わせることで、ページごとにかなり細かくデザインや表示を変えることができるようになります。

基本的な条件分岐のみとなりますが、使用例や利用シーン等についても併せて記載してみました。

ページごとの条件分岐

カラーミーには、トップページ、商品一覧ページ、商品詳細ページ、商品検索結果ページ、特定商取引ページ、プライバシーポリシーページ、オプション在庫ページ、フリーページ(最高で1万ページ)の各ページが存在し、(SSLページを除き)必ずいずれかのページに属することになります。

「ページごとの条件分岐」は、特定のページをチェックするためのもので、表示されているページがどのページに属しているかを判定します。

その為、通常は「共通ページ」のHTMLにて使用されます(例えば、トップページで商品一覧の条件分岐を使用しても、そこは必ずトップページになるので意味がない)。他のページで使用してもエラーになることはないようですが、意味のある使い方はできません。

また、以前は条件式に「$file_name」を利用していましたが、現在では「$tpl_name」の利用が推奨されています。

共通ページ

<{if $tpl_name == "index"}>

使用例

<{if $tpl_name == "index"}>
 <p>ここは共通ページ</p>
<{else}>
 <p>ここは共通ページ以外</p>
<{/if}>

共通ページかどうかを判定します。カラーミーショップの場合、上記にも記載しましたが、常に以下のいずれかのページに属すことになり、単独の「共通ページ」というものは(たぶん)存在しません。

トップ・商品一覧・商品詳細・商品検索結果・特定商取引・プライバシーポリシー・オプション在庫・フリーページ(カート内や問合せ等のSSLページは除外)

そのため、この分岐の利用方法があまり思いつかなかったのですが、使用する場合はかなり限定された使い道になるかと思います。

上記の使用例でいくと、どのページにおいてもtrueが返されることはなく常にfalseとなり、トップページも含めた全てのページに「ここは共通ページ以外」が表示されるようになります。

この分岐を使用しているテンプレートも見つからず、どのような利用方法があるのか詳しく知りたいところです。

トップページ

<{if $tpl_name == "top"}>

使用例

<{if $tpl_name == "top"}>
 <p>ここはトップページ</p>
<{else}>
 <p>ここはトップページ以外</p>
<{/if}>

トップページかどうかを判定します。よくある利用方法としては、トップページにのみスライダーを設置するといった場合に利用されます。

条件分岐を使わずとも、トップページのHTMLにスライダーを設置すれば同じように表示させることは可能ですが、サイドバーとの絡みで共通ページに条件分岐で設置したほうが楽な場合があります。

商品一覧ページ

<{if $tpl_name == "product_list"}>

使用例

<{if $tpl_name == "product_list"}>
 <p>ここは商品一覧ページ</p>
<{else}>
 <p>ここは商品一覧ページ以外</p>
<{/if}>

商品一覧ページかどうかを判定します。商品一覧ページは、カテゴリーまたはグループで設定した商品の一覧が表示されるページになります。

各カテゴリーごとや、各グループごとに条件分岐したい場合は、商品一覧ページのHTMLで条件分岐を設置する必要があります。

商品詳細ページ

<{if $tpl_name == "product"}>

使用例

<{if $tpl_name == "product"}>
 <p>ここは商品詳細ページ</p>
<{else}>
 <p>ここは商品詳細ページ以外</p>
<{/if}>

商品詳細ページかどうかを判定します。よくある利用方法としては、少し高度になりますが、画像を大きく見せるため、商品詳細ページのみサイドバーを非表示にするといった際に利用されます。

商品検索結果ページ

<{if $tpl_name == "product_srh"}>

使用例

<{if $tpl_name == "product_srh"}>
 <p>ここは商品検索結果ページ</p>
<{else}>
 <p>ここは商品検索結果ページ以外</p>
<{/if}>

検索結果ページかどうかを判定します。こちらについては、検索結果ページのHTMLでこと足りるため、あまり利用するこはないかと思います。

特定商取引ページ

<{if $tpl_name == "shopkeeper"}>

使用例

<{if $tpl_name == "shopkeeper"}>
 <p>ここは特定商取引ページ</p>
<{else}>
 <p>ここは特定商取引ページ以外</p>
<{/if}>

特定商取引ページかどうかを判定します。こちらについてもあまり利用することはないかと思います。強いて言えば、商品詳細ページ同様にサイドバーを非表示にするといった感じでしょうか。

プライバシーポリシーページ

<{if $tpl_name == "privacy"}>

使用例

<{if $tpl_name == "privacy"}>
 <p>ここはプライバシーポリシーページ</p>
<{else}>
 <p>ここはプライバシーポリシーページ以外</p>
<{/if}>

プライバシーポリシーページかどうかを判定します。こちらも特定商取引ページと同様の利用が考えられます。

オプション在庫ページ

<{if $tpl_name == "option_stock"}>

使用例

<{if $tpl_name == "option_stock"}>
 <p>ここはオプション在庫ページ</p>
<{else}>
 <p>ここはオプション在庫ページ以外</p>
<{/if}>

オプション在庫ページかどうかを判定します。商品詳細ページに在庫を表示することができるようになったため、在庫ページ自体の利用が最近では減っている印象です。

フリーページ

<{if $tpl_name == "free○"}>

使用例

<{if $tpl_name == "free1"}>
 <p>ここはフリーページ1</p>
<{else}>
 <p>ここはフリーページ1以外</p>
<{/if}>

フリーページかどうかを判定します。○に判定したいフリーページのナンバーを記載する必要があります。全てのフリーページを一括で分岐できるわけではありません。

よくある使い方としては、フリーページをランディングページとしてデザインするため、共通部分を全て表示させないようにする時にこの分岐を利用します。特定のフリーページに共通(ページ)部分を表示させない方法は以下で実現できます。

例)フリーページ1の共通部分を非表示に

<{if $tpl_name == "free1"}>
 <{include file = $file_name}>
<{else}>
 //通常の共通ページのソース
<{/if}>

上記を記載することで、フリーページ1は真っ白な状態となり、フリーページ1のHTMLに入力したコードだけが反映されることとなります。

まとめ

今回はページごとの条件分岐についてまとめてみました。WordPress等のように、条件分岐タグが別途用意されているわけではないので、少し煩わしいですが、条件分岐を行うことで、様々な表現がカラーミーでも可能になります。

その他にも使える条件分岐はたくさんありますので、それについては、またいずれまとめてみたいと思います。

ABOUT

it's me

長野県北部を拠点にフリーランスとして活動しています。
Webサイトの制作をメインに、グラフィックデザインなどの制作を承っています。Twittermore

PAGE TOP