EC-CUBEのモバイルとスマートフォンサイトにもレビュー機能を付ける：EC-CUBE2.11.1

2012-04-13 EC-CUBE

EC-CUBEでデフォルトではモバイルサイトとスマートフォンサイトには商品レビュー機能がないので
簡単にレビュー機能を実装できたやり方をメモ

詳しい変更点は後述しますが、
ざっとメモするとデフォルトの商品詳細ページには

    <!--この商品に対するお客様の声-->
    <div id="customervoice_area">
        <h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_product_voice.jpg" alt="この商品に対するお客様の声" /></h2>

        <div class="review_bloc clearfix">
            <p>この商品に対するご感想をぜひお寄せください。</p>
            <div class="review_btn">
                <!--{if count($arrReview) < $smarty.const.REVIEW_REGIST_MAX}-->
                    <!--★新規コメントを書き込む★-->
                    <a href="./review.php"
                        onclick="win02('./review.php?product_id=<!--{$arrProduct.product_id}-->','review','600','640'); return false;"
                        onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_comment_on.jpg','review');"
                        onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_comment.jpg','review');" target="_blank">
                        <img src="<!--{$TPL_URLPATH}-->img/button/btn_comment.jpg" alt="新規コメントを書き込む" name="review" id="review" /></a>
                <!--{/if}-->
            </div>
        </div>

        <!--{if count($arrReview) > 0}-->
            <ul>
                <!--{section name=cnt loop=$arrReview}-->
                    <li>
                        <p class="voicetitle"><!--{$arrReview[cnt].title|h}--></p>
                        <p class="voicedate"><!--{$arrReview[cnt].create_date|sfDispDBDate:false}-->　投稿者：<!--{if $arrReview[cnt].reviewer_url}--><a href="<!--{$arrReview[cnt].reviewer_url}-->" target="_blank"><!--{$arrReview[cnt].reviewer_name|h}--></a><!--{else}--><!--{$arrReview[cnt].reviewer_name|h}--><!--{/if}-->　おすすめレベル：<span class="recommend_level"><!--{assign var=level value=$arrReview[cnt].recommend_level}--><!--{$arrRECOMMEND[$level]|h}--></span></p>
                        <p class="voicecomment"><!--{$arrReview[cnt].comment|h|nl2br}--></p>
                    </li>
                <!--{/section}-->
            </ul>
        <!--{/if}-->
    </div>
    <!--お客様の声ここまで-->

のような記述があると思いますが、
基本的にはこの部分のソースをそれぞれモバイル用とスマートフォン用に最適化させ
あとは
/ec/data/Smarty/templates/default/products/
の中の

review.tpl
review_complete.tpl
review_confirm.tpl

という３つのファイルもそれぞれモバイル用とスマートフォン用に作ってアップさせればOKです

1 スマートフォン用カスタマイズ
2 モバイルサイト用カスタマイズ

スマートフォン用カスタマイズ

スマートフォン用に関してはjavascriptもCSSもほぼ適用されるので
ほぼ上記のPC用ソースをそのままスマートフォン用の商品詳細ページの
レビューを表示させたい箇所に貼り付け、

review.tpl
review_complete.tpl
review_confirm.tpl

の3つのファイルもサーバーからダウンロードしそのまま
/ec/data/Smarty/templates/sphone/products/
の中にアップロードすれば完成です。
あとは細かい部分などは表示を確認しながらCSSなどで編集すればOK！
・・・たぶん

モバイルサイト用カスタマイズ

モバイルサイト用はjavascriptやCSSが効かない部分があるので少し修正が必要になります。
まず、上記のPC用ソースを

<!--この商品に対するお客様の声-->
<br>
■お客様の声<br>
<hr>
<!--{if count($arrReview) == 0}-->
<center>
まだコメントはありません。
</center>
<!--{else}-->
<!--{section name=cnt loop=$arrReview max=5}-->
投稿日：<!--{$arrReview[cnt].create_date|sfDispDBDate:false}--><br>
投稿者：<!--{if $arrReview[cnt].reviewer_url}--><a href="<!--{$arrReview[cnt].reviewer_url}-->" target="_blank"><!--{$arrReview[cnt].reviewer_name|escape}--></a><!--{else}--><!--{$arrReview[cnt].reviewer_name|escape}--><!--{/if}--><br>
おすすめレベル：<!--{assign var=level value=$arrReview[cnt].recommend_level}--><!--{$arrRECOMMEND[$level]|escape}--><br>
タイトル：<!--{$arrReview[cnt].title|escape}--><br>
内容：<!--{$arrReview[cnt].comment|escape|nl2br}--><br>
<hr>
<!--{/section}-->
<!--{/if}-->

<!--{if count($arrReview) < $smarty.const.REVIEW_REGIST_MAX}-->
<a href="./review.php?product_id=<!--{$arrProduct.product_id}-->">
新規コメントを書き込む
</a>
<br>
投稿内容を確認してから、表示されます。
<!--{/if}-->
<!--お客様の声ここまで-->

のように余計なタグを除いてモバイル用に修正します。
ここで重要なのが

<a href="./review.php?product_id=<!--{$arrProduct.product_id}-->">
新規コメントを書き込む
</a>

という部分で、必ずリンク先を
./review.php?product_id=＜!–{$arrProduct.product_id}–＞
に変更してください。

あとはスマートフォン用と同じように

review.tpl
review_complete.tpl
review_confirm.tpl

の3つのファイルを
/ec/data/Smarty/templates/mobile/products/
の中にアップロードすれば一応OKなのですが、

モバイル用とスマートフォン用両方に言えることですが

review.tpl
review_complete.tpl
review_confirm.tpl

のファイルをそのままアップすると

            <li><input type="image" onclick=" mode.value='return';" onmouseover="chgImgImageSubmit('<!--{$TPL_URLPATH}-->img/button/btn_back_on.jpg',this)" onmouseout="chgImgImageSubmit('<!--{$TPL_URLPATH}-->img/button/btn_back.jpg',this)" src="<!--{$TPL_URLPATH}-->img/button/btn_back.jpg" alt="戻る"    name="back" id="back" /></li>
            <li><input type="image" onmouseover="chgImgImageSubmit('<!--{$TPL_URLPATH}-->img/button/btn_complete_on.jpg',this)" onmouseout="chgImgImageSubmit('<!--{$TPL_URLPATH}-->img/button/btn_complete.jpg',this)" src="<!--{$TPL_URLPATH}-->img/button/btn_complete.jpg" alt="送信" name="send" id="send" /></li>

などの部分では
画像のパスが変わってしまって画像が表示されませんので、
画像のパスを変更するか、
スマートフォンなら
/ec/user_data/packages/sphone/img/button/の中に同じ名前の画像をアップロード
モバイルなら
/ec/user_data/packages/mobile/img/の中にbuttonフォルダを作ってその中に同じ名前の画像をアップロード
すれば画像が表示されます。
もちろんテンプレートを好きなように直接いじってもOK

※モバイルのreview_complete.tplに関しては
「閉じる」ボタンが効かないのでその部分のソースを削除するなどしたほうが良いと思います。

以上でレビュー機能の追加はおわりです。

ほかにもっと良いやり方があるのかもしれませんが・・・

案件探しに！絶対登録しておきたいクラウドソーシングサービス3選【評価と経験談】：ビジネス・副業

EC-CUBEのモバイルとスマートフォンサイトにもレビュー機能を付ける：EC-CUBE2.11.1 | コーディング・プログラミング・WEB制作ブログ