[Resolved] Infinite Scroll loading un-styled content

[Author]

Posts

[ian-scottP]

I want infinite scroll to load blog posts:
hidden link

it loads, but not correctly

[Jamal]

Hello and thank you for contacting the Toolset support.

It seems that you are styling the loop for the view with WPBakery, without using a content template. Toolset Integration with WPBakery is to build ONLY content templates with WPBakery. Then use these templates inside the view loop.
That is because WPBakery uses shortcodes and that is a limit when using AJAX loading(infinite scroll) https://toolset.com/documentation/user-guides/views/views-pagination/#limitations-of-using-ajax-pagination

Can I take a closer look at your view? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

My apologies for the late reply. I don't work on Sundays and Mondays.

Thank you for the credentials, they are working for the staging site. But I could not figure out which view you are working on. I visited all the pages on the top and bottom menus, but none of them has an infinite scroll list.

Can you provide a URL where to see the issue and tell me which views are involved?

[ian-scottP]

hidden link

[Jamal]

I tried to fix the issue by registering WPBakery shortcodes with custom code in Toolset->Settings->Custom Code. But that did not help.

add_action('init', 'add_mapped_shortcodes_on_init');
function add_mapped_shortcodes_on_init() {
    if ( is_admin() ) {
        WPBMap::addAllMappedShortcodes();
    }
}

I'll need to take a copy of your website for further debugging. Then I'll approach our 2nd Tier for another opinion and get back to you.
Would you be ok that I install Duplicator and take a copy of your website? Can you create a Duplicator copy and let me download it? Please use filters to exclude the uploads folder.

[ian-scottP]

Sure... you are welcome to duplicate it. If you want me to do it, just let me know when the plugin is installed.

[Jamal]

Duplicator package has failed twice, maybe because of the max_execution_time. I only took a database copy. I'll still need your plugins and theme. Please share a zip file containing your themes and plugins folder using DropBox, GDrive, or your website. Your next reply will be private to let you share the download link safely.

[ian-scottP]

here is a dropbox link to download themes and plugin folders
hidden link

[Jamal]

Thank you! I built a local copy and I'll get back to you as soon as possible.

[Jamal]

Hello,

We found a solution for this issue you can check it on the staging site hidden link

First, I added the following code to Toolset->Settings->Custom code. You can add it to the child theme functions.php if you want.

add_filter( 'wpv_filter_query', 'func_parse_shortcodes', 99, 3 );
function func_parse_shortcodes( $query_args, $view_settings, $views_id ) {
	if ( $views_id == 990 ) { // if it is specific view and by default
		WPBMap::addAllMappedShortcodes();
	}
	
	return $query_args;
}

This has fixed the issue of the shortcodes. But the result was blank because of some CSS issues related to the theme. I did not investigate the origin of it. But I produced a workaround/hack. It consists of creating a Javascript function to show the loaded content. The Javascript code is added to the view Javascript section.

hack_view_styles = function(){
  jQuery('.row .col-md-12 .grve-section.bloggrid').each(function(){
    var row = jQuery(this);
    console.log(this, row)
    row.addClass('grve-section grve-row-section grve-fullwidth-background grve-bg-none grve-custom-height grve-middle-content bloggrid grve-show-custom-height');
    row.find('.grve-column-1-2 img').css('opacity', 1);
  })
}

Then I registered the function to be called after the AJAX loading in the view. In "Pagination and Sliders Settings"->"Pagination enabled with manual transition and AJAX"->"Callback function". Check this screenshot hidden link

I hope this helps.