[Support request] Star Rating – Dynamic Fields – ACF

[Justin]

Looking to implement a visual star rating system on the front end. I used the following PHP from the link here:
https://gist.github.com/diggeddy/ef3dc0315a73c0caad839c5348b89aa6

I can get it to work with the short code if I manually put in a number, but I can’t seem to get the dynamic field to populate. The guy who posted the dynamic version of the php never said how he implemented it.

Any ideas? or a better version of how to do this?

[Fernando]

Hi Justin,

You can try something like this:

function make_star_bar( $atts ) {
    $value = get_post_meta( get_the_ID(), 'ADD_YOUR_POST_META_KEY_HERE' );
    $prefix = 'star-bar-';
    $uniqueClass = 'custom-star-rating';
    $percentage = 100 * $value['stars'] / 5;
    $html = '<span class="'.$uniqueClass.'">★★★★★</span>
    <style>
    .'.$uniqueClass.' {
        background: linear-gradient(90deg, '. $value['color'] . ' ' . $percentage .'%, rgba(0,0,0,0) '. $percentage.'%);
        color: rgba(0,0,0,.2);
        background-clip: text;
        -webkit-background-clip: text;
        color: rgba(0,0,0,.2);
    }
    </style>
    ';
    return $html;
}
add_shortcode('star_bar', 'make_star_bar');

Just replace ADD_YOUR_POST_META_KEY_HERE in your code with your post meta field name.

With this, the shortcode [star_bar] should automatically generate stars based on your ACF post meta value.

[Justin]

For some reason, the stars are showing all grey and 5 stars. If I enter “1” into my field, it still shows as 5 grey stars?

[Fernando]

Can I see where you’ve implemented this?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Justin]

On the first product, you can see the #3 underneath. That’s the actual star rating. The other yellow stars you can ignore. I added those manually myself into the custom field.

[Fernando]

Can you try hooking the Shortcode into the actual product page first to test if it works? Use a Hook Element.

[Justin]

So all the pages are in draft mode. But I still hooked the shortcode in under the entry title. As an example, one product should be 3 stars but I still ended up with the 5 grey stars.

[David]

The PHP Snippet here:

https://gist.github.com/diggeddy/ef3dc0315a73c0caad839c5348b89aa6?permalink_comment_id=4424992#gistcomment-4424992

That should work.
On this line:

$rating_term = get_field('rating');

The rating needs to be replaced with the name of your Custom Field.

And then you just need to add the [star_bar] shortcode to your post.

[Justin]

Hi David – “rating” is the name of my custom field.

If you go to the page in the private section, I have 2 shortcodes setup. The first is via the solution you just provided and the second is with my manual insertion “[star_bar stars=”3.7″]” – So it doesn’t seem to be pulling through the dynamic data.

[David]

In ACF what is the field type settings ?

[Justin]

Filed type = Number
Validation = Min 1, Max 5
Step Size = 0.1

[David]

I wrote this function that removes the shortcode atts:

function make_star_bar() {
    $rating = get_post_meta( get_the_ID(), 'rating', true );
	if ( $rating ) {
        $color = '#f00';
        $prefix = 'star-bar-';
        $uniqueClass = uniqid($prefix);
        $percentage = 100 * $rating / 5;
        $html = '<span class="'.$uniqueClass.'">★★★★★</span>
        <style>
        .'.$uniqueClass.' {
            background: linear-gradient(90deg, '. $color  . ' ' . $percentage .'%, rgba(0,0,0,0) '. $percentage.'%);
            color: rgba(0,0,0,.2);
            background-clip: text;
            -webkit-background-clip: text;
            color: rgba(0,0,0,.2);
        }
        </style>
        ';
        return $html;
	}
}
add_shortcode('star_bar', 'make_star_bar');

And i tested that with an ACF field as per your settings and it worked.

Let me know

[Justin]

seems like nothing is being output now. Everything dissapeared from the page?

I’m assuming the shortcode should remain, which it is.

[David]

Do you still have the other shortcode functions on the site ? If so remove all of them aside from the one i provided above.

[Justin]

Yes, there aren’t any other short codes. I do have other dynamic data populated but I don’t think that’s relevant. I’m still seeing it show up as blank.

[Author]

Posts