Support

Account

Home Forums ACF PRO Creating reusable component fields?

Unread

Creating reusable component fields?

  • Hi,

    I would like to know how could i use ACF to create reusable component fields that can be managed from one place, let’s say inside the options page.

    I’ve tried using clone fields for that but the values don’t get synced between the main and the clones. No matter if the slug has a prefix or not.

    Right now i’ve created a way in which i use ACF prepare_field filter. This works for simple fields but i’m not sure how could i use the same logic on for example repeater fields.

    Here’s the code i’m running right now

    add_filter('acf/prepare_field', function($field){
    
        $current_screen = get_current_screen();
        if($current_screen && $current_screen->id == 'toplevel_page_theme-settings') return $field;
    
        $components = get_field('components', 'option');
    
        foreach($components as $component){
    
            if(array_key_exists($field['_name'], $component)){
                
                if(isset($field['sub_fields'])){
                       
                    foreach($field['sub_fields'] as $field_key => $sub_field){
                        foreach($component[$field['_name']] as $sub_component){
                            if(array_key_exists($sub_field['_name'], $sub_component)){
                                
                                //$field['sub_fields'][$field_key]['value'] = $sub_component[$sub_field['_name']];
                                //consoleLog([$field, $sub_field, $sub_component[$sub_field['_name']]]);
    
                            }
                        }
                    }
                }else{
                    $field['value'] = $component[$field['_name']];
                }
                
            }
    
        }
    
        return $field;
        
    },10,3)

    And here’s the ACF output for components field group

    {
                    "key": "field_638edca18a922",
                    "label": "Components",
                    "name": "",
                    "aria-label": "",
                    "type": "tab",
                    "instructions": "",
                    "required": 0,
                    "conditional_logic": 0,
                    "wrapper": {
                        "width": "",
                        "class": "",
                        "id": ""
                    },
                    "placement": "left",
                    "endpoint": 0
                },
                {
                    "key": "field_638edcad8a923",
                    "label": "Components",
                    "name": "components",
                    "aria-label": "",
                    "type": "flexible_content",
                    "instructions": "Reusable components that can be managed from one place",
                    "required": 0,
                    "conditional_logic": 0,
                    "wrapper": {
                        "width": "",
                        "class": "",
                        "id": ""
                    },
                    "layouts": {
                        "layout_638edcb3c4b41": {
                            "key": "layout_638edcb3c4b41",
                            "name": "get_in_touch",
                            "label": "Get In Touch",
                            "display": "block",
                            "sub_fields": [
                                {
                                    "key": "field_638edcc28a924",
                                    "label": "Heading",
                                    "name": "get_in_touch_heading",
                                    "aria-label": "",
                                    "type": "textarea",
                                    "instructions": "",
                                    "required": 0,
                                    "conditional_logic": 0,
                                    "wrapper": {
                                        "width": "",
                                        "class": "",
                                        "id": ""
                                    },
                                    "default_value": "",
                                    "maxlength": "",
                                    "rows": 3,
                                    "placeholder": "",
                                    "new_lines": ""
                                },
                                {
                                    "key": "field_638edcd28a925",
                                    "label": "Button",
                                    "name": "get_in_touch_button",
                                    "aria-label": "",
                                    "type": "link",
                                    "instructions": "",
                                    "required": 0,
                                    "conditional_logic": 0,
                                    "wrapper": {
                                        "width": "",
                                        "class": "",
                                        "id": ""
                                    },
                                    "return_format": "array"
                                }
                            ],
                            "min": "",
                            "max": ""
                        },
                        "layout_638f209874700": {
                            "key": "layout_638f209874700",
                            "name": "icon_group",
                            "label": "Icon group",
                            "display": "block",
                            "sub_fields": [
                                {
                                    "key": "field_638f20b774701",
                                    "label": "Icon group",
                                    "name": "icon_group",
                                    "aria-label": "",
                                    "type": "repeater",
                                    "instructions": "",
                                    "required": 0,
                                    "conditional_logic": 0,
                                    "wrapper": {
                                        "width": "",
                                        "class": "",
                                        "id": ""
                                    },
                                    "layout": "table",
                                    "min": 0,
                                    "max": 0,
                                    "collapsed": "",
                                    "button_label": "Add Row",
                                    "rows_per_page": 20,
                                    "sub_fields": [
                                        {
                                            "key": "field_638f20ca74702",
                                            "label": "Icon",
                                            "name": "icon",
                                            "aria-label": "",
                                            "type": "image",
                                            "instructions": "",
                                            "required": 0,
                                            "conditional_logic": 0,
                                            "wrapper": {
                                                "width": "",
                                                "class": "",
                                                "id": ""
                                            },
                                            "return_format": "array",
                                            "library": "all",
                                            "min_width": "",
                                            "min_height": "",
                                            "min_size": "",
                                            "max_width": "",
                                            "max_height": "",
                                            "max_size": "",
                                            "mime_types": "",
                                            "preview_size": "thumbnail",
                                            "parent_repeater": "field_638f20b774701"
                                        },
                                        {
                                            "key": "field_638f20da74703",
                                            "label": "Background",
                                            "name": "background",
                                            "aria-label": "",
                                            "type": "color_picker",
                                            "instructions": "",
                                            "required": 0,
                                            "conditional_logic": 0,
                                            "wrapper": {
                                                "width": "",
                                                "class": "",
                                                "id": ""
                                            },
                                            "default_value": "",
                                            "enable_opacity": 0,
                                            "return_format": "string",
                                            "parent_repeater": "field_638f20b774701"
                                        }
                                    ]
                                }
                            ],
                            "min": "",
                            "max": ""
                        }
                    },
                    "min": "",
                    "max": "",
                    "button_label": "Add component"
                }

    For “Get In Touch” gield group it works but for “Icon Group” i’m not sure how to exactly achieve that.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.