Mostrar estrella en el front end según la clasificación

He creado un campo en backend donde el botón de opción selecciona la calificación del producto como 1 estrella, 2 estrellas, 3 estrellas, 4 estrellas y 5 estrellas.

En el frente cuando se muestra el mismo

Expert Rating - prodDet->v_child_safety?>

Muestra la calificación en forma numérica como: 1 estrella, 2 estrellas, 3 estrellas, 4 estrellas y 5 estrellas.

¿Puede alguien orientar sobre la mejor manera de tener un front-end mostrar una estrella como calificación en lugar de valor numérico sin hacer que la carga de la página sea lenta?

Esto no está duplicado . Solo quiero que los usuarios vean la calificación de tipo de estrella al final. No pueden modificar la calificación o agregar una calificación, es solo que el administrador asigna una calificación de 1 a 5 estrellas y se puede ver en el frente Ahora, en lugar de valor numérico como 2 estrellas o 3 estrellas quiero que las estrellas se muestren en

Gracias

Primero, asegúrese de que $this->prodDet->v_child_safety solo devuelva un número. Entonces, en lugar de 1 estrella, 2 estrellas, debería simplemente devolver 1, 2, 3, etc. Luego, reemplace su código con esto:

 < ?php $stars = (int)$this->prodDet->v_child_safety; $count = 1; $result = ""; for($i = 1; $i < = 5; $i++){ if($stars >= $count){ $result .= ""; } else { $result .= ""; } $count++; } ?> 

Expert Rating - < ?php echo $result?>

Si desea usar imágenes de una estrella en su lugar, use este código:

 < ?php $stars = (int)$this->prodDet->v_child_safety; $result = ""; for($i = 1; $i < = $stars; $i++){ $result .= ""; } ?> 

Expert Rating - < ?php echo $result?>

Esta solución usa botones de radio ocultos. La etiqueta se presenta como una estrella gracias a fontAwesome. El valor de la estrella se puede enviar a su script PHP o puede establecer la estrella correcta en función de cualquier valor que tenga.

 input[type="radio"] { display: none; } label { display: inline-block; } input[type="radio"]:checked+label { cursor: default; color: red; } 
  

Use la condición a continuación en cada entrada:

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

y use disabled para deshabilitar todas las entradas para que nadie pueda cambiar el valor si solo desea mostrar la calificación.

 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'; } 
 

Expert Rating