Hi, I would like to replace the star ratings from a drop down list to the traditional star ratings that you just hover over the stars and click the star you want to rate. Is this easy to replace and if not to difficult could you explain how i can replace the star ratings?
Thank You
Hello David,
I applied star rating and wanted to ask if it is possible the default position to be empty stars and not 5 star rated as it is now and also the rating to be applied when you click on the star.
David who asked and David who replied thank you
Cheers
Steve
David,
One thing first, I took a look at the page you linked to above and it does not allow me to rate the product as it already has a 5 star rating but i was not the one who rated it.
Why does it not allow me to rate the product?
Hi Steve,David;
I've created a 0 rating image so that the system can default to no rating selected initially - David - even though defaulting to 5 stars initially it should have allowed a click on the image to change the rating - if that's still not working for you let me know what browser you're using and I'll check that out further.
You'll need a 0.gif image, save to your local /images/ folder:
http://www.webpricecheck.co.uk/images/0.gif
With this in place, default to 0 using:
<input type='hidden' name='rating' id='rating' value='0' />
<img id='ratingImage' src='<?php print $config_baseHREF; ?>images/0.gif' />With the rating defaulting to zero; it's probably best to alert and prevent form submission if a rating has not been selected. To do this; look for the existing onClick handler for the Submit button around line 91 (after above modification) :
onclick='JavaScript:document.getElementById("confirm").value=document.getElementById("rating").value;'>
>...and REPLACE with:
onclick='JavaScript:document.getElementById("confirm").value=document.getElementById("rating").value; if ($("#rating").val()==0) { alert("Please select your rating");return false; }'Steve -
I'll follow up later regarding auto-submission as there's a few changes required in addition to simply triggering .submit() on the form on click...
Cheers,
David.
--
PriceTapestry.com
Grateful David,
I have applied all the changes.
Waiting for your reply concerning auto-submission.
Cheers
Steve
Hi David, I have just tried it again in 3 different browsers. FireFox, Chrome and Safari and was not able to rate the product using any of the browsers. The only thing different this time is that the stars are now grayed instead of being yellow.
Thank You.
Hi David,
I've modified the code slightly to calculate the click position based on the image only rather than the parent DIV - have a go with;
<input type='hidden' name='rating' id='rating' value='0' />
<img id='ratingImage' src='<?php print $config_baseHREF; ?>images/0.gif' />
<script type='text/JavaScript'>
$('#ratingImage').click(function(event)
{
var offset = $(this).offset();
var x = event.pageX - offset.left;
s = 12; // spacing between stars
r = Math.ceil(x / s); // calculate rating
if (r < 1) r = 1; // limit to minimum rating
if (r > 5) r = 5; // limit to maximum rating
var src = '<?php print $config_baseHREF; ?>images/'+r+'.gif';
$('#ratingImage').attr('src', src);
$('#rating').val(r);
});Steve - to enable auto-submit (with delay so that the selected star rating shows briefly), first the submit flag needs to be renamed as it conflicts with the submit() function, so firstly in reviews.php look for the following code at line 8:
if (isset($_POST["submit"]))...and REPLACE with:
if (isset($_POST["ratingSubmit"]))And then correspondingly in html/ratings.php look for the following code around line 100:
<input type='hidden' name='submit' value='1' />..and REPLACE with:
<input type='hidden' name='ratingSubmit' value='1' />The form also needs an id so look for the following code at line 39:
<form method='post'>...and REPLACE with:
<form id='ratingForm' method='post'>Then finally in the new star rating code, where you have at the last line:
$('#rating').val(r);...REPLACE with:
$('#rating').val(r);
$('#confirm').val($('#rating').val());
window.setTimeout(function(){$('#ratingForm').submit();},1000);The constant 1000 is the delay in milliseconds between the click event and submit so you might want to experiment and reduce or increase this for the best effect.
Hope this helps!
Cheers,
David
--
PriceTapestry.com
Hello David,
I have applied the changes and modified the delay at 4000.
My problem is that the critics are not saved and not applied.
Despite the fact that I did not receive the notification email, I checked at the admin panel ->Critics and could not find them even there
I would appreciate your help
Cheers
Steve
Sorry Steve,
There is an additional line required immediately before the auto-submit trigger; corrected in the final REPLACEment above...
Cheers,
David.
--
PriceTapestry.com
Hi David,
A basic click to select star rating is straight forward - edit html/ratings.php and look for the existing drop-down code beginning at line 57:
<select name='rating' id='rating'><option value='5'>{code saved}</option>
</select>
...and REPLACE with:
<input type='hidden' name='rating' id='rating' value='5' /><img id='ratingImage' src='<?php print $config_baseHREF; ?>images/5.gif' />
<script type='text/JavaScript'>
$('#ratingImage').click(function(event)
{
var parentOffset = $(this).parent().offset();
var x = event.pageX - parentOffset.left;
x -= 15; // X offset within div to first star
var s = 12; // spacing between stars
var r = Math.ceil(x / s); // calculate rating
if (r < 1) r = 1; // limit to minimum rating
if (r > 5) r = 5; // limit to maximum rating
var src = '<?php print $config_baseHREF; ?>images/'+r+'.gif';
$('#ratingImage').attr('src', src);
$('#rating').val(r);
});
</script>
I've conditionally enabled this on the demo site for the following product...
http://www.webpricecheck.co.uk/review/LG-55EC930V.html
Hope this points you in the right direction!
Cheers,
David.
--
PriceTapestry.com