Trigger popup with php

[wachalala]

Hello,

Since ~15 december my popup didn't appear.

I used to trigger it with php like that :

return do_shortcode( '[elementor-template id="53065"]' );
(http://prntscr.com/qisqvt)

Do you know if something change about that ?

Thank you

[shilo-ey]

Hi @wachalala

Thanks for reporting.

Using the shortcode doesn't mean that the popup will launch.

You can add the popup to the a page based on your condition using the provided API, ex:

add_action( 'wp_footer', function() {
	if ( ! $CONDITION ) {
		// exit and dont even print the popup
		return;
	}
	//add the popup to the page
	ElementorPro\Modules\Popup\Module::add_popup_to_location( '234' ); // 234 is the popup id
} );

Please note that you will still need to add the trigger and advanced rules if needed.

Thanks

[wachalala]

Hello,

Thank you for your fast help @shilo-ey !

I try your code but it didn't launch anything :/

add_action( 'wp_footer', function() { //add the popup to the page ElementorPro\Modules\Popup\Module::add_popup_to_location( '53065' ); // 234 is the popup id } );

My popup

The popup setting :

Do you have any tips on that ?

During my test i desactivate all my plugin and refresh with cache my page each time.

Thank you :)

[shilo-ey]

Hi @wachalala

You can either use Elementor conditions system, or create your own condition and register it to the conditions system.

If you still want to use code:

// add the popup to the page 
add_action( 'wp_footer', function() { 
	// set popup id
	$popup_id = '3955';
	// insert the popup to the current page
	ElementorPro\Modules\Popup\Module::add_popup_to_location( $popup_id );
	
	?><script>
	 // wait for the page to load
	jQuery( document ).ready( function() {
		 // wait for elementor to load
		jQuery( window ).on( 'elementor/frontend/init', function() {
			// wait for elementor pro to load
			elementorFrontend.on( 'components:init', function() {
				 // show the popup
				elementorFrontend.documentsManager.documents[<?php echo $popup_id ;?>].showModal();
			} );
		} );
	} );
	 </script>;
	 <?php
 } );

You need to trigger your popup after inserting it to your page.

Thanks

[rftxcom]

This code does not work.

[learning-igo]

Hi @wachalala

You can either use Elementor conditions system, or create your own condition and register it to the conditions system.

If you still want to use code:

// add the popup to the page 
add_action( 'wp_footer', function() { 
	// set popup id
	$popup_id = '3955';
	// insert the popup to the current page
	ElementorPro\Modules\Popup\Module::add_popup_to_location( $popup_id );
	
	?><script>
	 // wait for the page to load
	jQuery( document ).ready( function() {
		 // wait for elementor to load
		jQuery( window ).on( 'elementor/frontend/init', function() {
			// wait for elementor pro to load
			elementorFrontend.on( 'components:init', function() {
				 // show the popup
				elementorFrontend.documentsManager.documents[<?php echo $popup_id ;?>].showModal();
			} );
		} );
	} );
	 </script>;
	 <?php
 } );

You need to trigger your popup after inserting it to your page.

Thanks

Thank you very much @shilo-ey this helps a lot.

this works perfectly: but only for about one use. then the popup doesn't open anymore. I know the rest of the code is running. (I have a couple of console.log() to make sure the rest is working.) but the popup itself is not opening again.
I tried creating a new popup, and it started to work again. but after I refresh the page it won't open anymore.
So I can get it to work for one use. then I must create a new popup and change the popup Id to get it to work.
does anybody know why is this happening?
See my code below:

function igo_popup(){
    if (! is_product() ) {
        return;
    }   
    $product = wc_get_product();
    $id = $product->get_id();


    if ( $id != '20637' ){// exit if not igo test
        return;
    }

    	// set popup id
	$rafting_popup_id = '20979';
    $kanadier_popup_id = '21089';
	// insert the popup to the current page
    ElementorPro\Modules\Popup\Module::add_popup_to_location( $rafting_popup_id );
    ElementorPro\Modules\Popup\Module::add_popup_to_location( $kanadier_popup_id );
   
        
         ?>
         <script type="text/javascript">
         jQuery(document).ready(function($){

            jQuery( window ).on( 'elementor/frontend/init', function() {
			// wait for elementor pro to load
			elementorFrontend.on( 'components:init', function() {
                

                //start the magic dance!
                $("form.cart").find("button[type='submit']").hover(function(){
                            
                    var qty = document.getElementById("wc_bookings_field_persons");
                    var pax = parseFloat(qty.value);
                    console.log("pax is "+ pax);
                    

                    // start logic for alerts

                    if( pax < 9 || 15 <= pax && pax <= 18 ){
                        //und Benachrichtigung + Link zum Rafting
                        console.log("rafting popup");

                        elementorFrontend.documentsManager.documents[<?php echo $rafting_popup_id ;?>].showModal();//sucessfully calls rafting popup
                        
                    }
                    else if( 11 < pax && pax <= 14 || 23 <= pax && pax <= 26 ){
                        //und Benachrichtigung + Link zum FAQ Otter 
                        console.log("OTTER popup");
                        
                        elementorFrontend.documentsManager.documents[<?php echo $kanadier_popup_id ;?>].showModal();//sucessfully calls rafting popup

                    }
                    else{
                        //do nothing -- there is no popup necesary          
                    }

                }, function(){
                    //do nothing when the mouse goes away from the button
                });
                //the magic ends
		
            } );
		} );
 
    });
        
         </script>
             <?php
        
}
add_action('wp_footer', 'igo_popup'); 
`

[dabesa]

@shilo-ey The code works only for admin users.
For users with non-admin roles, there's an error in console, I suspect because the /plugins/elementor-pro/assets/js/popup.6a2540c839ce119e42a7.bundle.min.js is not loaded.

The error is:
jquery.min.js?ver=3.6.0:2 Uncaught TypeError: this.getModal is not a function

Thanks

[woodydaniel]

@dabesa did you find a solution?
I'm also struggling with this

[gwhispert]

I'm also struggling with this. Does someone find a solution or another way to display it?

[newworldlife1]

@dabesa
Your right above all codes run when we are login as admin.

For guest users it's not working...

Strange things...why still no solution given for same...as i have seen same issue reported by many of them

[newworldlife1]

Hi @wachalala

You can either use Elementor conditions system, or create your own condition and register it to the conditions system.

If you still want to use code:

// add the popup to the page 
add_action( 'wp_footer', function() { 
	// set popup id
	$popup_id = '3955';
	// insert the popup to the current page
	ElementorPro\Modules\Popup\Module::add_popup_to_location( $popup_id );
	
	?><script>
	 // wait for the page to load
	jQuery( document ).ready( function() {
		 // wait for elementor to load
		jQuery( window ).on( 'elementor/frontend/init', function() {
			// wait for elementor pro to load
			elementorFrontend.on( 'components:init', function() {
				 // show the popup
				elementorFrontend.documentsManager.documents[<?php echo $popup_id ;?>].showModal();
			} );
		} );
	} );
	 </script>;
	 <?php
 } );

You need to trigger your popup after inserting it to your page.

Thanks

It's only run when we are login in admin..