Support

Account

Register Login

Forum Replies Created

  • redmeesblue, I’ve got the following structure:

    Editor (Flexible Content) > Elements (Flexible Content) > Page Element (various field layouts)

    The first level, the editor, uses a flexible content element with one layout that serves as the container for the page elements. Then, the elements field inside it uses a flexible content field that contains the page elements as layouts.

    I’ve done some more complex UI customization to enable modal windows and resizable containers, but I think you can still get the dragging to work without all that.

  • woody, were you able to get the connectWith parameter to work for jQuery sortable on your repeater? I think that’s the first step. If you can target the right selector there, you’ll be able to move layouts between repeaters in the editor. However, you won’t be able to save them successfully until you’ve modified the code further.

    Start by adding the connectWith attribute to the sortable() function for repeaters in /advanced-custom-fields-pro/pro/assets/js/acf-pro-input.min.js

  • Success! I had wrote a script that modifies the name attribute of elements to match the new column and element locations. It’s hooked into the sortstop action. This code should work on most any setup with only two substitutions, the [data-name=”elements”] and [data-layout=”columns”] attributes are specific to my setup. It uses a nested flexible content field structure where the columns are a layout under the primary flexible content field. Elements is another flexible content field that’s part of the column layout. 

    // Handle Dragging Between Columns
function GetSubstringIndex(str, substring, n) {
    var times = 0, index = null;

    while (times < n && index !== -1) {
        index = str.indexOf(substring, index+1);
        times++;
    }

    return index;
}
acf.add_action('sortstop', function ($el) {
    if ($($el).parent('[data-name="elements"] > .acf-input > .acf-flexible-content > .values').length) {
        var column_num = $($el).closest('[data-layout="column"]').attr('data-id');
        $($el).find('[name^="acf[field_"]').each(function(){
            var field_name = $(this).attr('name');   
            var index_location = field_name.indexOf(']')+2;
            var new_name = field_name.substr(0, index_location) + column_num + field_name.substr(index_location+1)
            $(this).attr('name', new_name);
        });
        $($el).closest('[data-name="elements"]').find('.acf-input > .acf-flexible-content > .values > .layout').each(function(index){
            $(this).find('[name^="acf[field_"]').each(function(){
                var field_name = $(this).attr('name');   
                var index_location = GetSubstringIndex(field_name,']', 3)+2;
                var new_name = field_name.substr(0, index_location) + index + field_name.substr(index_location+1);
                $(this).attr('name', new_name);
            });
        });
    }
});

  • Ok, a little closer, I was able to get the field save in the new flexible content field that it gets moved to. However, the field’s value does not get saved.

    I modified the code in the .acf-hidden input so that the page element’s layout gets updated in this format:

    acf[column_field_key][1][elements_field_key][2][acf_fc_layout]

    I changed the column number from 0 to 1 to move the page element from the first column to the second.

  • We are working on a page builder. It’s looking good so far, but we are still missing this feature — drag and drop between repeaters and flexible content fields.

    I’ve tried a few different tests that allow me to move field layouts from one flexible content field to another, but I still haven’t figured out how to get it to save correctly.

    Initially, I thought it might be related to a conflicting data-id on the layout wrapper, but a subsequent test proved that theory wrong. There must be a conflict with the way the fields are saved. It’s also possible that there’s a conflict with the sortstop function that fires after the element gets moved.

    I’ll continue to debug and post updates. Elliot, if you’re reading this and have more insights, I’d be happy to have your help.

  • I’m currently working on a live editor that allows users to build a page with flexible content field elements. I have already built in features to resize columns, sort elements with drag and drop, and delete elements. Now I’m up against the biggest challenge: adding/updating elements via ajax.

    In theory this could be done by creating a duplicate page with a status of “live draft”. Then fields that are added or edited in the front end form get saved to the live draft. When finished editing, the contents of the live draft would be copied to the actual page.

    I’ve got the duplication working, but I’m not sure how to handle adding/editing fields. When I pull data from the form created by acf_form() on the front end, I’m getting field names in this format:

    acf[field_5442aa647c573][2][field_54241c7840131][0][field_54241c784515d][0][field_54241c784a114]

    Looks like field key and row numbers for a few nested flexible content/repeater fields. When I run get_post_meta() on the page, the entries are formatted like this (same field as example above):

    flexible_content_editor_2_elements_0_tab_editor_0_tab_title

    When inspecting the code inside ACF’s api-template.php, I see that the update_sub_field() function utilizes this format that matches the actual post meta:

    {$row[‘name’]}_{$row[‘i’]}_{$field[‘name’]}

    I’m thinking the best way to approach this is to write an ajax call that converts field keys to row and field names to be used in either update_sub_field() or update_post_meta(). Then, return the updated field content to be displayed on the live edit page without reloading.

    I’m interested to hear other approaches and/or advice on how to get this working. Thanks!

  • I added that code to the correct .sortable() call in acf-pro-input.js and yes, you can move elements between flexible content containers now, but when saving, the element that was moved gets deleted from the page entirely.

    When I inspect the DOM, I see that the element that was moved has the same data-id as another element in the container that it was moved to. I’m guess that’s the conflict here.

    Help on this one would be killer. Thanks!

  • This feature would be outstanding for flexible content. I’ve created a page builder plugin that has drag/drop & resizable columns. Dragging between them would be a major improvement. Thanks for such a great plugin!

  • I too have had trouble with conditional logic on the front end. Is this actually supported? Perhaps it’s because I’m working with flexible content that it’s not working…

  • This is a great idea. I’d love to see this actually working. I tried your code and it works inside the editor. The post doesn’t save correctly though.

  • It’s not too hard to create a layout builder effect with the flexible content field. You just need a little js to change the widths of the fields and you can achieve something like this:

    Flexible Content Builder

  • Ok, I’ve narrowed it down to a plugin conflict with CMS Tree Page View.

    It is also documented here: http://support.advancedcustomfields.com/forums/topic/cms-tree-page-view-acf/

  • I’m having this issue too, but only on certain servers. I think it might have to do with the path settings, but I’ve been unable to fix it.

    I can access the field groups page from the url, but it is not present in the menu.

  • That functionality would be great if it would be possible to sync without losing data associated with fields that get updated.

  • I am also experiencing this issue as well. I have everything working locally, but when I move the project files, the custom fields are lost.

    I’ve followed the guide in the link and check permissions etc. Is there something about the database version of the fields that could be causing an issue?

Viewing 15 posts - 1 through 15 (of 15 total)