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