Zen Cart – Javascript + CSS Star Rating System

Posted by Justin A. Parr on December 3, 2017
Posted in: Zen Cart Stuff. Leave a Comment

The default star rating system in zen cart, for registered users who post a review, is less than spectacular.

Here is how to fix it with CSS + Javascript

Read on…

 

Applies To:

Zen Cart 1.5.5

 

Step 1:  Modify Your Template Style Sheet

Add the following to the end of your stylesheet.css, located in:
/YourSite/includes/templates/YourTemplate/css

/* 
------------------------------- 
5 Star Rating CSS
-------------------------------
*/


/* Base Style */
.ratingRow 
{
    border-style: none;
    cursor:pointer;
}

/* Hide star images and actual input elements */
.ratingRow img, .ratingRow input
{
    display:none; 
    visible:no;
}

/* Label Style */
.ratingRow:not(:checked) > label 
{
    padding:0;
    font-size:200%;
    line-height:1.2;
    color:#cccccc;
    text-shadow: 1px 1px 0 #CFB53B;
    transition:all 0.5s ease;
}

/* Create a 5-point star before each label */
.ratingRow > label:before 
{
 content: '\2605';
}

 

Step 2:  Modify the Review Template

Add the highlighted lines to the beginning of your review template.

Modify tpl_product_reviews_write_default.php located in:
YourSite/includes/templates/responsive_classic_mod/templates

<?php
/**
 * Page Template
 *
 * @package templateSystem
 * @copyright Copyright SomeStuff
 * @copyright Portions Copyright SomeStuff
 * @license SomeStuff
 * @version SomeStuff
 */
?>

<script type=text/javascript><!--
function zzmouse(zzhov) {
    for (i = 1; i < 6; i++) {
        var zzlbl=document.getElementById("zz"+i);

        if (i<=zzhov) {
            zzlbl.style.color="#FFDF00";
        } else {
            zzlbl.style.color="#cccccc";
        }
    } 
}

function zzmouseout() {
    var zzhov=0;

    for (i=1; i < 6; i++) {
        var zzele=document.getElementById("rating-"+i);
        if (zzele.checked) zzhov=i;
    }

    zzmouse(zzhov);
}
--></script>

 

Step 3: Modify the Form Option Elements in the Review Template

Modify tpl_product_reviews_write_default.php located in:
YourSite/includes/templates/responsive_classic_mod/templates

Locate the indicated lines, and add the indicated code.

<div class="ratingRow">
<?php echo zen_draw_radio_field('rating', '1', '', 'id="rating-1"'); ?>
<?php echo '<label class="" id="zz1" for="rating-1" onmouseover="zzmouse(1)" onmouseout="zzmouseout()">' . 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="" id="zz2" for="rating-2" onmouseover="zzmouse(2)" onmouseout="zzmouseout()">' . 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="" id="zz3" for="rating-3" onmouseover="zzmouse(3)" onmouseout="zzmouseout()">' . 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="" id="zz4" for="rating-4" onmouseover="zzmouse(4)" onmouseout="zzmouseout()">' . 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="" id="zz5" for="rating-5" onmouseover="zzmouse(5)" onmouseout="zzmouseout()">' . 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>

 

Why?

The default user experience is a bunch of radio buttons, each with an image of the corresponding “star” rating.

 

Most users are conditioned by large online sites to expect a more simplified user experience, where the user is simply presented with 5 empty stars, and they can click the particular star to record their “star rating”.  In addition, the star functionality includes behavior that allows the user to hover over a particular star, and be provided visual feedback.

Here is the enhanced user experience:

 

Enhanced Functionality:

  • Hides the label, image, and radio button, and replaces it with a 5-point star symbol
  • Hovering over a star fills each star to the left in gold, including the hover star
  • Clicking a star results in each star to the left of the selected star being filled in gold, including the selected star
  • Internally, this sets the ‘rating’ form field

 

Why isn’t this posted on Zen-Cart’s Forum?

BECAUSE I COULD NOT, FOR THE LIFE OF ME, FIGURE OUT WHERE TO POST IT.

AND, I DON’T HAVE TIME TO SCREW AROUND TRYING TO FIGURE OUT A BUNCH OF FORUM RULES

I applaud the efforts of the zen-cart folks, and the moderators, but seriously, I signed up, I have a login, but I can’t post anything?  Really?

I googled multiple times for a suitable answer, and in the end, I had to create my own.  So here it is.  You’re welcome to use it.



 


 

	


			
	

				



	
				

		
Leave a Reply