The Ajax loading/page caching compatibility option allows you to use dynamic content while continuing to enjoy the advantages of caching.
With the Page Caching Compatibility option enabled, dynamic triggers will be rendered in a separate request after the cached version is loaded (you can learn more about how Ajax works here).
There are two options to enable Ajax loading (page caching compatibility): Via the plugin settings for all triggers together or by adding a parameter to the shortcode of a specific trigger.
If your dynamic content is set up using conditional Elementor elements or Gutenberg blocks, you need to enable Ajax Loading for each element/block separately.
On your WordPress Dashboard, go to If-So > Settings and check the “Render triggers via Ajax” checkbox.
This option will affect all triggers and content created using the CSV Bulks extension. It will not affect conditional Elementor elements and conditional Gutenberg blocks (for them, you should set the Ajax loading separately when you set the element/block).
To make a specific trigger load with Ajax you can add the parameter ajax=”yes” to the trigger shortcode:
[ifso id="123" ajax="yes"]
Want to enable Ajax on a trigger that is embedded using PHP directly in the page template (for developers)? Click here
When Ajax Loading is enabled, the static content of the page is served from the cache, and the dynamic content is rendered moments after. Naturally, there will be a delay between the loading time of the two.
The length of the delay depends on numerous factors, like the way your site is built, your server, the amount of dynamic content, and so on.
If you find that the delay between the loading of the page from the cache and the loading of dynamic content is too long, you might want to show an animated loader or display the default content during this time gap.
You can show the default content or the loader in two ways:
Adding the parameter to the shortcode will override the selected option in the plugin’s settings.
To show a loader animation – Add the parameter loader=”X” to the trigger’s shortcode (possible values instead of X are 0,1, or 2).
Example: [ifso id="123" loader="1"]
Loader styles:
loader =”default-content”
The default version
loader =”0″
No loader
loader=”1″
loader=”2″
Changing the loader size
Changing the loader size is possible by changing the width and height attributes of the CSS Class .lds-dual-ring:after
.lds-dual-ring:after, ifso-logo-loader:after {
width: 12px;
height: 12px;
}
Aligning the loader to the center
The following code will work in most cases (If it doesn’t work, try setting a width to the element that wraps the trigger).
.lds-dual-ring:after, ifso-logo-loader:after {
display:block;
margin: 5px auto;
}
*If you’d like to inspect the loader using the browser’s “Inspect Element” option you can do it by disabling the JavaScript.
In some cases, if you load the dynamic content using Ajax, some of the modules loaded using this method might not function as expected (usually modules that involve JavaScript). Learn more.