Display Star in Front End based on rating

Question

I have created a field in backend where using radio button am selecting the rating of product as 1 star, 2 star, 3 star, 4 star and 5 Star

In front end when displaying s

Answer 1

Use below condition in each input:

<?php if($this->prodDet->v_child_safety=="1 star"){?>checked="checked"<?php } ?>

and use disabled to disable all input so that no one can change value if you just want to display rating.

div.stars {
  width: 270px;
  display: inline-block;
}

input.star { display: none; }

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked ~ label.star:before {
  content: '\2605';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
  content: '\2605';
}

<p class="tool-tip"><a href="#">Expert Rating</a>
</p>
<div class="stars">
<input disabled class="star star-5" id="star-5" type="radio" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input disabled class="star star-4" id="star-4" type="radio" name="star" />
    <label class="star star-4" for="star-4"></label>
    <input disabled class="star star-3" id="star-3" type="radio" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input disabled class="star star-2" id="star-2" type="radio" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input disabled class="star star-1" id="star-1" type="radio" name="star" checked="checked"/>
    <label class="star star-1" for="star-1"></label>
</div>

Answer 2

Using this code, it's very simple and useful. Code is running successfully....

<?php 
    $select=4;
    $a=5-$select;
    $j=1;

    for ($i=1; $i<=$select; $i++) 
    { 
        echo "★"; 
        if($i==$select){
            for ($j=1; $j<=$a; $j++){
                echo "☆";
            }
        }
    }
?>

Answer 3

First, make sure $this->prodDet->v_child_safety only returns a number. So instead of 1 star, 2 star, it should just return 1, 2, 3 etc. Then replace your code with this:

<?php

$stars = (int)$this->prodDet->v_child_safety;
$count = 1;
$result = "";

for($i = 1; $i <= 5; $i++){
    if($stars >= $count){
        $result .= "<span>&#x2605</span>";
    } else {
        $result .= "<span>&#x2606</span>";
    }
    $count++;
}
?>
<p class="tool-tip"><a href="#" onMouseover="ddrivetip('Expert Rating')"; onMouseout="hideddrivetip()">Expert Rating</a> - <?php echo $result?></p>

If you want to use images of a star instead, use this code:

<?php

$stars = (int)$this->prodDet->v_child_safety;
$result = "";

for($i = 1; $i <= $stars; $i++){
    $result .= "<img src='link_to_image_here.png'/>";
}
?>
<p class="tool-tip"><a href="#" onMouseover="ddrivetip('Expert Rating')"; onMouseout="hideddrivetip()">Expert Rating</a> - <?php echo $result?></p>

Answer 4

This solution uses hidden radio buttons. The label is presented as a star thanks to fontAwesome. The value of the star can be sent to your PHP script or you can set the correct star based on any value you have.

input[type="radio"] {
  display: none;
}

label {
  display: inline-block;
}

input[type="radio"]:checked+label {
  cursor: default;
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
  <input id="star1" name="star" type="radio">
  <label for="star1"><i class="fa fa-star"></i></label>
  <input id="star2" name="star" type="radio">
  <label for="star2"><i class="fa fa-star"></i></label>
  <input id="star3" name="star" type="radio" checked>
  <label for="star3"><i class="fa fa-star"></i></label>
<!-- Use <?php echo("checked") ?> to set the correct star -->
  <input id="star4" name="star" type="radio">
  <label for="star4"><i class="fa fa-star"></i></label>
  <input id="star5" name="star" type="radio">
  <label for="star5"><i class="fa fa-star"></i></label>
</form>

Answer 5

This question is about displaying a value, not creating an input

There is a very simple way to do that supporting half stars, rounding to the closest half, using font awesome (v4 classes in code, v5 classes in comment) and some basic arithmetic

echo $rating;
echo "<span class='stars'>"
for ( $i = 1; $i <= 5; $i++ ) {
    if ( round( $rating - .25 ) >= $i ) {
        echo "<i class='fa fa-star'></i>"; //fas fa-star for v5
    } elseif ( round( $rating + .25 ) >= $i ) {
        echo "<i class='fa fa-star-half-o'></i>"; //fas fa-star-half-alt for v5
    } else {
        echo "<i class='fa fa-star-o'></i>"; //far fa-star for v5
    }
}
echo '</span>';

Change the color of the icons

.stars {
    color: #ff7501;
    font-size: 1.2em;
}

And voilà, you got yourself a rating display