カラーミーショップ おすすめ商品のカスタマイズ方法

Pocket

カラーミーショップではショップページにおすすめ商品を表示する機能が実装されています。ECサイトでは欠かせないコンテンツなので売れ筋商品とは別に設置しておくことをおすすめします。

このページではおすすめ商品の設定方法と画面に表示する方法を紹介します。

カラーミーショップのおすすめ商品カスタマイズ

おすすめ商品の設定方法

カラーミーショップでおすすめ商品を設定するには、管理画面->商品管理->おすすめ商品管理のリンクをクリックして設定画面を表示します。
カラーミーショップでおすすめ商品を設定する
設定画面下にある選択項目でカテゴリーを選択し、表示された商品の中からオススメ商品に登録したいものを選べば登録完了です。
カラーミーショップでおすすめ商品を設定する2
より詳しい設定方法などは公式マニュアルをチェックしてみて下さい。

おすすめ商品で使えるタグ一覧

テンプレートで既に表示されるようにコーディングされている場合は問題ありませんが、そうでない場合、おすすめ商品の設定だけでは画面に表示されません。

画面に表示するにはカラーミーショプで用意されている独自タグを使って、商品情報をデータベースから取得する必要があります。

おすすめ商品を表示するためのタグには以下のようなものがあります(詳細は公式リファレンスをご覧ください)。

  • $recommend_num : おすすめ商品個数
  • $recommend[num].id : 商品id
  • $recommend[num].model : 型番
  • $recommend[num].name : 商品名
  • $recommend[num].teika : 定価
  • $recommend[num].price : 販売価格
  • $recommend[num].shoppoint : ショップポイント
  • $recommend[num].link_url : 商品リンクのURL
  • $recommend[num].img_url : 商品画像
  • $recommend[num].s_expl : 商品の簡易説明

これらの他にもフラグ用のタグやオプション設定の値を取得できるものもあるので必要に応じて変更します。

タグの使い方などは、カラーミーショップの共通ページをカスタマイズする方法をご覧ください。

おすすめ商品の表示方法

おすすめ商品情報を取得するためには上記のタグを使って以下のようなコードを記述します。

<ul>
  <!-- オススメ情報のループ開始 -->
  <{section name=num loop=$recommend}>
    <li>
      <!-- リンク付き商品画像 -->
      <a href="<{$recommend[num].link_url}>">
        <img src="<{$recommend[num].img_url}>" alt="<{$recommend[num].name}>" />
      </a>
      <h3>
        <!-- リンク付き商品タイトル -->
        <a href="<{$recommend[num].link_url}>">
          <{$recommend[num].name}>
        </a>
      </h3>
      <!-- 商品の簡易説明 -->
      <p>
        <{$recommend[num].s_expl}>
      </p>
      <!-- 販売価格 -->
      <p>
        <{$recommend[num].price}>
      </p>
    </li>
  <{/section}>
</ul>

まずはおすすめ商品のループを設定して、登録された商品すべてを取得します。そのループの中で、先ほどのタグを使って情報を出力することで商品の表示ができます。

デフォルトテンプレートではさらに複雑になっており、売り切れならSOLDOUTと表示したり、商品画像がなければ「画像なし」の画像が表示されるようになっています。

それらのコードを参考にしながら必要に応じてカスタマイズしてみてください。

おすすめ商品の表示数を変更する方法

基本的には管理画面で登録した数が表示されるようになるので、そちらで表示数を調整できるのですが、コード側でもおすすめ商品の表示数を調整できます。

やり方は簡単、先ほどのループの開始タグにmax="5"と追加すればOK。

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

カラーミーショップではSmartyというPHPのライブラリを使っているので、この例のようにある程度表示をカスタマイズすることも可能です。