[Resolved] block star rating

[Author]

Posts

[neliS]

All last week I was trying to create a rating system on the site. Something very simple that almost every other site has.

Users come to the site and leave their rating in the form of stars. You have probably seen some sites that have this functionality.

Yes, I know that you use a demo site that has reviews, but of course there is no star, who needs that, right?

So I have read many times all the possible support answers you have regarding this problem (unfortunately, you have a lot of them) the first one since 2012.

Ok, let's move on, sit down and write php, java scripts, additional CSS styles, just to get one of the basic functionalities.

Oh great, now I have the ability to offer my visitors a rating system. I can display the average value on the parent page.

Yes, I use pictures for the stars, but what's the matter, I started the site with toolset, so I have to finish everything, right?

Around here somewhere I got high blood pressure, 160/100.

Well, it has nothing to do with you, a little stress is not out of place.

Now let's finish the cred form and wait for users to leave their reviews.

And then again a little extra stress, new java scripts and css code...

Now let's finally show these stars together with the text that users leave.

Then you realize that because of ajax, the java script can't convert the number into stars. But that's why the team behind the toolset created a block star rating. Finally something good...

But no, that block cannot display values ​​entered using radio buttons.

OK, let's change the radio buttons to check boxes. Well, and that is not an option.

The 'star rating' block can only see fields from custom fields that are numbers; radio buttons and check boxes, even though they have a value as a number, cannot be used with this block.

So the only option is, use the number field, let your users enter numbers instead of clicking on the stars.

Is this possible?

Finally we come to my question.

How can I display the stars in the user review section, if the radio button is used in the cred form?

[Waqar]

Hi,

Thank you for contacting us and sharing your feedback.

With the pause in the development of Toolset features, it is hard to predict how long will it take. But, I'll pass on your feedback about the 'Star Rating' block, internally.

By default, the block only supports a number-type field, but there is a workaround that you can use.

Instead of including the original number-type rating field in the form, you can include a generic radio-type field.
( ref: https://toolset.com/course-lesson/adding-generic-fields-to-forms/ )

The value of that radio field can then be updated into the actual field, through a custom function attached to the 'cred_save_data' hook:
( ref: https://toolset.com/documentation/programmer-reference/cred-api/#cred_save_data )

Example:

add_action('cred_save_data','custom_ratings_func',15,2);
function custom_ratings_func($post_id, $form_data) {
	if ($form_data['id']==12345) {
		// get the value from generic field
		$shadow_rating_val = $_POST['shadow-rating-field'];
		if(!empty($shadow_rating_val)) {
			update_post_meta( $post_id, 'wpcf-rating', $shadow_rating_val );
		}
	}
}

You'll replace:

- '12345' with the ID of the target form.
- 'shadow-rating-field' with the slug of the generic radio field.
- 'rating' with the slug of your actual rating number field.

I hope this helps and please let me know if you need further assistance.

regards,
Waqar

[neliS]

Tnx for help. I saw this generic fields but not sure where they store data and how to use them later.

This is what I did:

document.addEventListener("DOMContentLoaded", function() {
convertNumbersToStars();
setupAjaxHook();
});

function convertNumbersToStars() {
var reviewBlocks = document.querySelectorAll('.wp-block-toolset-views-view-template-block');

reviewBlocks.forEach(function(block) {
var ratingNumber = parseInt(block.querySelector('.rating-number').textContent);
var starRatingDiv = block.querySelector('.star-rating');

var stars = '';
starRatingDiv.innerHTML = stars;
});
}

function setupAjaxHook() {
// Wrap XMLHttpRequest.send to detect when AJAX requests are sent
const originalSend = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.send = function() {
this.addEventListener('load', function() {
if (this.readyState === 4 && this.status >= 200 && this.status {
// Timeout to ensure DOM updates have occurred
setTimeout(convertNumbersToStars, 50);
return response;
});
};
}