Level 122
use something like this
https://www.w3schools.com/howto/howto_css_star_rating.asp
and iterate over it with a simple php loop
You are going to struggle to represent fractions though as that is a lot harder from the html/css point of view
Feb 2, 2018
11
Level 1
Displaying a rating as stars
Whats the best way to do this and how would i do this? i'm looking to change my average rating number to stars instead of just displaying the average rating out of five. for example if the average rating returned is 3.27 then 3.27 stars will show. Is font awesome the easiest way and how would i incorporate that with the code below?
<h2>Rated : {{number_format($product->reviews->avg('ratings'),2)}} /5</h2>
Level 5
I recently did something like this which may help: It wasn't done in a Laravel app but you easily tuck it away nicely.
`function rating($stars) { $rating = str_repeat('', (int)$stars); if (is_float($stars + 0)) { $rating .= ''; } $rating .= str_repeat('', 5 - $stars);
return $rating; }`
Usage example:
<?php foreach ($inspection['items'] as $item) { ?> <tr> <td><?php echo $item['name']; ?></td> <td><?php echo rating($item['rating']) ?></td>//stars icons here <td><?php echo $item['comment']; ?></td> </tr> <?php } ?>
Level 5
Hmm I wish there was a preview, still no familiar with adding gh code blocks :)
Level 122
Here's a working solution using latest font awesome svg
@php $rating = 3.1; @endphp
<p>
<div class="placeholder" style="color: lightgray;">
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<span class="small">({{ $rating }})</span>
</div>
<div class="overlay" style="position: relative;top: -22px;">
@while($rating>0)
@if($rating >0.5)
<i class="fas fa-star"></i>
@else
<i class="fas fa-star-half"></i>
@endif
@php $rating--; @endphp
@endwhile
</div>
</p>
The first div with the far fa-star icons sets up outlines of 5 stars
The second div overlays that with actual star or half star.
The test value is inserted into the view at the top just for testing.
Unfortunately this technique is tightly coupled to the line-height to get the overlay in the correct place. This could be improved upon, depending on the structure that this has to fit within (eg table, paragraph, grid etc)
Level 122
Revised version using Fontawesome Stack feature;
@php $rating = 1.6; @endphp
@foreach(range(1,5) as $i)
<span class="fa-stack" style="width:1em">
<i class="far fa-star fa-stack-1x"></i>
@if($rating >0)
@if($rating >0.5)
<i class="fas fa-star fa-stack-1x"></i>
@else
<i class="fas fa-star-half fa-stack-1x"></i>
@endif
@endif
@php $rating--; @endphp
</span>
@endforeach
It looks more complicated than it is, but has to loop over all 5 stars and then decide if the stacked icon should be half or full.
This version does not have a problem being tied to the line height like the overlay version
15 likes
Level 1
very usefull
Level 20
I was devising a solution and look, here I find it. Thanks!
Level 3
Very useful thanks @snapey
Level 13
First of all, thanks a lot for this great post.
Since I have many parts inside my blade where I need to deal with these rating "stars" I would like to ask you where to place such a helper function (I'm using collections to "feed" the function inside blade).
Level 122
@jaheller creating a blade component would be quite complicated.
Perhaps just create as a partial, passing the rating to the partial
Level 3
@snapey Thanks for this valuable post.
Please or to participate in this conversation.