カラーミーショップをカスタマイズをしていると、商品登録時にユーザーで自由にできる入力項目があればなぁと思うことがしばしばあります。
カラーミーショップの商品説明欄は縛りの少ない入力エリアですが、当然ながら商品説明を書くことになります。商品説明文を書いて、表を入れて、商品に関連した画像や動画を埋め込んだりして、ごちゃごちゃとしています。当然ですが、商品説明欄は一つで表示場所も一ヶ所です。

商品に紐づいた情報を登録したい場合はどうしましょうか？
商品説明以外の場所に何かを表示したい場合はどうしましょうか？

今回はちょっとした工夫で、商品説明欄を2倍使える方法について記事にしました。

商品説明欄の解説

カラーミーショップの商品説明に登録できる文字数は65000バイト（全角32500文字）です。

文章以外にも、HTMLタグとJavaScriptが書けます（独自タグは入れられません）。

商品説明欄に登録した文字列は、独自タグ<{$product.explain}>で呼び出します。テンプレート（商品詳細ページ）内の独自タグを記述した場所に表示されます。

「自動改行する・しない」の設定があります（デフォルトは自動改行する）。
「自動改行する」で<br>が自動挿入されますので、商品説明欄にHTMLタグを入れてカスタマイズする場合は行が余分に空きます。読みにくくなりますが、改行を入れずに書きましょう。

また、<br>が自動挿入されることで構文エラーになりますので、JavaScriptの書き方は<br>をコメント行にするような工夫で構文エラーを回避します。

商品説明欄でのJavaScriptの書き方（豆知識）

<script type="text/javascript"><!--
  sample_func();//
// --></script>

商品説明欄を二つに分ける裏技

カスタマイズでよくある例ですが、商品説明文を商品画像の下に表示して、スペック表を別の場所（たとえばカートボタン付近）に配置したいという場合。
商品説明欄に二つ書き込んで、表示の際に切り分けられたら便利ですよね。レイアウトの幅もぐっと広がります。

商品説明欄の分け方ですが、一つは <!-- --> でコメントアウトしている文章。もう一つはそれ以外の文章で分けることができます。
商品説明欄の書き方の例を挙げます。余分な<br>が入らないように改行を削っています。
区別しやすくするために赤色と黒色で色分けしました。赤字＝スペック表、黒字＝商品説明文を書いています。

商品説明欄（例）

<!--<table><tbody><tr><th>サイズ</th><td>148 x 88 x 88 (高さ x 幅 x 奥行) mm</td></tr><tr><th>重量</th><td>821g</td></tr><tr><th>素材</th><td>ファブリック</td></tr><tr><th>備考</th><td>1年間限定保証付き</td></tr></tbody></table>--><h2>echoって何？</h2><div>Echoは音声だけでリモート操作できるスマートスピーカーです。「アレクサ」と話しかけるだけで、音楽の再生、天気やニュースの読み上げ、スマートホームの操作、アラームのセットなど簡単に音声操作。</div>

<ul><li>Echo(エコー)は、音声で操作できるスマートスピーカー</li><li>話しかけるだけで、天気、ニュース、時計、音楽、家電など簡単操作</li><li>Echoの頭脳となるAlexa(アレクサ)に自動的に新機能が追加</li><li>パワフルな360°全方向スピーカーで、クリアなボーカル、ダイナミックな低音</li><li>プライム会員は、100万曲以上のPrime Musicが追加料金なしで聴き放題</li><li>Alexa対応家電コントローラー(別売)で、自宅のテレビやエアコンなども操作可能</li><li>本Echoの使用に係る月額料金等の支払いは発生しません。※但し、特定のサービスの利用等には別途登録・契約や料金が必要な場合があります。</li></ul>

独自タグ<{$product.explain}>で呼び出した箇所には、黒字部分のみが表示されます。
赤字部分はコメントアウトしてあるので表示されません。

赤字部分は、JavaScriptで文字列を切り出して、指定した先（id="spec"）に書き込むようにしています。

独自タグ（Smarty）を先に処理して、HTML解析はそのあとの順番です。ということで、JavaScriptの変数にもそのまま代入できます（サンプルコードを参照）。

JavaScript（テンプレート内）

$(function(){
  var str = '<{$product.explain|regex_replace:'/[\r\t\n]/':''}>';//改行0x0aをSmartyで除去
  var x = str.indexOf('<!--');
  var y = str.indexOf('-->');
  if(x >= 0 && y >= 0) {
    $('#spec').html(str.substring(x+4,y));
  }
});

HTML（テンプレート内）

<div id="spec"></div>

商品説明欄を分けたサンプルページ

商品説明欄に書いたスペック表と商品説明文がきれいに二つ分かれました。
<!-- -->内に書いてあったスペック表はカートボタン下の右端に配置して、商品説明文は商品画像の下段に配置することにしました。
それぞれの表示場所はテンプレート（商品詳細ページ）内であれば任意に決められます。

今回のまとめ

カラーミーショップの商品説明欄を分けることのメリットですが、商品ごとに自由にできる入力項目の役割と、商品説明欄のレイアウトが自由になる点が挙げられます。
なかなか便利なので、スペック表以外でも活用できると思います。

<!-- -->内の文字列はサイト内検索にも引っ掛かります。また、SEOのキーワードとしても問題ありません。

今回に限りませんが、商品説明欄にHTMLタグを入れていると、テンプレート変更時にデザインが崩れたりしますので、そういう点は注意が必要です。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら