カラーミーショップをカスタマイズ

PR：当サイトの記事には一部広告が含まれています

カラーミーショップのテンプレートファイルをカスタマイズして、自由にレイアウト（HTML）やデザイン（CSS）を変更したい！

そんな人のために、カラーミーショップには「独自タグ」というものが用意されています。

カラーミーショップの独自タグ一覧（PC、スマートフォン）

上記の公式マニュアルにもあるように、この独自タグを利用すれば、ショップ情報や商品説明などを自由にカスタムすることができます。

しかし、このマニュアルには独自タグの使い方が詳しく…載って…ない…？？

ということで、カラーミーショップを運営している方から、よく独自タグの使い方についての問い合わせをいただくので、基本的な使い方・編集方法を説明します。

テンプレートの編集方法

独自タグを利用する前に、まずは「テンプレート」や「フリーページ」の編集方法について簡単に触れておきましょう。

カラーミーショップの管理画面にログインし、「ショップ作成」→「デザイン」→「デザイン編集」と進むと、現在利用中のテンプレートを編集できるページに移動します。

ここで、ショップのどのページ（どの部分）をカスタマイズするかを選択します。

共通

ショップのヘッダー、サイドメニュー、フッターのような複数のページで共通で表示されている部分を編集できます。

トップ

文字通りショップのトップページを編集できます。

なお、トップページと言ってもヘッダーやフッターなどは上記の「共通」に含まれていますので、それ以外のメインコンテンツ部分です。

商品一覧

カテゴリーやグループが選択された際の商品一覧ページを編集できます。

商品詳細

商品詳細ページを編集できます。

商品画像や説明文、カートに入れるボタンなどのレイアウトはここでカスタマイズします。

フリーページ

テンプレートには含まれない「フリーページ」を編集したい場合は、「ショップ作成」→「デザイン」→「フリーページ編集」と進んで、カスタマイズしたいフリーページの編集ボタンをクリックして編集画面を表示します。

独自タグの基本的な使い方

それでは本題の独自タグの使い方についてです。

独自タグ一覧

独自タグの一覧は、カラーミーショップのマニュアルに掲載されています。

いくつか見てみましょう。

shop_name: ショップのタイトル
home_url: ショップのトップページのURL
cart_url: カートに入れるのURL
bid_link: パンくずリスト（カテゴリ・グループ）のURL
bid_name: パンくずリスト（カテゴリ・グループ）の名前
productlist: 商品一覧情報
product: 商品情報

など、様々な独自タグが用意されているので、使いこなすことができればかなり自由にサイトのレイアウトやデザインをカスタマイズすることができます。

タグの記述方法

独自タグはそのまま記述してもタグとして認識されません。

shop_name（ショップのタイトル）であれば、

shop_name

と記述するのではなく、

<{$shop_name}>

というように記述する必要があります。

<{$と}>で囲うことではじめてタグとして認識されるのです。

例えば、ショップのタイトルにトップページへのリンクを付ける場合ですと、下記のようになります。

<a href="<{$home_url}>"><{$shop_name}></a>

リストを表示する方法（ループ処理）

カテゴリページやグループページで商品一覧（リスト）を表示させるためには、ループ処理（繰り返し処理）を行って、リストに含まれる商品を一つずつ取り出してやります。

<{section name=num loop=$productlist}>
  <div>
    <a href="<{$productlist[num].link_url}>">
      <img src="<{$productlist[num].img_url}>"><br>
      <{$productlist[num].name}>
    </a>
    <br>
    <{$productlist[num].price}>円
  </div>
<{/section}>

まず、ループの記述方法について説明します。

<{section …〜<{/section}>で囲まれた部分がループ処理を意味しています。

name=numはループ内で使うセクション名です。numである必要はなく、何でも構いません。

loop=$productlistは商品リスト（productlist）の数だけループを繰り返すという意味です。

参照：smartyのsection関数

次に、ループの中身について説明します。

productlist（ループ名）に続いて[num]（セクション名）を記述し、.（ドット）で区切って、その後ろに表示させたい情報のタグを書きます。

<{$productlist[num].link_url}>：商品詳細ページへのリンクURL
<{$productlist[num].img_url}>：商品一覧画像用URL
<{$productlist[num].name}>：商品名
<{$productlist[num].price}>：販売価格

という感じです。

これらが<{section …〜<{/section}>によって、一覧の数だけ繰り返し表示されます。

ループの途中で改行（HTMLタグ）を挿入する

商品一覧ページでは、CSSのfloatを使って商品を横に並べてレイアウトしているテンプレートがあります。

この際、任意の数（3つずつ、4つずつ等）で改行を入れるためには、ループの中に下記のような記述が必要です。

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

上記では、繰り返しの回数が3の倍数（3,6,9,12…）になった時に<br style="clear:both;">というHTMLタグを挿入して、強制的に改行を行っています。

3つずつではなく、4つずつにしたい場合は3の部分を4に変えればOKです。

条件分岐（if文）を使ってみる

カテゴリに商品が無い場合に、文章を表示したい
商品画像が無い場合に、no image画像を表示したい
いま表示しているカテゴリやページによってデザインを変えたい

などのように、条件によってレイアウトやデザインをカスタマイズしたい時は、ifを使って条件分岐します。

例えば、商品一覧ページで該当商品が1つもない場合に「該当する商品がありません」と表示させる処理は下記のようになります。

<!-- 商品があるかどうかをifでチェック -->
<{if $productlist_num != 0}>
  <!-- 商品がある場合のループ処理 -->
  <{section name=num loop=$productlist}>
  …
  <{/section}>
<{else}>
  <!-- 商品が無い場合の処理 -->
  <p>該当する商品がありません</p>
<{/if}>

参照：smartyのif, elseif, else

商品詳細ページ

商品詳細ページで商品情報を表示させるのは、ループ処理ほど複雑ではありません。

product.に続けて任意のパラメータを記述すればOKです。

<{$product.name}>：商品名
<{$product.price}>：定価
<{$product.sales}>：販売価格
<{$product.img_url}>：メイン画像URL
<{$product.explain}>：商品詳細説明
<{$product.stock_str}>：在庫数

カラーミーショップでテンプレートをカスタマイズしたり、独自タグを利用するためには、上記のように少しプログラムの概念が必要になってきます。

そのため、初心者や入門者には若干難しいかもしれませんが、カラーミーショップでは助け合い掲示板やサポートコミュニティなど、たくさんの情報がネット上に公開されています。

このように分からないことがあれば、気軽に質問できる環境があることは、とても大きなメリットだと思います。

カラーミーショップをカスタマイズ｜独自タグの使い方編