FieldtypeStars

Robin S · December 15, 2022

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 · December 16, 2022

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

Fuzen · December 24, 2022

@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 · February 18, 2023

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 · February 18, 2023

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 · February 18, 2023

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 · February 18, 2023

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 · February 18, 2023

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 · February 18, 2023

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 · February 18, 2023

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

sebr · February 18, 2023

@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 · February 18, 2023

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 · February 18, 2023

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 · March 6, 2023

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 · March 6, 2023

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 · March 6, 2023

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 · March 6, 2023

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 · March 7, 2023

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 · March 7, 2023

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

msavard · August 7, 2023

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

Robin S · August 8, 2023

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>

msavard · August 8, 2023

Ok, good to know. It's probably just easier to use a 'normal' method (CSS & radio buttons or the like). Thanks for the info.

Sign In

FieldtypeStars

Recommended Posts

FieldtypeStars

Config

Using InputfieldStars in FormBuilder

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content