Ecshop模板开发（十一）：商品详情页显示和添加评价

在themes/yourthemes/library目录下面新建两个文件。分别为

comments.lbi
comments_list.lbi

内容分别如下：

(1)comments.lbi

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
{insert_scripts files='transport.js,utils.js'}
<div id="ECS_COMMENT"> {* ECSHOP 提醒您：动态载入comments_list.lbi，显示评论列表和评论表单 *}{insert name='comments' type=$type id=$id}</div>

(2)comments_list.lbi

#show the comments
{if $comments}
            {foreach from=$comments key=key item=comment}
                <table>

                {*显示评论*}
                <tr>
                    <td width="20%">{if $comment.username}{$comment.username}{else /}匿名用户{/if}</td>
                    <td width="40%">{$comment.content}</td>
                    <td width="20%"><img src="../images/stars{$comment.rank}.gif" alt="">{$comment.rank}分</td>
                    <td width="20%">{$comment.add_time}</td>
                </tr>

                {*显示评论的回复*}
                {if $comment.re_content}
                    <tr>

                        <td style="padding-left: 20px;">{$lang.admin_username}</td>
                        <td>{$comment.re_content}</td>
                    </tr>
                {/if}
                </table>

                <div style="border: 1px solid #eee;clear: both;"></div>

            {/foreach}



    {else /}
    <p>对不起，该商品暂时没有评论！</p>
{/if}



#add the comments
{*评价商品*}
<h2>评价商品</h2>
<hr>
<form action="" id="CommentForm">
    <table>
        <tr>
            <td width="20%">用户名</td>
            <td  style="padding-left: 20px;">{if $smarty.session.uesr_name}{$smarty.session.uesr_name}{else /}匿名{/if}</td>
        </tr>
        <tr>
            <td width="20%">邮箱</td>
            <td style="padding-left: 20px;"><input name="email" id="email" type="text"></td>
        </tr>
        <tr>
            <td width="%">等级</td>
            <td style="padding-left: 20px;">

                <input name="comment_rank" type="radio" value="1" id="comment_rank1" <img src="../images/stars1.gif"
                <input name="comment_rank" type="radio" value="2" id="comment_rank2" <img src="../images/stars2.gif"
                <input name="comment_rank" type="radio" value="3" id="comment_rank3" <img src="../images/stars3.gif"
                <input name="comment_rank" type="radio" value="4" id="comment_rank4" <img src="../images/stars4.gif"
                <input name="comment_rank" type="radio" value="5" checked="checked" id="comment_rank5" <img src="../images/stars5.gif"
            </td>
        </tr>


        <tr>
            <td  width="20%">内容</td>
            <td style="padding-left: 20px;">
                <textarea name="content" id="content">

                </textarea>
            </td>
        </tr>


        {if $enabled_captcha}
            <tr>
                <td  width="20%">验证码</td>
                <td style="padding-left: 20px;">
                    <input type="text" name="captcha" id="captcha">
                    <img src="captcha.php?{$rand}" alt="captcha" onClick="this.src='captcha.php?'+Math.random()" class="captcha">
                </td>

            </tr>
        {/if}

        <tr>
            <td  width="20%"></td>
            <td style="padding-left: 20px;">
                <input type="hidden" value="{$comment_type}" name="cmt_type">
                <input type="hidden" value="{$id}" name="id">
                <input type="submit" value="提交评论">
            </td>
        </tr>
    </table>

</form>

(3)goods.dwt

#html show the comments
<h2>商品评价</h2>
{insert name='comments' id=$id type=$type}


#js add the comments
$('#CommentForm').submit(function () {
        var cmt={};
        cmt.email           = $('input[name=email]').val();
        cmt.content         = $('#content').val();
        cmt.type            = $('input[name=cmt_type]').val();
        cmt.id              = $('input[name=id]').val();
        cmt.captcha         = $('input[name=captcha]').val();
        cmt.rank            = $('input[name=comment_rank]:checked').val();

        if(cmt.email ==''){
            alert('请输入邮箱');
            return false;
        }
        if(($('input[name=captcha]').length>0) &&  (cmt.captcha=='')){
            alert('请输入验证码');
            return false;
        }

        //Ajax.call('comment.php', 'cmt=' + cmt.toJSONString(), commentResponse, 'POST', 'JSON');
        $.post(
                'comment.php',
                {'cmt':JSON.stringify(cmt)},
                function (data) {
                    alert(data);
                }
        );
        return false;
    });

(4)goods.php (在190行之后加入下列代码，作用是为了设置验证码是否开启，从而对验证码正确与否做出判断)

if ((intval($_CFG['captcha']) & CAPTCHA_COMMENT) && gd_version() > 0)
        {
            $smarty->assign('enabled_captcha', 1);
            $smarty->assign('rand', mt_rand());
        }