Flexible content nested
-
Hello
I tried to use your plugin to create nested flexible content with layout files and “the_flexible”.
The base group is called “Sections” which is flexible which contains 2 layouts
Layout 1 is called Full which contains 1 field called “Column” which is flexible.
“Column” contains 1 layout called block.
The second layout is called “2 Columns” which has 2 fields which are clones of the field called “Column”
This original “Column” return the content of the layout file correctly.
But the cloned “Column” in the other Section layout return an empty string.I have used “Prefix Field Names” on the cloned fields and used “column_1_column” and “column_2_column” but it returns an empty string.
My first try i created a inactive group which was inactive and all the layouts of “Sections” cloned that group. So when that did not work i tried making it inline in the first column.
I saw this https://www.ads-software.com/support/topic/flexible-content-nested-clone/ but as you write what i am trying to achieve is a finite nested and not infinite.
-
Ok i got an idea to make the fields in code instead and then have a factory funktion to create layouts and columns. So instead of clones it will just create a new group with the same fields with a new key.
This looks like it works fine. This will properly also be easier to maintain in the long run.
Then i can just import it in when i need to change settings and then update the code afterwards.
Would still love to know why it wont work for me with the clones.
Hello,
Thanks for the feedback! It’s really hard to understand your technical architecture as didn’t provide any code, screenshot or export. What I can tell you is that nested Flexible Content with clones work correctly (I use it everyday), as long as you don’t trigger infinite loops.
Generally speaking, when going into complex structures like that, I always advise people to start by creating native Flexible Content, with native clones, then get the correct front-end output using the ACF
have_rows(): the_row()functions. See: https://www.advancedcustomfields.com/resources/flexible-content/Then, when everything is working correctly, enable the “Dynamic Render” setting, create layout template files, and convert the front-end code to use the ACF Extended helper
the_flexible(). You’ll find a tutorial about that here: https://www.acf-extended.com/post/flexible-content-dynamic-layout-previewIn order to help you, I’ll need your field groups json export files and the PHP code you’re using on the front-end. But first, please make sure that your code is working using the native ACF
have_rows(): the_row()functions.Have a nice day!
Regards.
Hello,
I tried doing what you suggested, i created everything as of the native guide and then replacing with
the_flexiblewhen everything works.I have created multiple layout files
index.php
<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); if ( has_flexible( 'section' ) ) : the_flexible( 'section' ); endif; // if ( have_rows( 'section' ) ) : // $field = acf_get_field( 'section' ); // $flexible = acf_get_field_type( 'flexible_content' ); // while ( have_rows( 'section' ) ) : // the_row(); // $layout_name = get_row_layout(); // $layout = $flexible->get_layout( $layout_name, $field ); // echo '<div>'; // get_template_part( 'layouts/' . $layout_name . '/template' ); // echo '</div>'; // endwhile; // endif; } // end while } // end if ?>layouts/full/template.php
<?php /** * Template for full layout */ ?> <section class="w-full"> <?php // if ( have_rows( 'column' ) ) : // while ( have_rows( 'column' ) ) : // the_row(); // echo '<div>'; // get_template_part( 'layouts/' . get_row_layout() . '/template' ); // echo '</div>'; // // if ( get_row_layout() == 'header' ) : // // the_sub_field( 'heading' ); // // elseif ( get_row_layout() == 'block' ) : // // the_sub_field( 'hels' ); // // endif; // endwhile; // endif; if ( has_flexible( 'column' ) ) : echo '<div>'; the_flexible( 'column' ); echo '</div>'; endif; ?> </section>layouts/header/template.php
<?php the_sub_field( 'heading' );When using the native part of the code everything works.
When usingthe_flexibleit return nothing.When trying to debug, i can the when i
var_dump($layout)in your plugin helpers.phpget_flexiblethe header returns null but the full returns the layout. So properly something i am doing wrong in the configuration.The JSON for the groups
Sections
[ { "key": "group_5eff008386cc0", "title": "Sections", "fields": [ { "acfe_flexible_advanced": 1, "acfe_flexible_stylised_button": 0, "acfe_flexible_hide_empty_message": 0, "acfe_flexible_empty_message": "", "acfe_flexible_disable_ajax_title": 0, "acfe_flexible_layouts_thumbnails": 0, "acfe_flexible_layouts_settings": 0, "acfe_flexible_layouts_ajax": 0, "acfe_flexible_layouts_templates": 1, "acfe_flexible_layouts_previews": 0, "acfe_flexible_layouts_placeholder": 0, "acfe_flexible_title_edition": 0, "acfe_flexible_clone": 0, "acfe_flexible_copy_paste": 0, "acfe_flexible_toggle": 0, "acfe_flexible_close_button": 0, "acfe_flexible_remove_add_button": 0, "acfe_flexible_remove_delete_button": 0, "acfe_flexible_lock": 0, "acfe_flexible_modal_edition": 0, "acfe_flexible_modal": { "acfe_flexible_modal_enabled": "0" }, "acfe_flexible_layouts_state": "", "acfe_flexible_layouts_remove_collapse": 0, "key": "field_5f0b229eadf2a", "label": "Section", "name": "section", "type": "flexible_content", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "pc-builder" }, "acfe_permissions": "", "layouts": { "layout_5f0b22abdff72": { "key": "layout_5f0b22abdff72", "name": "full", "label": "Full", "display": "block", "sub_fields": [ { "key": "field_5f0b236aadf2b", "label": "Column", "name": "column", "type": "clone", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "acfe_permissions": "", "clone": [ "group_5eff00bd5006a" ], "display": "seamless", "layout": "block", "prefix_label": 0, "prefix_name": 1, "acfe_clone_modal": 0 } ], "min": "", "max": "", "acfe_flexible_thumbnail": false, "acfe_flexible_category": false, "acfe_flexible_render_template": "layouts\/full\/template.php", "acfe_flexible_render_style": "", "acfe_flexible_render_script": "", "acfe_flexible_settings": false, "acfe_flexible_settings_size": "medium" }, "layout_5f0b3507e21df": { "key": "layout_5f0b3507e21df", "name": "2_columns", "label": "2 Columns", "display": "table", "sub_fields": [ { "key": "field_5f0b3507e21e0", "label": "Column 1", "name": "column_1", "type": "clone", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "acfe_permissions": "", "clone": [ "group_5eff00bd5006a" ], "display": "seamless", "layout": "block", "prefix_label": 0, "prefix_name": 1, "acfe_clone_modal": 0 }, { "key": "field_5f0b524e15101", "label": "Column 2", "name": "column_2", "type": "clone", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "acfe_permissions": "", "clone": [ "group_5eff00bd5006a" ], "display": "seamless", "layout": "block", "prefix_label": 0, "prefix_name": 1, "acfe_clone_modal": 0 } ], "min": "", "max": "", "acfe_flexible_thumbnail": false, "acfe_flexible_category": false, "acfe_flexible_render_template": "layouts\/2_columns\/template.php", "acfe_flexible_render_style": "", "acfe_flexible_render_script": "", "acfe_flexible_settings": false, "acfe_flexible_settings_size": "medium" } }, "button_label": "Add layout", "min": "", "max": "" } ], "location": [ [ { "param": "post_type", "operator": "==", "value": "post" } ] ], "menu_order": 0, "position": "normal", "style": "seamless", "label_placement": "top", "instruction_placement": "label", "hide_on_screen": [ "permalink", "the_content", "excerpt", "discussion", "comments", "revisions", "slug", "author", "format", "page_attributes", "featured_image", "categories", "tags", "send-trackbacks" ], "active": true, "description": "", "acfe_display_title": "", "acfe_autosync": [ "json" ], "acfe_permissions": "", "acfe_form": 0, "acfe_meta": "", "acfe_note": "" } ]Column
[ { "key": "group_5eff00bd5006a", "title": "Column", "fields": [ { "acfe_flexible_advanced": 1, "acfe_flexible_stylised_button": 0, "acfe_flexible_hide_empty_message": 0, "acfe_flexible_empty_message": "", "acfe_flexible_disable_ajax_title": 0, "acfe_flexible_layouts_thumbnails": 0, "acfe_flexible_layouts_settings": 0, "acfe_flexible_layouts_ajax": 0, "acfe_flexible_layouts_templates": 1, "acfe_flexible_layouts_previews": 0, "acfe_flexible_layouts_placeholder": 0, "acfe_flexible_title_edition": 0, "acfe_flexible_clone": 0, "acfe_flexible_copy_paste": 0, "acfe_flexible_toggle": 0, "acfe_flexible_close_button": 0, "acfe_flexible_remove_add_button": 0, "acfe_flexible_remove_delete_button": 0, "acfe_flexible_lock": 0, "acfe_flexible_modal_edition": 0, "acfe_flexible_modal": { "acfe_flexible_modal_enabled": "0" }, "acfe_flexible_layouts_state": "", "acfe_flexible_layouts_remove_collapse": 0, "key": "field_5eff00c22694c", "label": "Column", "name": "column", "type": "flexible_content", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "acfe_permissions": "", "layouts": { "layout_5eff00d00a333": { "key": "layout_5eff00d00a333", "name": "block", "label": "Block", "display": "block", "sub_fields": [ { "key": "field_5f0b3c3621b98", "label": "Hels", "name": "hels", "type": "text", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "acfe_permissions": "", "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "" } ], "min": "", "max": "", "acfe_flexible_thumbnail": false, "acfe_flexible_category": false, "acfe_flexible_render_template": "layouts\/block\/template.php", "acfe_flexible_render_style": "", "acfe_flexible_render_script": "", "acfe_flexible_settings": false, "acfe_flexible_settings_size": "medium" }, "layout_5eff05526bc22": { "key": "layout_5eff05526bc22", "name": "header", "label": "Header", "display": "block", "sub_fields": [ { "key": "field_5eff05526bc24", "label": "Heading", "name": "heading", "type": "text", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "" } ], "min": "", "max": "", "acfe_flexible_thumbnail": false, "acfe_flexible_category": false, "acfe_flexible_render_template": "layouts\/header\/template.php", "acfe_flexible_render_style": "", "acfe_flexible_render_script": "", "acfe_flexible_settings": false, "acfe_flexible_settings_size": "medium" } }, "button_label": "Add item", "min": "", "max": "" } ], "location": [ [ { "param": "post_type", "operator": "==", "value": "post" } ] ], "menu_order": 0, "position": "normal", "style": "default", "label_placement": "top", "instruction_placement": "label", "hide_on_screen": "", "active": false, "description": "", "acfe_display_title": "", "acfe_autosync": [ "json" ], "acfe_permissions": "", "acfe_form": 0, "acfe_meta": "", "acfe_note": "" } ]Oh! and thank you for replying, really appreciate your work.
Best regards!
Hello,
Thanks for the detailed report. I tested your code, and in fact you fell in a loophole here.
The problem come from the
columnclone field which has the same name as thecolumnflexible content field. When you callget_flexible('column'), the plugin recognizes the clone field and not the flexible content field, so it cannot loop over it correctly.You can fix that by simply renaming your
columnclone field to something unique, likecolumn_clone.See screenshot: https://i.imgur.com/hQWNhqP.png
Nested Flexible Content result: https://i.imgur.com/JWciVvz.pngThis loophole inspired me an enhancement which will be included in the next patch. This problem won’t exist anymore, as the plugin will target the correct flexible content, whether it is included in a clone with same name or not ??
Hope it helps!
Have a nice day.
Regards.
Hello,
Just a heads up, the new ACF Extended: 0.8.6.7 update fix that edge case, out of the box ??
Have a nice day!
Regards.
- The topic ‘Flexible content nested’ is closed to new replies.
