FieldtypeStars

[Robin S]

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.

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/

[adrian]

Thanks @Robin S - very timely - I am making use of this in a custom frontend form today!

[fuzenco]

@Robin S amazing addition. The half stars is much appreciated too. Have a great weekend!

Question: Are we able to use this module to read said field too, or is it simply for capturing a star rating?

[sebr]

Thanks a lat @Robin S.

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 ?

 

[Robin S]

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.

[sebr]

No error in the browser console...

I just saw that in preview tab (module FormBuilder in admin) the field works fine. Maybe a javascript file not loaded ?

[Robin S]

7 minutes ago, sebr said:

Maybe a javascript file not loaded ?

Check that you have all the necessary FormBuilder embed code in your template file:

You should see this in your rendered page markup (for Basic framework)

[sebr]

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

[Robin S]

1 minute ago, sebr said:

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

Maybe some CSS conflict. If that's not it then I'm out of ideas, sorry.

[sebr]

Thanks for your help. I will look for in CSS. I will keep inform in the forum. Have a nice day

[sebr]

@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>

 

[sebr]

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 = '';
			});
		}
	});
});

 

[Robin S]

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.

[ceberlin]

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?

[adrian]

Just now, ceberlin said:

but is not suitable as a frontend star rating module, is it?

It works just fine on the frontend for me.

[ceberlin]

Sorry I was not precise: It can display stars, but I could not figure out to extend this to a user rating system where users do the rating and average stars are displayed. Probably not.

[adrian]

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>

 

[ceberlin]

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.)

[adrian]

Maybe I am not understanding what you want but this screen recording shows it working on the frontend.