Support

Account

Home Forums ACF PRO ACF Slider not firing in preview mode

Solving

ACF Slider not firing in preview mode

  • Hey peeps

    Hope you are all well

    I’ve built a custom block for a carousel, I have the block all working and the carousel working on the frontend.

    Only issue is, in preview mode in the editor, the init.js isn’t firing for the carousel.

    All the scripts are there, just not working in the admin, so the preview won’t show the carousel.

    My init.js file below.

    
    (function($){
    
        var initializeBlock = function( $block ) {
            $(".owl-carousel").owlCarousel({
                  margin: 10,
                  nav: true,
                  navText: '',
                  loop: true,
                  autoHeight:false,
                  responsive: {
                    0: {
                      items: 1
                    },
                    768: {
                      items: 2
                    },
                    1024: {
                      items: 3
                    }
                  }
            });
        }
    
        // Initialize each block on page load (front end).
        $(document).ready(function(){
          initializeBlock();
        });
    
        // Initialize dynamic block preview (editor).
        if( window.acf ) {
            window.acf.addAction( 'render_block_preview/type=owl-carousel', initializeBlock );
        }
    
    })(jQuery);
    
    
  • I suggest you to use “Slick Slider” it is way more flexible, faster, better, everything. I know it does not help but when I see someone using this retarded OWL slider I want to prevent them to make a big mistake ๐Ÿ˜‰

  • The issue here is initializeBlock is not being fired as the condition type=owl-carousel is not being met for render_block_preview.

    I had the same issue.

    I currently have support ticket waiting, as type seems to the name of the the block registered by <?php acf_register_block_type(), but maybe there is something more to it.

    In the mean time, I have removed the type parameter. Slight issue is that the initializeBlock runs on every ACF block loaded, but that is not a huge issue for me at this point.

    Hope that is of some help, Joe.

  • Hi @jm_design

    Thanks for the topic.

    Can you please post the PHP used to register your block type?
    I’ll use this to setup a local version of your block and get to work on diagnosing the issue ๐Ÿ™‚

  • I’m having this same issue. Using slick slider instead of owl. When I add images to either a repeater or gallery the callback does not fire. Here’s my JS. Some of the slider logic is imported, but that doesn’t seem to be the issue. It won’t even console log the message and date I’ve got setup.

    Now, if I save the page and reload the editor then things seem to work fine. The callback fires and the slider properly initializes. It’s only when a new block is added and edited that this problem appears.

    
    import { default as sliders } from "../../../assets/src/js/modules/_sliders.js";
    
    (function ($) {
    
    	/**
    	 * initializeBlock
    	 *
    	 * Adds custom JavaScript to the block HTML.
    	 *
    	 * @date    15/4/19
    	 * @since   1.0.0
    	 *
    	 * @param   object $block The block jQuery element.
    	 * @param   object attributes The block attributes (only available when editing).
    	 * @return  void
    	 */
    	var initializeBlock = function( $block ) {
    
    		var d = new Date();
    		var n = d.toLocaleTimeString();
    
    		console.log( 'setup sliders on back end ' + n );
    
    		var slider = $block[0].querySelector(".js-image-slider");
    
    		if (slider) {
    			sliders.setupImageSlider(slider);
    		}
    
    	}
    
    	// Initialize each block on page load (front end).
    	$(document).ready(function () {
    
    		const imageSliders = document.querySelectorAll(".js-image-slider");
    
    		if (imageSliders) {
    			imageSliders.forEach(element => {
    				sliders.setupImageSlider(element);
    			});
    		}
    
    	});
    
    	// Initialize dynamic block preview (editor).
    	if (window.acf) {
    		window.acf.addAction('render_block_preview/type=image-slider', initializeBlock);
    	}
    
    })(jQuery);
    
    
           acf_register_block_type( array(
            'name'            => 'image-slider',
            'title'           => __( 'Image slider', 'apm-theme' ),
            'description'     => __( 'Displays an image slider', 'apm-theme' ),
            'render_template' => 'blocks/acf-image-slider/acf-image-slider.php',
            'category'        => self::get_block_category('slug'),
            'mode'            => 'preview',
            'enqueue_assets' => function() {
              APM_Theme::enqueue_vendor_resources( 'slick' );
              wp_enqueue_script( 'apm-quote-slider', get_template_directory_uri() . '/blocks/acf-image-slider/assets/acf-image-slider.min.js', array('jquery', 'slick'), '', true );
            },
           ) );
    
  • Side note: When this ACF block is included in a block pattern the callback does not fire for the block pattern preview. So it shows stacked images rather than the slider. If I add that block to the page then reload the block pattern preview then looks as it should (shows the slider).

  • Well, I may have just solved the issue for myself after reviewing what I pasted above. In acf_register_block_type I was using a script name (apm-quote-slider) that I was using for a different script. After updating that to a unique name for this script the problem seems to be resolved.

  • Hi jkgk and Elliot,

    Have you found any new solution for this problem of “type” argument?
    I’m stuck with the same problem (script work without “type”, script not loaded with “type”).

    As jkgk have said it’s not a big matter to leave the type argument but in the same time it would be a pitty not to use it if it’s supposed to be available ๐Ÿ˜‰

    And by the way, I’ve turn around the subject on the forum and I suspect that some unanswered topics are related with the same problem.

    Thanks for any help!

  • Hello @lautobus,

    This was a little while ago and I don’t have time to look through everything, but this maybe relevant: block names should not contain an underscore, they should use dashes.

    Block names must include only lowercase alphanumeric characters or dashes.

    This rule is something built into WP core, and ACF has some code that automatically converts _ to - to avoid the issue.

    I.e. carousel_block should be converted to carousel-block.

    Hope that is helpful. Thanks.

  • Nice, thanks ๐Ÿ˜€

  • Thanks for your help. There was another plugin which hooked into the โ€œsave_postโ€. So this is working now.

  • Thank you so much for posting this. That was my issue. I spent a good hour trying to figure out why the content was not loading in the editor and simply replacing the _ for – worked!

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

You must be logged in to reply to this topic.