Magento使用星级评论Star Rating_magento教程_php教程

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

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插件已经加载成功了

(责任编辑：最模板)