【カラーミーショップ】テンプレートカスタマイズ:商品説明欄を2箇所に分割

カラーミーショップの商品説明欄は、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>タグは消せません。
その場合の設定は別設定を施すことにします。

Follow me!



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください