Hi there everyone,
I'm currently facing an issue on a web store that I manage and if someone could please, please give me some hints since I think I'm very close to a solution.
Joomla version: Joomla! 3.8.7 Stable [ Amani ] 18-April-2018 14:00 GMT
Virtuemart version: VirtueMart 3.2.4
The problem has to do with ratings, product ratings. Guests can't give ratings, so I posted screenshots of the issue alongside code inspector window to clarify everything further.

So this is how the ratings page looks like when you open it up at first. There's 5 stars selected, width is 120px and value for the underlying input box is 5, as it should be.

After I make a selection for star number 2, everything goes haywire. Width jumps to 432px, value of the selection to 18....

Now I googled, searched, looked for solutions and tried applying them, but nothing helped.
This is how corresponding code in
templates/mytemplate/html/com_virtuemart/productdetails/default_reviews.php looks like:
$maxrating = VmConfig::get( 'vm_maximum_rating_scale', 5 );
$ratingsShow = VmConfig::get( 'vm_num_ratings_show', 3 ); // TODO add vm_num_ratings_show in vmConfig
$stars = array();
//$showall = vRequest::getBool( 'showall', FALSE );
$ratingWidth = $maxrating*24;
for( $num = 0; $num<=$maxrating; $num++ ) {
$stars[] = '
<span title="'.(vmText::_( "COM_VIRTUEMART_RATING_TITLE" ).$num.'/'.$maxrating).'" class="vmicon ratingbox" style="display:inline-block;width:'. 24*$maxrating.'px;">
<span class="stars-orange" style="width:'.(24*$num).'px">
</span>
</span>';
}
Here's the jquery code that actually does the work when you go with the mouse over the start, at least that's how I understood:
<?php
$reviewJavascript = "
jQuery(function($) {
var steps = ".$maxrating.";
var parentPos= $('.rating .ratingbox').position();
var boxWidth = $('.rating .ratingbox').width();// nbr of total pixels
var starSize = (boxWidth/steps);
var ratingboxPos= $('.rating .ratingbox').offset();
jQuery('.rating .ratingbox').mousemove( function(e){
var span = jQuery(this).children();
var dif = e.pageX-ratingboxPos.left; // nbr of pixels
difRatio = Math.floor(dif/boxWidth* steps )+1; //step
span.width(difRatio*starSize);
$('#vote').val(difRatio);
//console.log('note = ',parentPos, boxWidth, ratingboxPos);
});
});
";
vmJsApi::addJScript( 'rating_stars', $reviewJavascript );
}
// Writing A Review
if ($this->allowReview and $review_editable) {
?>
I tried playing around with settings above, and I can get a lot of different results, just not the correct ones, heh.
I also read that the problem is to do with jquery not working properly, so in the admin area I tried enabling/disabling virtuemart jquery/google jquery scrpts, etc... nothing helped.
I'm not a programmer, so if someone could please give me some hints I would be extremely thankful...