Jump to content
Raymond Geerts

FieldtypeStarRating

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

since it is a Inputfield it should be possible to use it with the API on a own form -right?

$field = $modules->get("InputfieldStarRating");

regards mr-fan

  • Like 2

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
$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???

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 SayersI 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.

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...