Magento使用星级评论Star Rating

在Magento产品页，用户可以对产品进行评级，Magento默认使用Radio让用户选择评分等级，用户体验不是很好，基于jQuery的星级评分插件有很多，这里我们使用这款插件。

1 加载jQuery

首先需要在Magento中需要加载jQuery，下载StarRating插件并放在网站根目录的js目录下，比如/js/star_rating

2 新建模块

在/app/code/local/MagentoBoy/StarRating目录下新建一个模块MagentoBoy_StarRating，并添加模块文件：

/app/etc/modules/MagentoBoy_StarRating.xml

<?xml version="1.0"?>
<config>
    <modules>
        <MagentoBoy_StarRating>
            <active>true</active>
            <codePool>local</codePool>
        </MagentoBoy_StarRating>
    </modules>
</config>

并添加配置文件：

/app/code/local/MagentoBoy/StarRating/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <MagentoBoy_StarRating>
            <version>0.1.0</version>
        </MagentoBoy_StarRating>
    </modules>
</config>

3 添加Layout文件

/app/design/frontend/default/default/starrating.xml

<?xml version="1.0"?>
<layout>
    <review_product_list>
        <reference name="head">
            <action method="addItem"><type>js</type><name>star_rating/jquery.rating.js</name></action>
            <action method="addItem"><type>js_css</type><name>star_rating/jquery.rating.css</name></action>
        </reference>
        <reference name="product.review.form">
            <action method="setTemplate"><template>starrating/form.phtml</template></action>
        </reference>
    </review_product_list>
</layout>

并在config.xml中添加layout文件

<config>
    <frontend>
        <layout>
            <updates>
                <starrating>
                    <file>starrating.xml</file>
                </starrating>
            </updates>
        </layout>
    </frontend>
</config>

4 修改template文件

复制

/app/design/frontend/base/default/template/review/form.phtml

到

/app/design/frontend/default/default/template/starrating/form.phtml

把

<table class="data-table" id="product-review-table">
    <col />
    <col width="1" />
    <col width="1" />
    <col width="1" />
    <col width="1" />
    <col width="1" />
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th><span class="nobr"><?php echo $this->__('1 star') ?></span></th>
            <th><span class="nobr"><?php echo $this->__('2 stars') ?></span></th>
            <th><span class="nobr"><?php echo $this->__('3 stars') ?></span></th>
            <th><span class="nobr"><?php echo $this->__('4 stars') ?></span></th>
            <th><span class="nobr"><?php echo $this->__('5 stars') ?></span></th>
        </tr>
    </thead>
    <tbody>
    <?php foreach ($this->getRatings() as $_rating): ?>
        <tr>
            <th><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></th>
        <?php foreach ($_rating->getOptions() as $_option): ?>
            <td class="value"><input type="radio" name="ratings[getId() ?>]" id="escapeHtml($_rating->getRatingCode()) ?>_getValue() ?>" value="getId() ?>" class="radio" /></td>
        <?php endforeach; ?>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>

修改为

<table class="data-table" id="product-review-table">
    <tbody>
    <?php foreach ($this->getRatings() as $_rating): ?>
        <tr>
            <td><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></td>
            <td class="value">
                <?php foreach ($_rating->getOptions() as $_option): ?>
                <input type="radio" name="ratings[getId() ?>]" id="escapeHtml($_rating->getRatingCode()) ?>_getValue() ?>" value="getId() ?>" class="star" />
                <?php endforeach; ?>
            </td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>
<script type="text/javascript">//<![CDATA[
var $j = jQuery.noConflict();
$j(document).ready(function(){
    $('.star').rating();
});
//]]></script>

清除缓存，刷新产品页面，可以看到Star-Rating插件已经加载成功了。