Skip Navigation

[Resolved] Searching Book Review Child CPT and Book Parent CPT by Star Ratings

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to carate star rating for book review

Solution:
To create star rating it will require some custom programming work.

You can find proposed solution with the following reply:
https://toolset.com/forums/topic/searching-book-review-child-cpt-and-book-parent-cpt-by-star-ratings/#post-406357

Relevant Documentation:

This support ticket is created 7 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

Author
Posts
#405991

On my book review site I have managed to succesfully create a star rating system for the reviews, average them out and display them on the parent book post, after following different support threads, which culiminated in the following support:
https://toolset.com/forums/topic/new-views-kind-of-broke-my-star-ratings/

So it's basically working. The stars are showing up on the book pages and reviews, all averages are working and review totalling is working.
hidden link

I have also managed to display the stars on the CRED submit and edit a review form:
hidden link
hidden link

This is all brilliant.

However I obviously want to search both reviews and books by star rating.

---------------------------------------------------------------

1. Searching reviews by rating.

Using the parametric search I can search by radio or checkboxes. I figure checkboxes may be preferable to allow users to select multiple star ratings to search by at a time.

My problem here is I want the parametric search to display the stars the same way I have the views outputting and the CRED input forms displaying them.

I can't seem to find anyway within the set-up options of the filter selection to output this.

Would my best bet to be somehow use css styling and the label class?

<label class="wpcf-form-label wpcf-form-radio-label">1</label>

(My apologies if I'm missing something obvious here and being daft)

-----------------------------------------------------------

2. Searching Book parents by Child Reviews custom field rating

As the [ratings_average] is generated on the fly when pages are displayed it isn't stored in the database.

So I will need there to be some sort of function that averages the child Review CPT's rating CPF then stores that average in a custom field of the parent Book CPT.

I have found these posts that both seem to be achieving what I desire:
https://toolset.com/forums/topic/passing-custom-field-values-into-another-custom-field-via-cred/
https://toolset.com/forums/topic/how-to-save-rating-average-to-a-custom-field-type-on-database-to-sort-it/

Using the 'cred_save_data' hook to update. Are there any other support threads that you know of that deal with this? I will give these a shot and get back to you with my result.

Thanks for your support, these will be the last things to have the basic MVP of such a site.

Once I have all of this working I intend to bring together all the support threads and everything I've learned and been provided, into one Forum post detailing setting up a Membership, front-end only, archive and review/ratings site using toolset to help the many others I think would benefit.

Best

Jeff

#405997

Dear Jeff,

Since I am in holidays, so I transfer this thread to our supporter Minesh, you will get the answer soon

#406017

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hi Jeff,

1. Searching reviews by rating.
To make stars as filter it will require some custom programming and I'm afraid that this is beyond the scope of our support policy.

If you need custom programming with your project, please feel free to contact our certified partners:
=> https://toolset.com/consultant/

2. Searching Book parents by Child Reviews custom field rating

Here are few related tickets that may help you:
=> https://toolset.com/forums/topic/star-rating-with-averagetotal-user-comments-with-rating/
=> https://toolset.com/forums/topic/saving-a-rating-average-score-to-a-parent-post-to-enable-filtering/#post-365808
=> https://toolset.com/forums/topic/cred-input-radio-rating-value-does-not-savepass-to-database/
=> https://toolset.com/forums/topic/filter-by-average-rating-wp-types-forum-post/

This is all I've and I hope above information will help you to understand the star rating and you will successfully able to integrate it with you project.

#406028

Dear Luoyang, no problem... Happy Dragon Boat Festival.

Hi again Minesh,

Re: 1.

Seems to me to be a bit wasteful to source a consultant programmer for something as small as replacing the radio button value with a star. Perhaps for the latter point, I may consider it.

Re: 2.

Thanks for these posts, just what the doctor ordered. I'll get back to you with any further questions.

Jeff

#406032

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Ok - thank you.

Please kindly open a new ticket with your each new question as this may help other users searching on the forum.

Thank you for understanding.

#406042

No worries, I will, the only questions I'll post here will be relevant to this thread.

Jeff

#406047

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Ok - thank you.

#406125
Screen Shot 2016-06-10 at 7.52.00 PM.png

Hey Minesh,

1.
I wasn't sure if I explained myself correctly on point 1, it's a problem I have so I went ahead and knocked a workaround up as a demonstration, I figured that would make it easier to get my meaning across.

I didn't actually mean to stylise the radio buttons as star shapes. I was asking about the labelling.
I used css column classes to align the buttons with the text and imagery.

It wasn't perfect as things break apart at mobile size responsive css media queries, when the star images column drops below.

If I couldn't find an alternative solution then I would probably use something like this and just 'display:none' the star images at mobile sizes.

However when I was worried I may have miscommunicated, I started thinking about restyling the radio buttons completely as the stars and looked around for a solution and moved away from that workaround.

At the moment, I have implemented the solution from this tutorial:
hidden link
Which I found at this thread:
https://toolset.com/forums/topic/parametric-search-filter-with-jquery-stars/

Using this JS:

(function($) {
    $.fn.starRating = function(options) {

        // Defaults and options
        var defaults = {
                            onimage: 'staron.png',
                            offimage: 'staroff.png'
        };
        var opts = $.extend({}, defaults, options);
        this.each(function() {
            $('input[type=radio]',this).hide(); //hide the radio buttons themselves
            $('label span',this).hide(); //hide the regular text labels
            $('label',this).append('<img src="'+opts.offimage+'">'); //create image elements 
            
            var changeHandler = function()
            {
                stars = parseInt($(this).val());
                elementName = $(this).attr('name');
                $('input[name='+elementName+']').each(function(){
                    if(parseInt($(this).val()) <= stars)
                    {
                        $('img',$(this).parent()).attr('src',opts.onimage);
                    }
                    else
                    {
                        $('img',$(this).parent()).attr('src',opts.offimage);
                    }
                });
            }
            $('input[type=radio]',this).bind('change',changeHandler);
            $('input[type=radio]:checked',this).trigger('change');
        })
   }
})(jQuery);

With this function 'rating_stars' set to run after the results have been updated (in choose individual settings manually).

function rating_stars() {
var stars = parseInt(jQuery('.stars input[type=radio]:checked').val());
jQuery(".stars input[type=radio]").each(function() {
if(parseInt(jQuery(this).val()) < = stars) { jQuery(this).next('label').addClass('on'); } }); }

and this css:

.stars br,
.stars input {
  display: none;
}
.stars label {
  display:inline-block;
  width:20px;
  height:20px;
  text-indent:100%;
  overflow:hidden;
  background: url(images/staroff.png) no-repeat;
}
.stars label.on {
  background-image: url(images/staron.png);
}

I have it working on my review page:
hidden link

However on the demo page of the tutorial the stars change instantly upon clicking them.
hidden link

But in my view they only 'click' (read - change) when the Ajax results update.

I am in China so I am not sure what the delay is like in the real internet, is there a terrible delay from your end?

I previously had them set to 'AJAX results update when visitors click on the search button', and the stars functioned, however when you clicked on them the stars didn't change. They were selected, so the search outputted correctly, but the stars only changed when the search button was pressed.

I know this is beyond your remit, but can you tell me if I'm missing something obvious, if it's perhaps just my browser updating slowly because of geographical location, or if its some sort of conflict with Toolset?

Thanks again

Jeff

#406255
Original Code from thread.png
Radio Buttons Showing.png

I tested the original jQuery solution from the other support thread mentioned above further and it seems that:

(attached screenshot - original code from thread.png)

It looks good but...

1. Although the radio buttons are selected when you click on them, you can't see that due to them being hidden by css.

2. The label background images (stars) only update (change from white to black) when the search is performed and not when the radio buttons are selected.

Using Ajax update when search button is clicked is impossible with this setup, and even with automatic Ajax update it is very slow and can be confusing, you aren't sure which star you have clicked for a second or maybe more....

So as a workaround I displayed the radio buttons, so that you can see that you have made a selection while you wait for the stars to change:

.stars br,
.stars input {
  /*display: none;*/
}

The workaround looks like my second screenshot (radio buttons showing.png)

Q.) I tried to get the radio buttons to appear 'display:inline-block' but there was no way I could affect their positioning. Is this something to do with views?

And seriously, originally that is all I wanted (if it wasn't so damn damn slow)......

However after all this messing around I got thinking about it, I realised that there has to be more. With toolset we can build great sites, style everything, get it all to work... but....

Styling the radio buttons is a problem? lol

Anyway, I also realised that since this image change is css, parts of the javascript are also redundant.

The radio buttons and images are being hidden and loaded from CSS so I have omitted these parts from the JS editor, specifically:

//onimage: 'staron.png',
//offimage: 'staroff.png'

and

//$('input[type=radio]',this).hide(); //hide the radio buttons themselves 
//$('label span',this).hide(); //hide the regular text labels
//$('label',this).append('<img src="'+opts.offimage+'">'); //create image elements 

Having said all of this, I had gotten the star ratings system to work on a plain html page:
hidden link

I also got them to work on a standard wordpress page featuring a view, I loaded the ratings stars via the view, but had the javascript load from the page scriptbox.

The stars worked perfectly, but they wouldn't submit. Which was ruining my evening lol

So I figure there are some difficulties with using this javascript and views. Within a view this script couldn't replace the radio buttons with images, and when used externally the selection wouldn't input into the search.

Anyway, I know there are other jQuery solutions but I am going to investigate some pure CSS solutions now. I would actually prefer pure CSS since it's lighter and faster.

Most of the tutorials I am reading are styling forms that have this format:

<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>

and I've copied views output from the front end of my site with the inspector, it has essentially the same format, so I'll experiment with CSS and see where that takes me.:

	<input type="radio" id="form-698195210d56df63627f8f82eae5ec43-2" name="rating" value="1" class="js-wpv-filter-trigger  wpcf-form-radio form-radio radio" style="">
	<label class="wpcf-form-label wpcf-form-radio-label on" for="form-698195210d56df63627f8f82eae5ec43-2" style=""></label>

	<input type="radio" id="form-fadf542045aa21e38ed5f0e6ed4e2eb1-4" name="rating" value="2" class="js-wpv-filter-trigger  wpcf-form-radio form-radio radio" style="">
	<label class="wpcf-form-label wpcf-form-radio-label on" for="form-fadf542045aa21e38ed5f0e6ed4e2eb1-4" style=""></label>

	<input type="radio" id="form-ebeb868ba70ec6472ae1838aa284eeab-6" name="rating" value="3" class="js-wpv-filter-trigger  wpcf-form-radio form-radio radio" style="">
	<label class="wpcf-form-label wpcf-form-radio-label on" for="form-ebeb868ba70ec6472ae1838aa284eeab-6" style=""></label>

	<input type="radio" id="form-08e95aacf7c0c917002b1f78c052c248-8" name="rating" value="4" class="js-wpv-filter-trigger  wpcf-form-radio form-radio radio" style="" checked="checked">
	<label class="wpcf-form-label wpcf-form-radio-label on" for="form-08e95aacf7c0c917002b1f78c052c248-8" style=""></label>

	<input type="radio" id="form-2a78b9619898ff3c5cae353e01f2b014-10" name="rating" value="5" class="js-wpv-filter-trigger  wpcf-form-radio form-radio radio" style="">
	<label class=" wpcf-form-label wpcf-form-radio-label" for="form-2a78b9619898ff3c5cae353e01f2b014-10" style=""></label>

Jeff

#406289
What I want.png
Good but vertical and with values.png

I really hope you have had a great weekend when you come back to this thread, and I apologize profusely for giving you all of this to read on a Monday morning.

However I hope if anyone else is trying to do the same thing they find all of this of use.

So I managed to get it working with just CSS, its fast and functional. I needed to install font-awesome icons, but I would have done that sooner or later anyway.

In the filter box:

<div class="rating">
[wpv-control field="rating" url_param="rating" type="radios" values="5,4,3,2,1" display_values="5,4,3,2,1"]
</div>

In the CSS:

.rating { 
  border: none;
  float: left;
  width: 60px;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: -40px;
  font-size: 1.25em;
  font-family: FontAwesome;
  content: "\f006";
  text-align: right;
}

.rating > label { 
  color: black; 
 float: right; 
}

/* show gold star when clicked */
/* hover current star */
/* hover previous stars in list */
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover, 
.rating:not(:checked) > label:hover ~ label { 
    color: #FFD700;  
} 

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { 
color: #FFED85;  
} 

Much better, I should never have bothered with the JQuery, silly me.

So now it looks like the 1st screenshot: (Good_but_vertical_and_with_values.png)

However, for the life of me, I can't get the radio buttons to appear in-line. Design wise, having vertical radio buttons doesn't work for me.

Can you help me understand why or how I can make the buttons appear horizontally, and without the numerical values displayed.

My 2nd screenshot is what I want to achieve: ('What_I_want.png)

---------------

I did actually manage to get the radio buttons to appear horizontally, when I took the screenshot.

To do this I copied the html output from my browser inspector, as such:

<div class="rating">
<input type="radio" id="form-2a78b9619898ff3c5cae353e01f2b014-10" name="rating" value="5" class="js-wpv-filter-trigger  wpcf-form-radio form-radio radio" style="">
	<label class=" wpcf-form-label wpcf-form-radio-label" for="form-2a78b9619898ff3c5cae353e01f2b014-10" style=""></label>
	
	<input type="radio" id="form-08e95aacf7c0c917002b1f78c052c248-8" name="rating" value="4" class="js-wpv-filter-trigger  wpcf-form-radio form-radio radio" style="" checked="checked">
	<label class="wpcf-form-label wpcf-form-radio-label on" for="form-08e95aacf7c0c917002b1f78c052c248-8" style=""></label>

	<input type="radio" id="form-ebeb868ba70ec6472ae1838aa284eeab-6" name="rating" value="3" class="js-wpv-filter-trigger  wpcf-form-radio form-radio radio" style="">
	<label class="wpcf-form-label wpcf-form-radio-label on" for="form-ebeb868ba70ec6472ae1838aa284eeab-6" style=""></label>

	<input type="radio" id="form-fadf542045aa21e38ed5f0e6ed4e2eb1-4" name="rating" value="2" class="js-wpv-filter-trigger  wpcf-form-radio form-radio radio" style="">
	<label class="wpcf-form-label wpcf-form-radio-label on" for="form-fadf542045aa21e38ed5f0e6ed4e2eb1-4" style=""></label>

	<input type="radio" id="form-698195210d56df63627f8f82eae5ec43-2" name="rating" value="1" class="js-wpv-filter-trigger  wpcf-form-radio form-radio radio" style="">
	<label class="wpcf-form-label wpcf-form-radio-label on" for="form-698195210d56df63627f8f82eae5ec43-2" style=""></label>
</div class>

I then placed it in the filter box in replacement of this code:

<div class="rating">
   [wpv-control field="rating" url_param="rating" type="radios" values="5,4,3,2,1" display_values="5,4,3,2,1"]
</div>

And it outputted the horizontal stars as horizontal radio selector, I could then also do more styling to it. It also correctly submitted the stars when selected. It reacted to hovers and clicks correctly.

However there must have been some bug, because as soon as the search was completed the selector always returned to the 4 stars immediately, and upon clearing the form it always reset to 4 stars.

If there was a way to fix this bug I would be very happy.

I have all the code saved, so if you want to have a look I can set it all back up that way.

------------

My main need is to make the 'hidden-radio selector/star labels' appear horizontally, and without the numberical value. Or if they are horizontal, to have the numberical value appear above them.

-----------

Thanks again

Jeff

#406357
Screenshot 3.png
Screenshot 2.png
Screenshot 1.png

I managed to make a horizontal star rating selector by combining some of the css from the jQuery solution with my new css.

There were some bugs on the way though....

It's working here:
hidden link

Using this CSS code as base:

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.rating {
        float:left;
}
.rating br,
.rating input {
  	display: none;
}
.rating label {
  	display:inline-block;  		
}
.rating > label:before { 
  	margin: 10px;
  	font-size: 1.2em;
  	text-align: right;
        font-family: fontAwesome;
	content:"\f006";
}
.rating > label:after {
	display:none;
}
.rating > label { 
  	color: black; 
 	float: left; 
}
.rating > input:checked ~ label, 
.rating:not(:checked) > label:hover, 
.rating:not(:checked) > label:hover ~ label { 
    color: #FFD700;  } 

.rating > input:checked + label:hover, 
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 

with the shortcode formatted as such:

[wpv-control field="rating" url_param="rating" type="radios" values="1,2,3,4,5" display_values="1,2,3,4,5"]

I get the horizontal star ratings selector. With numbers running from left to right, correct for English speaking countries.

Please see screenshot1.png

However as you can see from screenshot 1, the actual rollover selector is working in reverse. When 1 star is selected it colours all 5 stars. When 5 Stars is selected it only colours 1 star.

This seems to be because CSS expects the form to output the radio inputs with the highest value first in the html, every css tutorial I have found has the same format, as such:

<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>

I can change the ratings filter field so that instead it creates the shortcode to output the html in such a way:

[wpv-control field="rating" url_param="rating" type="radios" values="5,4,3,2,1" display_values="5,4,3,2,1"]

So now the html is being outputted in the same format as the CSS expects.

The results are screenshot2.png

So now selecting a star results in the correct colouring of the right amount of stars. However the selection process is working from right to left, perfect for China or Japan, unfortunately this will be an English site ;).

So to change the order of the star labels and position them correctly, I've had to hack around with CSS. It's not pretty and I'll bet someone more skilled could come up with a better solution, but it seems to be doing the job.

First I changed the ordering of the stars from (5-1) to (1-5):

.rating > label {
      float: right /*Change ordering of stars*/

Then I played with relative positioning of the ratings div:

.rating {
      float:left;
      position:relative;
      left: -40px;
}

The results are screenshot 3

It's working, the selector is immediate while the Ajax search catches up. Runs horizontally, very happy. I also checked with different browser sizes from tablet to mobile and the position stays good, but I can add break-points if needed when I come to doing the proper design of the site.

I would still like to be able to remove the numbers, but it is beyond my CSS, could you point me in the right direction Minesh, is it possible with CSS?

It seems the value and the star are both label text, so separating them is a problem....

-----------

I didn't just write my solution, but step by step for the benefit of anyone else reading who may be attempting the same thing.

-----------

Now onto 2....

#406468

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Ok - great.

Thanks for sharing all this information, this will surely help other users.

Maybe at last after achieving your goal you should share whole solution in single reply.

#406478

I will resolve this issue for now, as I think it is long enough.

But for Question 2 I have started a separate support thread here:
https://toolset.com/forums/topic/save-child-review-rating-avg-to-parent-book-radio-field-to-allow-searching/

I think it is enough of a separate topic to warrant it's own thread, and I have named the support thread more specifically to allow for better searching.

Yup, I will share everything. I am very close to having everything I need to make a front-end only membership archive and review site, with just Toolset, a few php functions and a little bit of jQuery. I will post a tutorial thread in the user forum that bring it all together as a single solution, and link each way to and from it, with the resolved support threads that got me there.

Toolset and OnTheGo support really is amazing to allow someone with nothing but some HTML and CSS knowledge to get this far. I fully appreciate how all your support has helped and guided me and filled in the gaps with php and jQuery.

🙂

p.s

The book archive site is just a dummy for testing.

The site I am going to build has never been built before. There is no other site serving the same function on the English language internet. Which is astounding and therefore an amazing opportunity.

I should rein myself in a little, there is a possibility that there may not be such a site because there is no market for one, however my market research suggested there was. Only one way to find out.

That's also why I am building such a test structure myself and being so secretive, I can't let anyone else know about it and I need to get the first MVP version out and functioning before I speak to any other developers.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.