Product Review Write Page Stars

[davewest]

This is more of a tip, too small to me a mod.. while modifying my tpl_product_reviews_write_default.php for responsive form design, I solved two issues I had and thought why not pass them along!

This tip is for anyone using Font Awesome on there site or wish to install it.

First of all, I have a testing server setup so I can create and test than upload to my live site. One of the pain was Font Awesome would not always work if I loaded locally form my site so I had to have the link to Font Awesome when live and link to my local copy when working off-line on design. Got the idea off the net and modified it to work for me.

Replace or add the script below the link to Font Awesome as below on your YOUR_TEMPLATE/common/html_header.php page just above the closing head tag;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">  
<script>
    (function($){
        var $span = $('<span class="fa" style="display:none"></span>').appendTo('body');
        if ($span.css('fontFamily') !== 'FontAwesome' ) {
            // Fallback Link
            $('head').append(<?php echo '\'<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'font-awesome.css' . '" />\''; ?>);
        }
        $span.remove();
    })(jQuery);
</script>

Now that you have it installed, now what! Why I've started down this patch... I finally got around to redesigning the layout of my Add Review page. It was the standard mess and not responsive at all. In making it responsive as with my other forms, I hated the old radio button rating of 1 - 5 input buttons with a 5 star image. Really an antic method that I was stuck with... But wait! looking at other sites, like Amazon, they was using a cool 5 star set of stars, not a old style radio input button! must be something I could do!

Was looking at coding something in jQuary to do it. Then looking at Font Awesome, they was displaying the same set of star's as amazon was using... turns out the coding wasn't a jQuary answer after all...

Turns out adding cool star's was as easy as adding font awesome to your site. And to top it off, stars are not the only thing you can use.. like jets, apples, bells, cars.... get the idea, any icon within the font can be used..

First you need some CSS to handle the stars create or add to YOUR_TEMPLATE/css/product_reviews_write.css page;

.rating { float:left;}
.rating:not(:checked) > input {position:absolute;top:-9999px;clip:rect(0,0,0,0);}
.rating:not(:checked) > label {float:right;width:1em;padding:0 .1em;overflow:hidden;white-space:nowrap;cursor:pointer;font-size:3em;line-height:1.2;color:#e0e0e0;}
.rating:not(:checked) > label:before {font-family: FontAwesome;content: "\f005";}
.rating > input:checked ~ label {color: #ef2929;}
.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: #f57900;}
.rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label {color: #729fcf;}

Now all that's left is to replace the old input with the new, in YOUR_TEMPLATE/template/tpl_product_reviews_write_default.php page;

Find;

<div class="ratingRow"> 
<?php echo zen_draw_radio_field('rating', '1', '', 'id="rating-1"'); ?> 
<?php echo '<label class="" for="rating-1">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_ONE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_ONE, OTHER_REVIEWS_RATING_STARS_ONE_ALT) . '</label> '; ?> 
 
<?php echo zen_draw_radio_field('rating', '2', '', 'id="rating-2"'); ?> 
<?php echo '<label class="" for="rating-2">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_TWO, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_TWO, OTHER_REVIEWS_RATING_STARS_TWO_ALT) . '</label>'; ?> 
 
<?php echo zen_draw_radio_field('rating', '3', '', 'id="rating-3"'); ?> 
<?php echo '<label class="" for="rating-3">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_THREE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_THREE, OTHER_REVIEWS_RATING_STARS_THREE_ALT) . '</label>'; ?> 
 
<?php echo zen_draw_radio_field('rating', '4', '', 'id="rating-4"'); ?> 
<?php echo '<label class="" for="rating-4">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_FOUR, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_FOUR, OTHER_REVIEWS_RATING_STARS_FOUR_ALT) . '</label>'; ?> 
 
<?php echo zen_draw_radio_field('rating', '5', '', 'id="rating-5"'); ?> 
<?php echo '<label class="" for="rating-5">' . zen_image($template->get_template_dir(OTHER_IMAGE_REVIEWS_RATING_STARS_FIVE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . OTHER_IMAGE_REVIEWS_RATING_STARS_FIVE, OTHER_REVIEWS_RATING_STARS_FIVE_ALT) . '</label>'; ?> 
</div>

And replace all of it with the following;

<div class="rating">
<?php echo zen_draw_radio_field('rating', '5', '', 'id="star5-Rating" '); ?>
<label for="star5-Rating" title="Very Best"> 5 stars</label>
<?php echo zen_draw_radio_field('rating', '4', '', 'id="star4-Rating" '); ?>
<label for="star4-Rating" title="Best"> 4 stars</label>
<?php echo zen_draw_radio_field('rating', '3', '', 'id="star3-Rating" '); ?>
<label for="star3-Rating" title="Good"> 3 stars</label>
<?php echo zen_draw_radio_field('rating', '2', '', 'id="star2-Rating" '); ?>
<label for="star2-Rating" title="Bad"> 2 stars</label>
<?php echo zen_draw_radio_field('rating', '1', '', 'id="star1-Rating" '); ?>
<label for="star1-Rating" title="Pretty Bad"> 1 stars</label>
</div>

The stars are radio inputs so the back end code stays the same, the only thing changing is the input radio buttons. The change in order and labels are needed for text readers and touch which makes things work for touch screens like phones..

Now all you need to do is redesign that boring review page, you have lots of space now! You can checkout how I did my page, I have guest checkouts so guest reviews are allowed.