0

I have a smart tag inside a hidden field in my WP Forms (written with php - see below) that collects user data, however this significantly slows down the webpage. The div ID is: wpforms-10395-field_107. The url is: https://ellasbubbles.com/contact-us/

My question is, how can I prevent this div from loading until after the page has fully loaded. This way it can load in the background while the user is populating their contact form details

Note: A better solution might be to keep this div empty, and simply populate it with the shortcode on page load?

PHP (currently in functions.php) - Grabs users location details and stores them in a smart tag:

  add_shortcode('geo', 'shortcode'); 

function wpf_dev_register_smarttag( $tags ) {
 
    // Key is the tag, item is the tag name.
    $tags['geo'] = 'geo';
 
    return $tags;
}
add_filter( 'wpforms_smart_tags', 'wpf_dev_register_smarttag' );
 

function wpf_dev_process_smarttag( $content, $tag ) {
    
    $city = do_shortcode('[userip_location type=city]');
$country = do_shortcode('[userip_location type=country]');
$region = do_shortcode('[userip_location type=region]');
$flow = do_shortcode('[track-user-flow]');
 
    // Only run if it is our desired tag.
    if ( 'geo' === $tag ) {
       $userinfo    = '<b>City:</b> ' . $city . "\n" .  '<b>Region:</b> ' . $region . "\n" . '<b>Country:</b> ' . $country . "\n" . "\n" . '<b>User Flow:</b> ' . $flow;
        // Replace the tag with our link.
        $content = str_replace( '{geo}', $userinfo, $content );
    }
 
    return $content;
}
add_filter( 'wpforms_smart_tag_process', 'wpf_dev_process_smarttag', 10, 2 );

It looks like I can use:

$(window).load(function(){ 
    $.get("<path to php file>", function(data){
    Replace Placeholder code here? (maybe)
    });
})
disinfor
  • 10,865
  • 2
  • 33
  • 44
Ellas International
  • 13
  • 3
  • 1
    You can use JavaScript to fetch content asynchronously and manipulate the DOM accordingly; see [AJAX](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX). Also see [Load HTML File Contents to Div](https://stackoverflow.com/questions/3535055/load-html-file-contents-to-div-without-the-use-of-iframes). – showdev Jun 17 '21 at 21:13
  • If you can elaborate on those I would be very greatful, I am trying everything to ensure this php script does not slow down the page and rather runs in the background... and then replaces the {geo} smart tag when complete – Ellas International Jun 17 '21 at 21:16
  • Using jQuery, your [`$.get()`](https://api.jquery.com/jquery.get/) call is a good start. Incidentally, I can't reproduce the issue you describe. What content is being loaded and why does it take so long? – showdev Jun 17 '21 at 21:21
  • Please attempt again, I have just placed the hidden field back on the form. Notice the long load time as the smart tag must pull all data from php and populate it: wpforms-10395-field_107 – Ellas International Jun 17 '21 at 21:22
  • My goal is to compile this smart tag in the background. Then write it over placeholder text that will rest inside of the hidden field until the smart tag rewrite is ready. – Ellas International Jun 17 '21 at 21:26
  • 2
    Please see the FAQ [Something in my web site or project doesn't work. Can I just paste a link to it?](https://meta.stackoverflow.com/q/254428/215552) I know, you posted code, but frankly, I can't make heads or tails out of PHP code. I added the [php] tag so maybe people who can will see the question; if you posted the rendered HTML, and the HTML into which you wanted to place it, then you'd be closer to the [mre] we look for in a question in [ask]. – Heretic Monkey Jun 17 '21 at 21:30
  • 1
    Added the WP tag to the question, as that will make a difference in the answers you get. I would, as @showdev suggested, look into [WP Ajax](https://www.smashingmagazine.com/2011/10/how-to-use-ajax-in-wordpress/) and basically, you would want AJAX, after the DOM is fully loaded, to then call your PHP function that outputs your shortcode. – disinfor Jun 17 '21 at 21:35
  • The PHP is converting shortcodes using another plugin, which is causing the delay. Another reason why it would be effective to be able to run this in the background – Ellas International Jun 17 '21 at 21:39
  • 1
    Looking at the data you are gathering, it's most likely not the shortcode from another plugin as the reason - PHP is rendered pretty quick and shortcodes are no exception since they are done on the server before the user sees the page. It looks like you are pulling geolocation data, which is probably the bottleneck for your site. AJAX will be your best bet here. – disinfor Jun 17 '21 at 21:42
  • I am not too familiar with AJAX, nor is there a good answer for this question on the web. Can someone break it down to assist how to implement AJAX into a wordpress page? – Ellas International Jun 18 '21 at 14:58

0 Answers0