CODEWITHSUNDEEP
phplaravel
Alphal1111
Alphal1111

Reputation: 99

Ways of showing rating with stars in blade. laravel

I have a question. I am trying to show ratings in web. this is the way that I am thinking to implement. I think it is too long.

@if ($nr>=1 && $nr<=1)
{
<div class="rating">
      <span><i class="fa fa-star"></i></span>
      <span><i class="fa fa-star-o"></i></span>
      <span><i class="fa fa-star-0"></i></span>
      <span><i class="fa fa-star-o"></i></span>
      <span><i class="fa fa-star-o"></i></span>
</div><!-- end rating -->
}
@elseif ($nr>=2 && $nr<=2)
{
<div class="rating">
     <span><i class="fa fa-star"></i></span>
     <span><i class="fa fa-star"></i></span>
     <span><i class="fa fa-star-0"></i></span>
     <span><i class="fa fa-star-o"></i></span>
     <span><i class="fa fa-star-o"></i></span>
</div><!-- end rating -->
}

and so on...

Is there another way? A shorter one ? I have seen android programmers that do it only by using functions. What about in web or in laravel?

Upvotes: 3

Views: 5551

Answers (5)

Don&#39;t Panic
Don&#39;t Panic

Reputation: 41820

You can do it without a loop if you like.

<div class="rating">
    {!! str_repeat('<span><i class="fa fa-star"></i></span>', $nr) !!}
    {!! str_repeat('<span><i class="fa fa-star-o"></i></span>', 5 - $nr) !!}
</div>

Upvotes: 6

leonp5
leonp5

Reputation: 315

With the help of this article from CSS Tricks (the last proposal there) i found another solution for showing only ! the stars rating. Assuming also a 5 star rating (average also possible).

Therefore you only need one div, that looks like this:

<div class="average-star-rating" style="--rating:{{$roundedNumber}};">
    </div>

The rest is done by the scss:

:root {
    --star-size: 30px;
    --star-off-color: #cccccc;
    --star-on-color: #fc0;
}

.average-star-rating {
    --percent: calc(var(--rating) / 5 * 100%);

    display: inline-block;
    font-size: var(--star-size);
    font-family: Times; // make sure ★ appears correctly
    line-height: 1;

    &::before {
        content: "★★★★★";
        letter-spacing: 3px;
        background: linear-gradient(
            90deg,
            var(--star-on-color) var(--percent),
            var(--star-off-color) var(--percent)
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

From your controller you simply need the rounded number. At the snippet i took 3.6. You can simply replace the value with any number you want (in the snippet but naturally in your code too ;) ).

Here's a fiddle

Upvotes: 0

McRui
McRui

Reputation: 1931

I know it's a bit late but here's my way of doing it.

In Laravel 6+ | 7+ blade (may work on earlier versions also) with Font Awesome 5 and with a base of 5 (five) stars do display:

Note: the $review->average comes as a float with two decimal points: e.g. 4.70

{{--Start Rating--}}
@for ($i = 0; $i < 5; $i++)
    @if (floor($review->average) - $i >= 1)
        {{--Full Start--}}
        <i class="fas fa-star text-warning"> </i>
    @elseif ($review->average - $i > 0)
        {{--Half Start--}}
        <i class="fas fa-star-half-alt text-warning"> </i>
    @else
        {{--Empty Start--}}
        <i class="far fa-star text-warning"> </i>
    @endif
@endfor
{{--End Rating--}}

I hope it still helps anyone finding a solution for float-based rating values.

Upvotes: 6

Minan
Minan

Reputation: 887

I think it could work

<div class="rating">
    @for($i = 0; $i < 5; $i++)
        <span><i class="fa fa-star{{ $nr <= $i ? '-o' : '' }}"></i></span>
    @endfor
</div>

Upvotes: 0

spartyboy
spartyboy

Reputation: 426

//convert the star achieved to integer

<?php $stars = $rating; $stars = round($stars,0)?>

//loop through the stars the user has, lets say you had 3 stars out of 5 this loop gets the 3 stars in greeen colour while the next loop gets the star in white meaning lost star rating

@for($i= 1;$i<=$stars;$i++)
    @if($i>5)
        @break(0);
    @endif
    <i class="fa fa-star" style="color: @if($stars<3) yellow @else green @endif"></i>
@endfor
//loop to get the star the user lost
    @if(5-$stars > 0)
        @for($i= 1;$i<=5-$stars;$i++)
            <i class="fa fa-star"></i>
        @endfor
    @endif
@endif

Upvotes: 1

Related Questions