Magento使用星级评论Star Rating 【magento二次开发】
来源:互联网 发布:广州达内java培训 编辑:程序博客网 时间:2024/05/17 22:50
在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插件已经加载成功了。
0 0
- Magento使用星级评论Star Rating 【magento二次开发】
- 在Magento产品页使用ColorBox 【magento二次开发】
- magento 评论回复功能
- Magento 中执行SQL语句.[magento二次开发]
- magento的event机制[magento二次开发]
- bootstrap-star-rating使用详解
- Magento事件机制 - Magento Event/Observer 【magento二次开发】
- Magento
- magento
- Magento产品页面显示评论
- magento 获取产品评论数量
- magento发布评论显示问题
- star-rating评分插件的使用
- 在magento layout中加入外部js 【magento二次开发】
- Magento模块中添加计划任务Cron Job【magento二次开发】
- magento 负载一路飙涨记录[magento二次开发]
- magento产品数据库表结构分析[magento二次开发]
- magento -- 在magento中如何回复客户的评论
- javascript介绍及其简单例子(4)
- 使用CocosBuilder制作一个跳跃小游戏
- 友元
- 使用printf向串口输出数据
- pgsql ipv4 ipv6网络地址数据类型
- Magento使用星级评论Star Rating 【magento二次开发】
- MVC思想
- 工作记录--CIMP
- 金融挑战赛:供应链金融2.0时代强势来袭
- android4.4 相机界面,来短信后阅读,退出短信界面后直接返回到应用程序列表
- 用GestureDetector实现手指滑动切换Activity
- 深入理解Java内存模型(四)——volatile
- PAT3-09. 队列中的元素排序
- 大数据来袭-玩微博共享也可以赚不少钱