Initiating Javascript Sage 10 ACF Extended Iframe Flexible Previews

sage
1

I’m attempting to use the ACF Extended Flexible Dynamic Render Iframe feature with Sage 10.

The templates are loading fine, however the Javascript is not initiating. I figure this might be because the iframes used are using srcdoc and perhaps that is stopping Sage’s domReady code from triggering as expected.

Here’s the code I use to render the templates

**
 * ACF Extended Flexible Previews
 */

/**
 * Define which flexible fields to Hijack ACF preview rendering
 */
define('FLEXIBLE_FIELDS_TO_HIJACK', ['sections']);
// define('FLEXIBLE_FIELDS_TO_HIJACK', ['sections', 'content', 'sidebar']);


/**
 * Hijack ACFE preview rendering and return an empty file.
 */
add_filter('acfe/flexible/render/template', function ($file, $field, $layout, $is_preview) {
    if(in_array($field['name'], FLEXIBLE_FIELDS_TO_HIJACK)){
        return get_stylesheet_directory() . '/../index.php';
    }
    else {
        return $file;
    }

}, 10, 4);


/**
 * We'll use the before_template filter to render the preview
 */
add_action('acfe/flexible/render/before_template', function($field, $layout, $is_preview){
    if(in_array($field['name'], FLEXIBLE_FIELDS_TO_HIJACK)){ // make sure field name is allowable
        // Send preview status to view
        $data = ['is_preview' => $is_preview];

        // Get data for all fields in layout
        foreach ($layout['sub_fields'] as $sub_field) {
            $data[$sub_field['name']] = get_sub_field($sub_field['name']);
        }

        echo \Roots\view('builder.' . $field['name'] . '.' . str_replace('_', '-', $layout['name']), $data)->render();
    }
}, 10, 3);


/**
 * Enqueuing site assets
 */
function enqueue_dynamic_preview_assets($field, $is_preview){
    wp_enqueue_script('jquery');
    bundle('app')->enqueue();
}

foreach(FLEXIBLE_FIELDS_TO_HIJACK as $field_name){
    add_action("acfe/flexible/enqueue/name={$field_name}", __NAMESPACE__ . '\\enqueue_dynamic_preview_assets', 10, 2);
}

The javascript uses the standard Sage setup with:

domReady(async () => {

});

Thanks for any assistance.

2

Please show your work and post your code

1 Like
3

Updated! Much thanks

1 Like
4

Still stuck on this.

I’ve tried moving my boot code to a function I attach to the window.

import...

window.bootRoutine = function(){
  // customizations...
}

if (document.querySelector('div.dynamic-preview')) {
  window.bootRoutine();
}

domReady(async () => {
  window.bootRoutine();
});

It runs on the frontend but not in the previews. I’ve also tried loading the function from within an inline script tag after a setTimeout and the console says the function doesn’t exist. I’m guessing maybe Webpack is messing with things, but not sure what to try next.

Thanks for any help