Jump to content

FieldtypeStarRating

Raymond Geerts

By Raymond Geerts
in Modules/Plugins

 Share

Recommended Posts

Raymond Geerts Sr. Member

Raymond Geerts

Posted
Posted

FieldtypeStarRating

Module for ProcessWire - Field that stores an integer by using a star rating interface.

Current version: 1.0.0

Module page: http://modules.processwire.com/modules/fieldtype-star-rating/

Github: https://github.com/Rayden/FieldtypeStarRating

To install

Copy to /site/modules/ and go to Admin > Modules > Check for new modules.

Tested on ProcessWire 2.6.2 dev

Usage back-end

Create a new field with the fieldtype Star Rating. Set the amount of stars you want to show, by default it is set to 5 stars.

post-694-0-39342600-1433446071_thumb.png

Assign the field to any template. Now you can set the field value by selecting any of the 5 stars. The number saved to the database equals the number of stars that are highlighted.

post-694-0-83970400-1433446073_thumb.png

Hovering the stars will show a reset icon, which will reset the value to 0 by clicking on it.

post-694-0-70713100-1433446072_thumb.png

  • Like 14
  • 2 weeks later...
bernhard Hero Member

bernhard

Posted
Posted

looks very nice!

like albert asked on the module page i would also be curious if this module is only thought to be used in the backend?

  • Like 1
Raymond Geerts Sr. Member

Raymond Geerts

Posted
  • Author
Posted

As requested an example on how to output the star rating on the front-end. This one is based on Font Awesome, but you can adept this to any font or even plain images if you prefer.

<?php

/**
 * Small example output for FieldtypeStarRating on the front-end
 *
 */

?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title><?php echo $page->title; ?></title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <style>
      .star {
        color: #d9d9d9;
      }
      .star.selected {
        color: #FFAE00;
      }
    </style>
  </head>
  <body>
    <h1><?php echo $page->title; ?></h1>
    <span>
<?php

  $star_count = $fields->star_rating_field->star_count;

  for ($i = 1; $i <= $star_count; $i++) {

      if ($i <= $page->star_rating_field) {
        echo "<span class='fa fa-star star selected'></span>";
      }
      else {
        echo "<span class='fa fa-star star'></span>";
      }
  }

?>
    </span>
    <?php if($page->editable()) echo "<p><a href='$page->editURL'>Edit</a></p>"; ?>
  </body>
</html>
  • Like 1
bernhard Hero Member

bernhard

Posted
Posted

thank you raymond,

so it looks like there is no javascript/ajax magic built in like it is for example in the comments fieldtype. that would be awesome - although i have no need for either your current version or with ajax voting :)

  • Like 1
  • 1 year later...
MilenKo Sr. Member

MilenKo

Posted
Posted

Hello. As far as my coding skills allows to understand, the example from Raymond Geerts would make the star number to appear rather then allow the user/visitors to rate a page content. Does anyone have implemented similar functionality for the frontend using FieldTypeStarRating?

  • 1 year later...
rareyush Full Member

rareyush

Posted
Posted 
$rating = $item->rating;

	for ($i = 1; $i <= $rating; $i++) {

      if ($i <= $page->rating) {
        $rate = "<span class='fa fa-star star selected '> </span>";
      }
      else {
        $rate = "<span class='fa fa-star'> </span>";
      }
  }

 

I am using this and and I can see only 1 star everywhere, where i am wrong???

Gary Austin Jr. Member

Gary Austin

Posted
Posted
8 minutes ago, rareyush said: 

$rating = $item->rating;

	for ($i = 1; $i <= $rating; $i++) {

      if ($i <= $page->rating) {
        $rate = "<span class='fa fa-star star selected '> </span>";
      }
      else {
        $rate = "<span class='fa fa-star'> </span>";
      }
  }

 

I am using this and and I can see only 1 star everywhere, where i am wrong???

Assuming $rate is the final string you will output later, you need to set $rate="" before loop and use $rate .= "<sp...." in the loops.  the '.=' is the key.

  • Like 2
rareyush Full Member

rareyush

Posted
Posted
1 hour ago, Gary Austin said:

Assuming $rate is the final string you will output later, you need to set $rate="" before loop and use $rate .= "<sp...." in the loops.  the '.=' is the key.

thanks it worked. 

  • 1 year later...
BenSlayers Sr. Member

BenSlayers

Posted
Posted (edited)

Hello, I've used this module on a few sites in the past but recently tried using it inside a repeater (to reduce the number of unnecessary pages) and I'm having an issue. If I add a new repeater item, I can't select the rating until I save the page. I can see the stars when I hover but if I select a rating, it just goes back to the greyed-out stars. Is there a quick fix for this? I wasn't sure if this issue was only happening with my installation but I just tried it on another website and had the exact same problem. All suggestions are welcome - thanks!

Edit: I've also noticed that once I have set the value of the star rating inside my repeater item and save the page, if I try to go back in and change the value, it won't let me. 

Edited by Ben Sayers
More details regarding the issue
Robin S Hero Member

Robin S

Posted
Posted
On 10/29/2019 at 7:15 AM, Ben Sayers said:

Hello, I've used this module on a few sites in the past but recently tried using it inside a repeater (to reduce the number of unnecessary pages) and I'm having an issue.

@Ben Sayers, I created a pull request with a fix for this issue: https://github.com/Rayden/FieldtypeStarRating/pull/1

In the meantime you could update InputfieldStarRating.js with the code from here and do a hard refresh in your browser to clear the cache.

  • Like 1
BenSlayers Sr. Member

BenSlayers

Posted
Posted
6 hours ago, Robin S said:

In the meantime you could update InputfieldStarRating.js with the code from here and do a hard refresh in your browser to clear the cache.

Thanks @Robin S, that did the trick!

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...