【カラーミーショップ】レビューを商品詳細ページに表示したときにコメントを改行したい。

お役に立ったらポチッとお願いします

7月半ばにちょっと大変うかれることがあり、このブログどころか本業にも支障をきたすくらいだったのでそろそろ社会復帰したいおおつか( @otkizm )ですこんにちは。
何度かそのことも書こうと試みたんですが、感情がバカになって言葉がインフレをおこすので断念しましたw

さて、それ以前からさっぱり進んでいないカラーミーのリニューアル…。少しずついじっている最中なんですが、気になることがあったので調べてみました!

スポンサーリンク

レビューを商品詳細ページに表示したら改行が無視される!?

ちょっと前からうちのネットショップをギガプランにしまして、ポツポツとレビューをいただいています。(ありがとうございます!)
いまのテンプレは標準通り商品のページに「レビューを見る」のリンクを貼ってレビューページに飛んでもらう仕様なんですが、やっぱり移動せずにレビューを見たいんですよね。

これに関してはカラーミーでも対応してくれていまして、マニュアル「レビュー一覧を商品詳細ページに表示する」にコードが載っています。

こりゃありがてぇ!とコピペしたところ問題が。
改行がまるっと無視されてるぅぅぅ!

レビューを表示したところ

※画像はマニュアルより転載。

とりあえずこんな感じなんですよ。3カラムとかで表示幅が狭めならあまり気にならないかもしれませんが、時代は1カラムです。しかもモニタ幅も広がる一方なのでこれを1000pxとかで表示したらちょっと読む気になれない…。

replaceでなんとかなるかな?

いただいたコメントでは改行されている部分が半角スペースになっていたので、replaceでなんとかなりそうだな!ととりあえずこんなふうに書いてみました。

.replace(/ /g,'<br>')); のスラッシュ( / )内をシングルクォート( ‘ )内の文字列に変換してね、というおまじないなので、単純に半角スペースを入れてみたんですが見事ハズレ。

しばらくあれこれ悩んだあとハッと気がついてソースを見たところ、コメント部分のテキストは改行されていました。だから表示させると半角スペースになっていたわけですね。
というわけで「改行 br 変換」で調べたところビンゴ!改行コードの正規表現を発見♥

改行コードの正規表現が/\r?\n/gだそうなのでreplaceに入れただけですが、これでちゃんといただいた通りの改行ができるようになりました♥

おまけ。

需要があるか微妙なところですが、ついでに「レビューでいただいた★をFont Awesomeで表示する方法」を置いておきますね。

カラーミー謹製の★画像もダメじゃないんですが、ちょっとサイトの雰囲気に合わないので。

いちおう解説

独自タグの $reviewlist[num] .starを利用して、「★5個だったら~★1個だったら」の条件分岐をずらっと書いていくだけです。

Font Awesomeの場合<i class=”fa fa-star”></i>が★、<i class=”fa fa-star-o”></i>が☆なので、例えば★4個だった場合には

となって「★★★★☆」と表示してくれるわけです。
ここを応用すれば画像でもいけますので、オリジナル感を出したい方はぜひ。

スポンサーリンク

お役に立ったらポチッとお願いします

おおつかをフォローしてみる

コメントをどうぞ

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