Difference between revisions of "How to display detailed ratings on list pages"

From JReviews Documentation
Jump to: navigation, search
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
 
It is possible to display detailed ratings on list pages (blogview, tableview, thumbview, cmsblog), but detailed ratings take a lot of space so you will need to modify the layout.
 
It is possible to display detailed ratings on list pages (blogview, tableview, thumbview, cmsblog), but detailed ratings take a lot of space so you will need to modify the layout.
  
 
+
This article will show you how to add detailed ratings on a tableview list page because it has more room then other views.
I will show you how to add detailed ratings on a tableview list page because it has more room then other views.
+
 
+
  
 
This is how the ratings look by default on tableview page:
 
This is how the ratings look by default on tableview page:
Line 10: Line 8:
  
  
We will modify the code to display detailed ratings like on listing detail page.
+
We will modify the code to display detailed ratings like on the listing detail page.
  
 
Open this theme file:
 
Open this theme file:
Line 18: Line 16:
 
Find this code:
 
Find this code:
 
<source lang="php">
 
<source lang="php">
<!-- BEGIN RATINGS COLUMN -->
+
<!-- OVERALL RATINGS -->
<td class="columnLast">
+
<?php echo $Rating->overallRatings($listing, 'list'); ?>
<?php if($listing['Criteria']['state'] == 1 && ($this->Config->author_review || $this->Config->list_show_user_rating)):?>
+
<table border="0" cellpadding="0" cellspacing="0" class="rating_table">
+
<?php if($this->Config->author_review):?>
+
<tr>
+
<td class="rating_label"><?php echo $Html->image($this->viewImages.'review_editor.png',array('width'=>14,'height'=>14,'title'=>__t("Editor rating",true),'alt'=>__t("Editor rating",true)));?></td>
+
<td><?php echo $Rating->drawStars($listing['Review']['editor_rating'], $this->Config->rating_scale, $this->Config->rating_graph, 'editor');?></td>
+
<td class="rating_value"><?php echo $Rating->round($listing['Review']['editor_rating'],$this->Config->rating_scale);?><?php if ( $listing['Review']['editor_rating_count'] > 1 ) echo ' (',$listing['Review']['editor_rating_count'],')';?></td>
+
</tr>
+
<?php endif;?>
+
<?php if($this->Config->list_show_user_rating):?>
+
<tr>
+
<td class="rating_label"><?php echo $Html->image($this->viewImages.'review_user.png',array('width'=>14,'height'=>14,'title'=>__t("User rating",true),'alt'=>__t("User rating",true)));?></td>
+
<td><?php echo $Rating->drawStars($listing['Review']['user_rating'], $this->Config->rating_scale, $this->Config->rating_graph, 'user');?></td>
+
<td class="rating_value"><?php echo $Rating->round($listing['Review']['user_rating'],$this->Config->rating_scale);?> (<span style="cursor:help;" title="<?php __t("User reviews");?>"><?php echo (int) $listing['Review']['user_rating_count'];?></span>)</td>
+
</tr>
+
<?php endif;?>
+
</table>
+
<?php endif;?>
+
</td>
+
<!-- END RATINGS COLUMN -->
+
  
 
</source>
 
</source>
Line 47: Line 25:
  
 
<source lang="php">
 
<source lang="php">
<!-- BEGIN RATINGS COLUMN -->
+
<?php echo $Rating->detailedRatings($listing,'user');?>
<td class="columnLast">
+
<?php echo $this->element('detailed_ratings',array('review'=>$listing,'reviewType'=>'user'));?>
+
</td>
+
<!-- END RATINGS COLUMN -->
+
 
</source>
 
</source>
  
  
Now the detailed ratings are displayed like this:
+
Now the detailed user ratings are displayed like this:
  
 
[[File:ListRatings2.png]]
 
[[File:ListRatings2.png]]
Line 62: Line 36:
 
To display editor detailed ratings use this code:
 
To display editor detailed ratings use this code:
 
<source lang="php">
 
<source lang="php">
<?php echo $this->element('detailed_ratings',array('review'=>$listing,'reviewType'=>'editor'));?>
+
<?php echo $Rating->detailedRatings($listing,'editor');?>
 
</source>
 
</source>
  
 
 
== Customizing the layout of detailed ratings for the list page ==
 
 
 
The code that generates the layout for detailed ratings is in:
 
*<span style="color: blue">\com_jreviews\jreviews\views\themes\default\elements\detailed_ratings.thtml</span>
 
 
 
That file is used to display detailed ratings on the listing detail page, so if you want to modify the layout only for detailed ratings on list pages, copy that file and rename it to:
 
*<span style="color: blue">\com_jreviews\jreviews\views\themes\default\elements\detailed_ratings_list.thtml</span>
 
 
 
When adding new files anywhere in JReviews folders you have to clear the
 
File Registry in JReviews so it recognizes the files.
 
 
 
To call the new file in listings_tableview.thtml file use this code:
 
 
<source lang="php">
 
<?php echo $this->element('detailed_ratings_list',array('review'=>$listing,'reviewType'=>'user'));?>
 
</source>
 
  
  

Latest revision as of 11:31, 23 August 2011

It is possible to display detailed ratings on list pages (blogview, tableview, thumbview, cmsblog), but detailed ratings take a lot of space so you will need to modify the layout.

This article will show you how to add detailed ratings on a tableview list page because it has more room then other views.

This is how the ratings look by default on tableview page:

ListRatings1.png


We will modify the code to display detailed ratings like on the listing detail page.

Open this theme file:

  • \com_jreviews\jreviews\views\themes\{theme_name}\listings\listings_tableview.thtml


Find this code:

<!-- OVERALL RATINGS -->
<?php echo $Rating->overallRatings($listing, 'list'); ?>


And replace it with this:

<?php echo $Rating->detailedRatings($listing,'user');?>


Now the detailed user ratings are displayed like this:

ListRatings2.png


To display editor detailed ratings use this code:

<?php echo $Rating->detailedRatings($listing,'editor');?>


The same code will work in listings_blogview.thtml and listings_thumbview.thtml if you use those layouts, but it will require more layout customizations to make the detailed ratings look good.

If you created Joomla Category Blog Layout menu item instead of JReviews Category List menu item, then you need to modify cmsblog.thtml theme file.