\n\/YourSite\/includes\/templates\/YourTemplate\/css<\/strong><\/p>\n
\/* \r\n------------------------------- \r\n5 Star Rating CSS\r\n-------------------------------\r\n*\/\r\n\r\n\r\n\/* Base Style *\/\r\n.ratingRow \r\n{\r\n border-style: none;\r\n cursor:pointer;\r\n}\r\n\r\n\/* Hide star images and actual input elements *\/\r\n.ratingRow img, .ratingRow input\r\n{\r\n display:none; \r\n visible:no;\r\n}\r\n\r\n\/* Label Style *\/\r\n.ratingRow:not(:checked) > label \r\n{\r\n padding:0;\r\n font-size:200%;\r\n line-height:1.2;\r\n color:#cccccc;\r\n text-shadow: 1px 1px 0 #CFB53B;\r\n transition:all 0.5s ease;\r\n}\r\n\r\n\/* Create a 5-point star before each label *\/\r\n.ratingRow > label:before \r\n{\r\n content: '\\2605';\r\n}<\/pre>\n <\/p>\n
Step 2:\u00a0 Modify the Review Template<\/h2>\n
Add the highlighted lines to the beginning of<\/span> your review template.<\/p>\nModify tpl_product_reviews_write_default.php<\/strong> located in:
\nYourSite\/includes\/templates\/responsive_classic_mod\/templates<\/strong><\/p>\n<?php\r\n\/**\r\n * Page Template\r\n *\r\n * @package templateSystem\r\n * @copyright Copyright SomeStuff\r\n * @copyright Portions Copyright SomeStuff\r\n * @license SomeStuff\r\n * @version SomeStuff\r\n *\/\r\n?>\r\n\r\n<script type=text\/javascript><!--\r\nfunction zzmouse(zzhov) {\r\n for (i = 1; i < 6; i++) {\r\n var zzlbl=document.getElementById(\"zz\"+i);\r\n\r\n if (i<=zzhov) {\r\n zzlbl.style.color=\"#FFDF00\";\r\n } else {\r\n zzlbl.style.color=\"#cccccc\";\r\n }\r\n } \r\n}\r\n\r\nfunction zzmouseout() {\r\n var zzhov=0;\r\n\r\n for (i=1; i < 6; i++) {\r\n var zzele=document.getElementById(\"rating-\"+i);\r\n if (zzele.checked) zzhov=i;\r\n }\r\n\r\n zzmouse(zzhov);\r\n}\r\n--><\/script><\/span><\/pre>\n <\/p>\n
Step 3: Modify the Form Option Elements in the Review Template<\/h2>\n
Modify tpl_product_reviews_write_default.php<\/strong> located in:
\nYourSite\/includes\/templates\/responsive_classic_mod\/templates<\/strong><\/p>\nLocate the indicated lines, and add the indicated code.<\/p>\n
<div class=\"ratingRow\">\r\n<?php echo zen_draw_radio_field('rating', '1', '', 'id=\"rating-1\"'); ?>\r\n<?php echo '<label class=\"\" id=\"zz1\"<\/span> for=\"rating-1\" onmouseover=\"zzmouse(1)\" onmouseout=\"zzmouseout()\"<\/span>>' . 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> '; ?>\r\n\r\n<?php echo zen_draw_radio_field('rating', '2', '', 'id=\"rating-2\"'); ?>\r\n<?php echo '<label class=\"\" id=\"zz2\"<\/span> for=\"rating-2\" onmouseover=\"zzmouse(2)\" onmouseout=\"zzmouseout()\"<\/span>>' . 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>'; ?>\r\n\r\n<?php echo zen_draw_radio_field('rating', '3', '', 'id=\"rating-3\"'); ?>\r\n<?php echo '<label class=\"\" id=\"zz3\"<\/span> for=\"rating-3\" onmouseover=\"zzmouse(3)\" onmouseout=\"zzmouseout()\"<\/span>>' . 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>'; ?>\r\n\r\n<?php echo zen_draw_radio_field('rating', '4', '', 'id=\"rating-4\"'); ?>\r\n<?php echo '<label class=\"\" id=\"zz4\"<\/span> for=\"rating-4\" onmouseover=\"zzmouse(4)\" onmouseout=\"zzmouseout()\"<\/span>>' . 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>'; ?>\r\n\r\n<?php echo zen_draw_radio_field('rating', '5', '', 'id=\"rating-5\"'); ?>\r\n<?php echo '<label class=\"\" id=\"zz5\"<\/span> for=\"rating-5\" onmouseover=\"zzmouse(5)\" onmouseout=\"zzmouseout()\"<\/span>>' . 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>'; ?>\r\n<\/div><\/pre>\n <\/p>\n
Why?<\/h2>\n
The default user experience is a bunch of radio buttons, each with an image of the corresponding “star” rating.<\/p>\n
![\"\"](\"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-content\/uploads\/DefaultExperience.png\")
<\/p>\n
<\/p>\n
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”.\u00a0 In addition, the star functionality includes behavior that allows the user to hover over a particular star, and be provided visual feedback.<\/p>\n
Here is the enhanced user experience:<\/p>\n
![\"\"](\"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-content\/uploads\/EnhancedExperience.png\")
<\/p>\n
<\/p>\n
Enhanced Functionality:<\/p>\n
\n- Hides the label, image, and radio button, and replaces it with a 5-point star symbol<\/li>\n
- Hovering over a star fills each star to the left in gold, including the hover star<\/li>\n
- Clicking a star results in each star to the left of the selected star being filled in gold, including the selected star<\/li>\n
- Internally, this sets the ‘rating’ form field<\/li>\n<\/ul>\n
<\/p>\n
Why isn’t this posted on Zen-Cart’s Forum?<\/h2>\n
BECAUSE I COULD NOT, FOR THE LIFE OF ME, FIGURE OUT WHERE TO POST IT.<\/p>\n
AND, I DON’T HAVE TIME TO SCREW AROUND TRYING TO FIGURE OUT A BUNCH OF FORUM RULES<\/p>\n
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?\u00a0 Really?<\/p>\n
I googled multiple times for a suitable answer, and in the end, I had to create my own.\u00a0 So here it is.\u00a0 You’re welcome to use it.<\/strong><\/p>\n<\/pre>\n <\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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… <\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-4207","post","type-post","status-publish","format-standard","hentry","category-zen-cart-stuff"],"_links":{"self":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/4207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/comments?post=4207"}],"version-history":[{"count":5,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/4207\/revisions"}],"predecessor-version":[{"id":4214,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/4207\/revisions\/4214"}],"wp:attachment":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/media?parent=4207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/categories?post=4207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/tags?post=4207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}