Changing Review Radio Buttons to Stars

Hi, i am using NopCommerce version 3.90.

I would like to change the radio buttons to stars that get grayed out/colored when selected.

How would i be able to achieve this?

Thanks.

Hello,

You can actually achieve that with only HTML and CSS , but you will have to change the original markup significantly. Here is an example in our Venture Theme where we achieved that:
http://themes.venture1.nop-templates.com/productreviews/36

Basically, you have to add <label> after each radio button which has an HTML "for" attribute with the id of the radio button before it. Like that:

@Html.RadioButtonFor(model => model.AddProductReview.Rating, "1", new { id = "addproductrating_1" })
<label class="vote-star" for="addproductrating_1">@T("Reviews.Fields.Rating") 1</label>

@Html.RadioButtonFor(model => model.AddProductReview.Rating, "2", new { id = "addproductrating_2" })
<label class="vote-star" for="addproductrating_2">@T("Reviews.Fields.Rating") 2</label>

@Html.RadioButtonFor(model => model.AddProductReview.Rating, "3", new { id = "addproductrating_3" })
<label class="vote-star" for="addproductrating_3">@T("Reviews.Fields.Rating") 3</label>

@Html.RadioButtonFor(model => model.AddProductReview.Rating, "4", new { id = "addproductrating_4" })
<label class="vote-star" for="addproductrating_4">@T("Reviews.Fields.Rating") 4</label>

@Html.RadioButtonFor(model => model.AddProductReview.Rating, "5", new { id = "addproductrating_5" })
<label class="vote-star" for="addproductrating_5">@T("Reviews.Fields.Rating") 5</label>

The styling, however, is trickier. You will have to set the star image as a background to each label and use CSS3 :checked selector combined with tilde ( ~ ) to get every label that is after the checked radio button and give it a different background(a blank or empty star image). Here is how the code looks in our theme:

.write-review .rating-options .vote-star {
    display: inline-block;
    width: 17px;
    height: 16px;
    background: url(star_img_url) no-repeat center;
    font-size: 0;
    margin: 0;
    cursor: pointer;
}
.write-review .rating-options input[type='radio'] {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.write-review .rating-options input[type='radio']:checked ~ label {
    background: url(blank_star_img_url) no-repeat center;
}
.write-review .rating-options input[type='radio']:checked  + label {
    background: url(star_img_url) no-repeat center;
}

I hope I was helpfull,
/Nikola