カラーミー　条件分岐でページごとにメインビジュアルを変更する

ネットショップのレイアウトでは、メインビジュアルのデザインをカテゴリーごとや各ページごとに変えたい場合があると思いますので、今回はメインビジュアルのイメージ画像を条件分岐でページごとに変更するカスタマイズ方法をまとめてみました。

通常、管理画面の「商品一覧」を編集すると、カテゴリーの全てのページに反映され、それぞれのカテゴリーで異なるデザインにはなりませんので、条件分岐でそれぞれに反映されるようにカスタマイズしなければいけません。

カラーミーショップには、様々な独自タグがあり、それらを使用して条件文を書きます。

独自タグは公式ページの「独自タグ一覧(PC、スマートフォン)」にまとめられています。

 独自タグ「$tpl_name」には、閲覧中ページの種類が変数として格納されています。

例えば、トップページを閲覧中の場合は、$tpl_nameの中身にはページの種類「top」が入っています。

これを利用して条件分岐させます。

HTML、CSSのデザインカスタマイズは、管理画面のデザイン→テンプレート編集から行います。

全ページにわたるようなカスタマイズの場合は、共通のHTMLに下記コードを記入します。

背景画像でメインビジュアル画像を切り替えたい場合は、固有のクラス名をつけてCSSで背景画像を指定します。

トップページの時だけクラス名が「mv_top」に、それ以外のページは「mv」になります。

カラーミーショップでは、管理画面でカテゴリーを設定するとそのカテゴリーに固有のカテゴリーIDが振られます。

カテゴリーIDの調べ方は、調べたいページのURLが、http://www.example.com/?mode=cate&cbid=123456&csid=0 の場合、cbid= の後に続く数字がカテゴリーIDになります。したがってこのページのカテゴリーIDは「123456」です。

カテゴリーIDの取得には「$smarty.get.cbid」を使用します。

共通もしくは商品一覧のHTMLに下記コードを記入します。

商品詳細ページでは、上記の商品一覧のようにカテゴリーIDが取得できません。

カテゴリーを取得する独自タグは「bid_name」「sid_name」があります。

「bid_name」「sid_name」はパンくずリスト用として用意された独自タグなのです。

「bid_name」の中には、大カテゴリー名称、またはグループ名称が、「sid_name」の中には、小カテゴリー名称が入っていますので分岐する条件として使うことができます。

共通もしくは商品詳細のHTMLに下記コードを記入します。

●大カテゴリー、グループ

例えばカテゴリー名が「メンズファッション」の場合

●小カテゴリー

例えばカテゴリー名が「ジャケット」の場合

商品一覧ページも詳細ページのようにbid_name、sid_nameを使用して条件分岐することも可能ですが、このやり方は管理画面で設定したカテゴリー名を正確に記入しないと表示されなかったり、カテゴリー名を変更すると、その度にhtmlを編集しなければならないので、少しでもトラブルを回避したいということから、商品一覧ページでは、めったに変更することのないカテゴリーIDでの条件分岐がおすすめです。