カラーミーショップの商品詳細ページをカスタマイズする方法

Pocket

簡単にネットショップを開店できるカラーミーショップ。HTMLのカスタマイズができるので、自由度が高く、オリジナルデザインのショップを構築することができます。

このページではカラーミーショップの商品詳細ページをカスタマイズする方法を紹介します。

ちなみに商品一覧ページについてはこちらでまとめています。

カラーミーショップの詳細ページをカスタマイズ

商品情報の取得・表示方法まとめ

まずは商品詳細ページに商品情報を表示する方法から。一覧表示と違いこちらはループを書く必要がありません。公式リファレンスのタグをそのまま使用すればOK。

<!-- タイトル -->
<h2 class="title"><{$product_name}></h2>

<!-- 商品画像 -->
<img src="<{$product.img_url}>" />

<!-- 商品説明 -->
<{$product.explain}>

<!-- 販売価格 -->
<{$product.regular_price}>

<!-- カートに入れるボタン -->
<input class="product_cart_btn product_addcart_btn" type="submit" value=" カートに入れる" />

商品情報はカートページに送信するためフォームの中に入れておく必要があるので注意。

<form name="product_form" method="post" action="<{$cart_url}>">

  <!-- ここに商品情報 -->

</form>

カラーミーショップのレビュー機能をカスタマイズ

次はレビューについて。カラーミーショップのレビュー機能はページへのリンクと一覧表示が可能です。

<ul>
  <li><a href="<{$review_lst_url}>">レビューを見る</a></li>
  <li>レビューの数 : <{$review_item_num}>件</li>
  <li><a href="<{$review_send_url}>">レビューを投稿</a></li>
</ul>

レビューの一覧を表示するにはループを作成して一覧を取得します。

<{section name=num loop=$reviewlist}>

  <!-- ここにレビュー情報を表示 -->

<{/section}>

このループの中にレビュー情報を入れていきます。出力できる情報は公式リファレンスを見て下さい。

<!-- 投稿者ニックネーム -->
<{$reviewlist[num].nickname}>

<!-- 性別 -->
<{$reviewlist[num].sex}>

<!-- オススメ度 -->
<{$reviewlist[num].star}>
  • 高藤

    これは詳細ページに表示させるだけですよね、トップページなどにも最新のレビューを表示させることはできるのでしょうか

    • Takeshi

      カラーミーショップのリファレンスでは商品詳細ページの欄に記載されてるので、たぶん詳細ページだけだと思います。