Magento使用星级评论Star Rating 【magento二次开发】

本文链接：https://blog.youkuaiyun.com/cstopery/article/details/28625467

在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[<?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>