![](https://i-blog.csdnimg.cn/blog_migrate/86c4fc6a684e761778151ed2a676d01e.jpeg)
在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> </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[<?php echo $_rating->getId() ?>]"
- id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>"
- value="<?php echo $_option->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[<?php echo $_rating->getId() ?>]"
- id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>"
- value="<?php echo $_option->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插件已经加载成功了。