Для инфоблока с отзывами добавляем свойство Рейтинг типа "Строка" (допустим его id - 75).
Тогда в template.php в case "N" (так как свойство строковое) выводим поле для данного свойства:
<?if($propertyID == "75"):?> <div class="col-12 text-center" style="order: 1">
<span class="rating"></span>
<input type="text" id="ratingVal" placeholder="" name="PROPERTY[<?=$propertyID?>][<?=$i?>]" size="<?=$arResult["PROPERTY_LIST_FULL"][$propertyID]["COL_COUNT"]; ?>" value="<?=$value?>" />
</div>
<script>
class Rating {
constructor(dom) {
dom.innerHTML = '<svg width="110" height="20"></svg>';
this.svg = dom.querySelector('svg');
for(var i = 0; i < 5; i++)
this.svg.innerHTML += `<polygon data-value="${i+1}"
transform="translate(${i*22},0)"
points="10,1 4,19.8 19,7.8 1,7.8 16,19.8">`;
this.svg.onclick = e => this.change(e);
this.render();
}
change(e) {
let value = e.target.dataset.value;
value && (this.svg.parentNode.dataset.value = value);
if(typeof value !== "undefined") {
document.getElementById('ratingVal').value = value;
}
this.render();
}
render() {
this.svg.querySelectorAll('polygon').forEach(star => {
let on = +this.svg.parentNode.dataset.value >= +star.dataset.value;
star.classList.toggle('active', on);
});
}
}
document.querySelectorAll('.rating').forEach(dom => new Rating(dom));
</script> <?endif;?>
Стили для рейтинга:
#ratingVal {
display: none;
}
.rating {
order: 1;
display: block;
margin-bottom: 15px;
}
.rating polygon:hover {
cursor: pointer;
transition: 500ms;
}
.rating polygon:hover {
fill: red;
}
.rating polygon {
fill: green;
}
.rating polygon.active{
fill: red;
}