カラーミーショップ 新着商品の使い方とカスタマイズ方法

Pocket

カラーミーショップはスマホでもECショップを構築できる手軽さと、HTMLやCSSを編集しオリジナルデザインのショップを作成できる拡張性を両方兼ね備えたECサービス。

ここではカラーミーショップのテンプレートプラス(もしくはレギュラープラン以上)で使えるようになる新着商品の使い方と簡単なカスタマイズ方法を紹介します。

カラーミーショップで新着商品を使う方法

新着商品を表示するにはカラーミーショップのテンプレートプラス(もしくはレギュラープラン以上)の契約が必要です。

契約できたら、HTML編集エリアにテンプレートコードを追加することで使用可能になります。
カラーミーショップの新着商品

新着商品で使えるタグ一覧

新着商品で使える独自タグはカラーミーマニュアルにも記載されていますが、代表的なものを書き出すと次のようになります。

タグ名 機能
new_item_num 新着商品個数
id 商品ID
model 型番
name 商品名
cut_name 商品名の省略
teika 定価
teika_disp 定価表示フラグ
price 販売価格
regular_price 通常販売価格
members_price 会員価格
discount_flg 割引フラグ
discount_rate 割引率
shoppoint ショップポイント
link_url 商品詳細ページのURL
img_url 商品一覧画像用URL
soldout_flg 売り切れフラグ
s_expl 商品簡易説明

カラーミーショップ独自タグの書き方

マニュアルにも掲載されているように独自タグを使うには特殊な書き方をする必要があります。

例えばショップ名を出力したい場合は、表示したい場所に以下のように記述します。マニュアルではshop_nameとだけ書かれていますが、その前後に記号をつける必要があるのです。また、リンクの場合はaタグのhref属性の中に記述します。

<!-- テキストとして出力 -->
<{ $shop_name }>

<!-- h1に入れる場合 -->
<h1><{ $shop_name }></h1>

<!-- aタグ追加しトップページのリンクを作成 -->
<h1><a href="<{ $home_url }>"><{ $shop_name }></a></h1>

カラーミーショップのループの書き方

先ほどは単に値を出力するだけでしたが、商品一覧の場合ループを作る必要があります。

書き方は簡単。ループの中身をsectionで囲むだけです。

<{section name=num loop=$new_item}>
  <!-- ループの中身 -->
<{/section}>

ループを使って出力するのは、新着商品の他に「おすすめ商品」や「売れ筋商品」などがあります。書き方はどれも同じですが、loop=$new_itemの部分が異なるので注意。

<!-- 新着商品 -->
<{section name=num loop=$new_item}>
  <!-- 商品名 -->
  <{$new_item[num].name}>
<{/section}>

<!-- おすすめ商品 -->
<{section name=num loop=$seller}>
  <!-- 商品名 -->
  <{$seller[num].name}>
<{/section}>

<!-- 売れ筋商品 -->
<{section name=num loop=$recommend}>
  <!-- 商品名 -->
  <{$recommend[num].name}>
<{/section}>

新着商品を使ってみる

もっともシンプルなコードだと以下のようになります。これで画像、タイトル、簡易説明、価格を表示できます。画像とタイトルにはリンクをつけておきます。

<div class="new-product">
  <!-- 新着商品のループ開始 -->
  <{section name=num loop=$new_item}>
    <div>
      <!-- リンク付き商品画像 -->
      <a href="<{$new_item[num].link_url}>">
        <img src="<{$new_item[num].img_url}>" alt="<{$new_item[num].name}>" />
      </a>
      <h3>
        <!-- リンク付き商品タイトル -->
        <a href="<{$new_item[num].link_url}>">
          <{$new_item[num].name}>
        </a>
      </h3>
      <!-- 商品の簡易説明 -->
      <p>
        <{$new_item[num].s_expl}>
      </p>
      <!-- 販売価格 -->
      <p>
        <{$new_item[num].price}>
      </p>
    </div>
  <{/section}>
  <!-- 新着商品のループ終了 -->
</div>

新着商品の商品表示数を制限する場合

表示する個数を制限するにはループの部分にmax="5"のように記述すればOK

<!-- 表示する個数を限定する(5個の場合) -->
<{section name=num loop=$new_item max="5"}>