Jump to content

Robin S
 Share

Recommended Posts

This isn't the first star rating module for ProcessWire, but I wanted some particular config options and to have the inputfield be usable within FormBuilder.

FieldtypeStars

The inputfield of FieldtypeStars uses a star rating interface to set a float value. The fieldtype extends FieldtypeFloat.

The inputfield has no external dependencies such as jQuery or Font Awesome and can be used in FormBuilder.

Stars inputfields

Config

Stars config

Using InputfieldStars in FormBuilder

In order to add a Stars field to a FormBuilder form you must first enable "Stars" in the "Allowed Input Types" field in the FormBuilder module config.

 

https://github.com/Toutouwai/FieldtypeStars
https://processwire.com/modules/fieldtype-stars/

  • Like 22
  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...
5 minutes ago, sebr said:

I try to use this inputField in a formBuilder form but not working.

All stars are always highlighted and I cannot select anything. I embed the formwith "Option C : Preferred Embed" and I use the last formBuilder version.

Any idea ?

Are there any JS errors in the browser console?

I just tested it with embed option C and it's working for me here.

Link to comment
Share on other sites

Yes it's what I have in the head :

<script type='text/javascript' src='/wire/modules/Jquery/JqueryCore/dev/JqueryCore.js'></script>
<script type='text/javascript' src='/wire/modules/Inputfield/InputfieldPage/InputfieldPage.js?v=108-1652442848'></script>
<script type='text/javascript' src='/site/modules/FieldtypeStars/rater-js/rater-js.js?v=0.1.0'></script>
<script type='text/javascript' src='/site/modules/FieldtypeStars/InputfieldStars.js?v=0.1.0-1674572287'></script>
<script type='text/javascript' src='/wire/templates-admin/scripts/inputfields.min.js'></script>
<script type='text/javascript' src='/site/modules/FormBuilder/form-builder.js'></script>

On Chrome, on mouse over the title is the right rating, but no color change on stars

Link to comment
Share on other sites

@Robin S In fact it's very strange. The DOM contains 2 x div.star-value for each star field :

<div class="rater star-rating" data-settings="{&quot;starsNumber&quot;:5,&quot;allowHalf&quot;:&quot;0&quot;,&quot;starSize&quot;:32,&quot;starColor&quot;:&quot;#ffbc00&quot;}" style="width: 160px; height: 32px; mask-size: 32px 32px;" title="3/5">
	<div class="star-value" style="background-size: 32px; mask-size: 32px 32px; background-color: rgb(255, 188, 0); width: 0%;"></div>
	<div class="star-value" style="background-size: 32px; mask-size: 32px 32px; background-color: rgb(255, 188, 0);"></div>
</div>

 

Link to comment
Share on other sites

I don't why.

The I updated `InputfieldStars.js` with a simple test on `el` children on foreach(el):

document.addEventListener('DOMContentLoaded', function () {
	document.querySelectorAll('.InputfieldStars .rater').forEach((el) => {
      	// NEW check
		if (el.children.length === 0) {
			let input = el.parentElement.previousElementSibling;
			let settings = JSON.parse(el.dataset.settings);
			let step = settings.allowHalf === 0 ? 0.5 : 1;

			// Initialise rater
			let myRater = raterJs({
				element: el,
				rating: parseFloat(input.value),
				max: settings.starsNumber,
				starSize: settings.starSize,
				step: step,
				color: settings.starColor,
				rateCallback: function rateCallback(rating, done) {
					this.setRating(rating);
					input.value = rating;
					done();
				},
			});

			// Clear button
			let clearButton = el.nextElementSibling;
			clearButton.addEventListener('click', function () {
				myRater.clear();
				input.value = '';
			});
		}
	});
});

 

Link to comment
Share on other sites

1 hour ago, sebr said:

The DOM contains 2 x div.star-value for each star field

It sounds like maybe you have included the scripts twice, or somehow DOMContentLoaded is firing twice, which is strange. But in any case it won't hurt for the module to check if the inputfield is already initialised so I've added that in v0.1.1.

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
Quote

This isn't the first star rating module for ProcessWire

There is actually no working frontend user rating module existing currently, correct?

This field works great for other purposes, but is not suitable as a frontend star rating module, is it?

Link to comment
Share on other sites

It works to allow the user to do the rating - perhaps you're not loading all the required assets?

    <link href="/site/modules/FieldtypeStars/InputfieldStars.css" rel="stylesheet" />
    <script src="/site/modules/FieldtypeStars/rater-js/rater-js.js"></script>
    <script src="/site/modules/FieldtypeStars/InputfieldStars.js"></script>

 

Link to comment
Share on other sites

11 hours ago, adrian said:

It works to allow the user to do the rating

Really? Isn't this field basically a nicely decorated number field, storing only 1 value? It outputs as "5" in my frontend. (Maybe I got the concept wrong?)

That has a value of its own, and I start using it in forms.

What I'm looking for now, is a mix of these stars and the Pro module "Likes" from @ryan. So a user can not only "like" but also rate with one click. And I have the total number of voters with the average rating, which can then be submitted for SEO as rich content. "Likes" also has a simple fraud protection. Too bad, "Likes" seems not to be in development any more. User interaction becomes more and more important with SEO. (Or like the "Comments"-Field but only with the rating - textual comments can be a pain -  but "Likes" is so cool because it's just 1 click and not a form.)

Link to comment
Share on other sites

  • 5 months later...

Could you give a more complete example of how to use this on the front end? Do I have to format the input field in a certain way? Does it have to be of type text? number? Do I have to put certain classes on the field to make it do it's magic?

Matt

Link to comment
Share on other sites

16 hours ago, msavard said:

Could you give a more complete example of how to use this on the front end?

This is a ProcessWire Fieldtype/Inputfield module so use on the frontend isn't something that's supported directly. If you have FormBuilder then the readme explains how to enable InputfieldStars for FormBuilder.

If you are using the PW forms API for the frontend then it's really beyond the scope of this module support topic, but you can refer to forum topics like this:

Essentially you would do something like this:

/** @var InputfieldForm $form */
$form = $modules->get('InputfieldForm');

/** @var InputfieldStars $f */
$f = $modules->get('InputfieldStars');
$f->name = 'stars';
$f->label = 'Stars';
$form->add($f);

echo $form->render();

Plus seeing as you are outside the PW admin the inputfield-specific JS and CSS are not going to be automatically included so you'll need to add them to your template file manually:

<link href="/site/modules/FieldtypeStars/InputfieldStars.css" rel="stylesheet">
<script src="/site/modules/FieldtypeStars/rater-js/rater-js.js"></script>
<script src="/site/modules/FieldtypeStars/InputfieldStars.js"></script>

 

  • Like 2
Link to comment
Share on other sites

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

×
×
  • Create New...