カラーミーショップの商品説明欄は、HTMLタグも利用できますが、
「できれば分割して説明文をかけたらいいなー」と思うことがあります。
例えば「サイズと購入ボタンの下にサイズ表を挿入」「商品説明は通常のエリアに表示」など。
色々調べて、こちらのページを見つけたので、同じようにやってみました。
商品説明欄に登録した文字列は、独自タグ<{$product.explain}>で呼び出しています。
テンプレート(商品詳細ページ)内の独自タグを記述した場所に表示されます。
今回は、カラーミーショップの「ショップ作成>デザイン>利用中のテンプレート>テンプレート編集」から「商品詳細」のテンプレートをカスタマイズします。
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>
商品説明文の編集作業
商品説明の部分では、通常の書き方の部分は「通常エリア」、<!– –>(コメントアウト)で書かれている部分が、<div id=”spec”></div>を追加したエリアに表示させることができます。
カラーミーショップは改行の自動挿入はON/OFF設定可能
カラーミーショップはショップの基本設定で商品ページの改行についてはON/OFFが可能です。HTMLタグに自動的に改行が入ってしまうのでできれば「OFF」にしたいところですが、クライアント案件によっては「説明文を自動改行ありですでに書いている」場合があります。
今回の設定では表示させたい部分の<br>は削除していますが、
tableタグの前に自動挿入される<br>タグは消せません。
その場合の設定は別設定を施すことにします。