VirtueMart Version: 3.2.14
Joomla Version: 3.8.7
I am having an issue with the ratings display when creating a product review. I really hope someone can help and suggest a CSS fix. Long story short, I changed my layout for the product details page to a "tabs style" layout. I have tabs for description / reviews / related.
The problem is specifically how the 5 stars display when creating a review and clicking on how many starts you want to give it. As soon as you move the mouse over the stars to select one, it shows them across the whole page (see screenshot).
I cannot identify a CSS resolution to fix it! Can anyone help?
NOTE: I have discovered that the issue may be related to the following:
When hovering over a star to select the rating, the "value" loaded STARTS at 25 (for 1 star)... Therefore, the five star values are: 26 / 27 / 28 / 29 / 30.
<input type="hidden" id="vote" value="26" name="vote">
So, I am trying to find a way in the code for file default_reviews.php to basically set the $maxrating variable to ($maxrating - 25). However, I do not know enough about coding to make that happen. Here is the portion of code that I need to change the calculation in:
// Customer Reviews
$review_editable = true;
if ($this->allowRating || $this->allowReview || $this->showRating || $this->showReview) {
$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>';
}
Anyone able to show me the correct way to change that code to alter the $maxrating variable?
The issue could be with your template/overrides because protostar works fine http://urlstage.com/silicone-tape/silicone-tape?template=protostar.
The value is correct (5) on page load. Only increases when hovering over input.
Hmmm, I do see that... I have built my site from the ground up, so all the overrides and CSS are my own.
For that matter, this comes down to my "default.php" from the "productdetails" folder. All I did was to create a tabs section and then move the description into its tab and the reviews into its tab.
I will continue to play with that file to see if I can identify the exact problem.
Alright, I figured it out with some trial and error. Although, I have no idea what this little line does...
In my tabs section (tab2), directly underneath where I load the reviews template, I had to put this:
echo vmJsApi::writeJS();
Therefore, in my tab, this is the complete (working) code now:
<?php
echo $this->loadTemplate('reviews');
echo vmJsApi::writeJS();
?>
I really don't know why the display breaks without that little line, but it does. All is perfect now though!