Display Star in Front End based on rating

前端 未结 5 1612
名媛妹妹
名媛妹妹 2021-01-29 09:49

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

5条回答
  •  情歌与酒
    2021-01-29 10:39

    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 ""
    for ( $i = 1; $i <= 5; $i++ ) {
        if ( round( $rating - .25 ) >= $i ) {
            echo ""; //fas fa-star for v5
        } elseif ( round( $rating + .25 ) >= $i ) {
            echo ""; //fas fa-star-half-alt for v5
        } else {
            echo ""; //far fa-star for v5
        }
    }
    echo '';
    

    Change the color of the icons

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

    And voilà, you got yourself a rating display

提交回复
热议问题