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 πŸ˜‰

    • webprom

    • January 28, 2020 at 3:21 am

    Maybe you need to use $block.find(".owl-carousel").owlCarousel({

    https://www.advancedcustomfields.com/blog/building-a-custom-slider-block-in-30-minutes-with-acf/

    • jkgk

    • June 5, 2020 at 2:25 am

    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.

    • Elliot

    • June 12, 2020 at 8:56 am

    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 πŸ™‚

    • apmeyer

    • September 17, 2020 at 2:56 am

    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 );
            },
           ) );
    
    • apmeyer

    • September 17, 2020 at 3:00 am

    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).

    • apmeyer

    • September 17, 2020 at 3:05 am

    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.

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.