Support

Account

Home Forums ACF PRO Rating System or Similar.

Solved

Rating System or Similar.

  • Hi,

    I read in the forums that a rating system (star or otherwise) was going to be available in version 5 of the plugin. I have purchased ACFPRo and can’t seem to find where it is located.

    Could someone please let me know if they have, and how, they have implemented this.

    Also, if anyone has any suggestion on how to create the same type of functionality, I would like to hear about it.

    I am making a menu for a restaurant and some of the menu items need to indicate the level of spiciness, 1 to 3, and the client would like it to display the rating as hot peppers.

    Any insight would be appreciated.

  • hi @johnson

    you can download ACF Pro from your account page:
    http://www.advancedcustomfields.com/my-account/

    for rating plugin see this:
    https://github.com/kevdotbadger/acf-star-rating

    for see another ACF Pro add-ons:
    https://github.com/reyhoun/awesome-acf

  • Thank you so much Navid.
    That is exactly what I was looking for.

  • I’m confused. I thought that ACF was adding this to their in the 5.0 update?

  • There is no plugin for adding ACF Rating Feild in ACF 5.x.
    Though the Feild shows up in 4.x they dont work properly.

    Therefore i tried to introduce my modify the ACF_Radio_Feild – radio.php in order to a Rating Feild. It displays as much stars as much as the number of choices.

    I would be glad if someone can extend it to a plugin to add a new ACF_Rating feild as i have no idea about introducing custom ACF Feilds.
    ______________________________________________________________________

    In radio.php i have introduced the following components

        //Introduced after decleration of $atts
        $atts2 = array(
           'id'    =>'star_hide_text',
           'for'   => $field['id'],
           'title' => $value,
        );
         //Introducing atts2 in the displaying feild.
         if( $i > 1 ) {           
                        $atts['id'] .= '-' . $value;
                        $atts2['for'] .= '-' . $value; 
                    }
         e .= '<input ' . acf_esc_attr( $atts ) . '/>' . '<label ' .  acf_esc_attr( $atts2 ) . '></label>';

    and then introducing the following CSS code in global.css

    ul.acf-radio-list.acf-hl{
        float: left; 
    }
    
    ul.acf-radio-list.acf-hl:not(:checked) > input {
        position:absolute;
        left:-9999px;
        clip:rect(0,0,0,0);
    }
    
    ul.acf-radio-list.acf-hl:not(:checked) > label {
        float:right;
        width:1em;
        padding:0 .1em;
        overflow:hidden;
        white-space:nowrap;
        cursor:pointer;
        font-size:200%;
        line-height:1.4;
        color:#ddd;
        text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
    }
    
    ul.acf-radio-list.acf-hl:not(:checked) > label:before {
        content: '★  ';
        /*content: '\f005';*/
    }
    
    ul.acf-radio-list.acf-hl > input:checked ~ label {
        color: gold;
        text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
    }
    
    ul.acf-radio-list.acf-hl:not(:checked) > label:hover,
    ul.acf-radio-list.acf-hl:not(:checked) > label:hover ~ label {
        color: #f70;
        text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
    }
    
    ul.acf-radio-list.acf-hl > input:checked + label:hover,
    ul.acf-radio-list.acf-hl > input:checked + label:hover ~ label,
    ul.acf-radio-list.acf-hl > input:checked ~ label:hover,
    ul.acf-radio-list.acf-hl > input:checked ~ label:hover ~ label,
    ul.acf-radio-list.acf-hl > label:hover ~ input:checked ~ label {
        color: #ea0;
        text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
    }
    
    ul.acf-radio-list.acf-hl > label:active {
        position:relative;
        top:2px;
        left:2px;
    }

    My final radio.php is

    <?php
    
    /*
    *  ACF Radio Button Field Class
    *
    *  All the logic for this field type
    *
    *  @class       acf_field_radio
    *  @extends     acf_field
    *  @package     ACF
    *  @subpackage  Fields
    */
    
    if( ! class_exists('acf_field_radio') ) :
    
    class acf_field_radio extends acf_field {
        
        
        /*
        *  __construct
        *
        *  This function will setup the field type data
        *
        *  @type    function
        *  @date    5/03/2014
        *  @since   5.0.0
        *
        *  @param   n/a
        *  @return  n/a
        */
        
        function __construct() {
            
            // vars
            $this->name = 'radio';
            $this->label = __("Radio Button",'acf');
            $this->category = 'choice';
            $this->defaults = array(
                'layout'            => 'vertical',
                'choices'           => array(),
                'default_value'     => '',
                'other_choice'      => 0,
                'save_other_choice' => 0,
            );
            
            
            // do not delete!
            parent::__construct();
            
        }
        
            
        /*
        *  render_field()
        *
        *  Create the HTML interface for your field
        *
        *  @param   $field (array) the $field being rendered
        *
        *  @type    action
        *  @since   3.6
        *  @date    23/01/13
        *
        *  @param   $field (array) the $field being edited
        *  @return  n/a
        */
        
        function render_field( $field ) {
            
            // vars
            $i = 0;
            $checked = false;
            
            
            // class
            $field['class'] .= ' acf-radio-list';
            $field['class'] .= ($field['layout'] == 'horizontal') ? ' acf-hl' : ' acf-bl';
    
            
            // e
            $e = '<ul ' . acf_esc_attr(array( 'class' => $field['class'] )) . '>';
            
            
            // other choice
            if( $field['other_choice'] ) {
                
                // vars
                $input = array(
                    'type'      => 'text',
                    'name'      => $field['name'],
                    'value'     => '',
                    'disabled'  => 'disabled'
                );
                
                
                // select other choice if value is not a valid choice
                if( !isset($field['choices'][ $field['value'] ]) ) {
                    
                    unset($input['disabled']);
                    $input['value'] = $field['value'];
                    $field['value'] = 'other';
                    
                }
                
                
                $field['choices']['other'] = '</label><input type="text" ' . acf_esc_attr($input) . ' /><label>';
            
            }
            
            
            // require choices
            if( !empty($field['choices']) ) {
                
                // select first choice if value is not a valid choice
                if( !isset($field['choices'][ $field['value'] ]) ) {
                    
    //              $field['value'] = key($field['choices']);
                    
                }
                
                
                // foreach choices
                foreach( $field['choices'] as $value => $label ) {
                    
                    // increase counter
                    $i++;
                    
                    // vars
                    $atts = array(                                    
                        'id'    => $field['id'], 
                        'type'  => 'radio',
                        'name'  => $field['name'],
                        'value' => $value,
                    );
                                    
                    $atts2 = array(
                        'id'    =>'star_hide_text',
                        'for'   => $field['id'],
                        'title' => $value,
                    );          
                    if( strval($value) === strval($field['value']) ) {
                        
                        $atts['checked'] = 'checked';
                        $checked = true;
                        
                    }
                    if( isset($field['disabled']) && acf_in_array($value, $field['disabled']) ) {
                    
                        $atts['disabled'] = 'disabled';
                        
                    }
                    // each input ID is generated with the $key, however, the first input must not use $key so that it matches the field's label for attribute
                    if( $i > 1 ) {
                    
                        $atts['id'] .= '-' . $value;
                        $atts2['for'] .= '-' . $value;
                        
                    }
                    e .= '<input ' . acf_esc_attr( $atts ) . '/>' . '<label ' .  acf_esc_attr( $atts2 ) . '></label>';
                                    
            
            }
            
    
            $e .= '</ul>';
            
            echo $e;
            
        }
        
        
        /*
        *  render_field_settings()
        *
        *  Create extra options for your field. This is rendered when editing a field.
        *  The value of $field['name'] can be used (like bellow) to save extra data to the $field
        *
        *  @type    action
        *  @since   3.6
        *  @date    23/01/13
        *
        *  @param   $field  - an array holding all the field's data
        */
        
        function render_field_settings( $field ) {
            
            // encode choices (convert from array)
            $field['choices'] = acf_encode_choices($field['choices']);
            
            
            // choices
            acf_render_field_setting( $field, array(
                'label'         => __('Choices','acf'),
                'instructions'  => __('Enter each choice on a new line.','acf') . '<br /><br />' . __('For more control, you may specify both a value and label like this:','acf'). '<br /><br />' . __('red : Red','acf'),
                'type'          => 'textarea',
                'name'          => 'choices',
            ));
            
            
            // other_choice
            acf_render_field_setting( $field, array(
                'label'         => __('Other','acf'),
                'instructions'  => '',
                'type'          => 'true_false',
                'name'          => 'other_choice',
                'message'       => __("Add 'other' choice to allow for custom values", 'acf')
            ));
            
            
            // save_other_choice
            acf_render_field_setting( $field, array(
                'label'         => __('Save Other','acf'),
                'instructions'  => '',
                'type'          => 'true_false',
                'name'          => 'save_other_choice',
                'message'       => __("Save 'other' values to the field's choices", 'acf')
            ));
            
            
            // default_value
            acf_render_field_setting( $field, array(
                'label'         => __('Default Value','acf'),
                'instructions'  => __('Appears when creating a new post','acf'),
                'type'          => 'text',
                'name'          => 'default_value',
            ));
            
            
            // layout
            acf_render_field_setting( $field, array(
                'label'         => __('Layout','acf'),
                'instructions'  => '',
                'type'          => 'radio',
                'name'          => 'layout',
                'layout'        => 'horizontal', 
                'choices'       => array(
                    'vertical'      => __("Vertical",'acf'), 
                    'horizontal'    => __("Horizontal",'acf')
                )
            ));
            
            
        }
        
        
        /*
        *  update_field()
        *
        *  This filter is appied to the $field before it is saved to the database
        *
        *  @type    filter
        *  @since   3.6
        *  @date    23/01/13
        *
        *  @param   $field - the field array holding all the field options
        *  @param   $post_id - the field group ID (post_type = acf)
        *
        *  @return  $field - the modified field
        */
    
        function update_field( $field ) {
            
            // decode choices (convert to array)
            $field['choices'] = acf_decode_choices($field['choices']);
            
            
            // return
            return $field;
        }
        
        
        /*
        *  update_value()
        *
        *  This filter is appied to the $value before it is updated in the db
        *
        *  @type    filter
        *  @since   3.6
        *  @date    23/01/13
        *  @todo    Fix bug where $field was found via json and has no ID
        *
        *  @param   $value - the value which will be saved in the database
        *  @param   $post_id - the $post_id of which the value will be saved
        *  @param   $field - the field array holding all the field options
        *
        *  @return  $value - the modified value
        */
        
        function update_value( $value, $post_id, $field ) {
            
            // save_other_choice
            if( $field['save_other_choice'] ) {
                
                
                // value isn't in choices yet
                if( !isset($field['choices'][ $value ]) ) {
                    
                    
                    // update $field
                    $field['choices'][ $value ] = $value;
                    
                    
                    // save
                    acf_update_field( $field );
                    
                }
                
            }       
            
            
            // return
            return $value;
        }
        
    }
    
    new acf_field_radio();
    
    endif;
    
    ?>
    

    To display the star format in front end use the following code

    
    function rating_display( $text ){
        $starfeild = '' ;
        if( ($star = get_field('css_rating') )){
    	$starfeild = $starfeild . '<abc class="rating_display">';  
                for ($x = 0; $x < $star ; $x++) {
                    $starfeild = $starfeild . '★ ';
                }
                $starfeild = $starfeild . '</abc>';
        }
        echo  $starfeild;
    }

    Add this to themes css for diplay of selected rating

    abc.rating_display {
        color: gold;
        text-shadow: 1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
        padding: 0 .1em;
        cursor: pointer;
        font-size: 150%;
        line-height: 1.4;
        padding-bottom: 15px;
        padding-left: 0px;
        display: block;
    }
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.