[Resolved] Ajax load more for directory listings

[Author]

Posts

[orlaF]

My directory page is very slow to load as all listings need to load to populate the map correctly. How can I add ajax load more functionality to listings?

Page with the issue: hidden link

Kind Regards,
Orla

[orlaF]

I have gotten the infinite scrolling to work (it is quite slow to load - it is possible to improve this?) but the pagination button are still appearing - shouldn't they be hidden if it is using infinite scrolling? See screenshot: hidden link

[Waqar]

Hi Orla,

Thanks for writing back.

From the code, it seems that those pagination controls are being added by the active theme (DIVI), but I'll need to see how this view is set up to confirm this.

Can you please share temporary admin login details, in reply to this message?

Note: Your next reply will be private and though no changes will be made on your website, please make a complete backup copy, before sharing the access details.

regards,
Waqar

[orlaF]

Hi Waqar,

Did you get a chance to investigate this?

When I activate the infinite scroll option the map jumps down the page on the /listing/ (Townmap) page - do you know why this is happening?

The lazy load is happening before I scroll to the bottom of the page so the page is greyed out while it loads more when I am viewing the map - making a very strange experience for a viewer.

Also an issue I am facing with infinite scroll is that the map is only partially populated when all the listings are not loaded. Is there any way to fully load the listings on the map and then lazy load the rest of the listings?

Kind Regards,
Orla

[Nigel]

Hi Orla

Waqar has public holidays, let me take a look.

I can't see the issue with the map jumping down the page.

You already display quite a few results on the page, so by the time I reach the bottom of the page to trigger an update with infinite scroll I can't see the map at the top of the page to know if anything happens to it, and it doesn't jump into the visible part of the page, so I'm not sure what you mean.

I do see that the existing results are greyed-out when polling for additional results, I'll need to check this on my own test site, I'm not sure if there is any combination of settings that can prevent this.

Regarding the partially-populated map, that is expected, because you are using a single query to generate both the map and the list of results (the custom archive).

It's not possible to create a WordPress query to get paginated results (for the listing) that also returns all results (for the map), it's one or the other.

Or both.

You need a separate View for the map which loads all results without any pagination.

I'll take a look at the greying-out issue and get back to you.

[orlaF]

Hi Nigel,

This is really helpful thank you. I will see about just loading a map with all of the markers and see if that makes the page faster to load. Also that would stop the map from reloading every time the content reloads.

For me - the infinite scroll is loading even at the top of the page, not having scrolled down - so when I am just checking out makers on the map, it is going grey and then reloading. I will try having a map that has all the listings and underneath just show a few featured listings instead of trying to load them all in.

Kind Regards,
Orla

[Nigel]

Hi Orla

Let me know when you've made the changes relating to the map, and if that still means problems with your updating via infinite scroll.

You should only see the existing listings greying-out while a loading spinner appears, and you wouldn't be seeing that if in the settings you preload some pages of results.

[orlaF]

Hi Nigel,

I am still having a lot of trouble with this map. I've tried removing the listings under the map but that doesn't impact the speed / ability to load all listings at all.

What I need to happen: A map of the town to show all of the markers at once that loads quickly.

What is happening:
1. INFINITE SCROLL ON: When I have infinite scroll switched on the map jumps around and the page reloads even before I have scrolled down. See this in action here: hidden link
2. NO PAGINATION: When I choose the no pagination option the map and all the page contents disappears completely and the page takes over 30 seconds to load.

There are only around 100 listings on this site currently. Eventually there will be between 300 - 400 listings. Surely it should not be this slow / troublesome.

Kind Regards,
Orla

[Nigel]

Hi Orla

I don't see anything odd with the map loading when I visit the listing archive, it loads normally, though it takes about 10 seconds to display.

I had recommended that you create a separate View for the map, which is required if you want the map to display all of the results as markers while only displaying some limited number of listings, with pagination, but you don't seem to have tried that.

The slowness to load the page I suspect is down to your hosting or server settings: more memory would probably help.

With the major changes to Maps introduced in 1.8 it scales much better, and should be able to handle thousands of location-based posts with fairly average hosting.

Is there a reason not to split the View for the map as described previously?

[orlaF]

Hi Nigel,

I did try but it didn't work and the site is live so I had to go back to the way that loads even if it loads exceptionally slowly.

I created a view with no pagination and in the loop I added the map and the content template for all markers. When I added that view to the Archive it loads a new map for each listing instead of one map with all the markers on it. I am sure I have done this wrong but am so confused at this point am not sure what to do to correct it - is there a tutorial I can follow on how to add a map this way?

The version of maps is 1.8.4 so it is the latest version. The hosting is Siteground shared hosting so should be good I would have thought?

Thank you for your help with this Nigel,

Kind Regards,
Orla

[Nigel]

Hi Orla

In the loop output section (both in a View and in a custom archive) the markup between the wpv-loop tags is repeated, for every post in the results.

So if you want to add something that should only appear once (e.g. a View displaying a map) then you should insert it outside of the wpv-loop tags.

Let me take a copy of your site to install locally to see whether the performance looks okay and would be related to your hosting.

[Nigel]

Hi Orla

I installed your site locally, and it is pretty sluggish. I've run out of time today, but I will attempt some debugging tomorrow to try and identify why.

[orlaF]

Hi Nigel,

That is great - I created the view with the map loading outside the loop with no pagination but just like the archive - when I switch to no pagination the entire directory is blank (the header of the page is showing but the body is blank and sometimes shows some html closing tags).

Can you see if this also happens for you on the testing site?

Kind Regards,
Orla

[Nigel]

Hi Orla

In my copy of your site where you had created a View to display all markers, you had inserted the map-render shortcode within the wpv-loop tags, meaning you were re-inserting the map for every listing.

That is a simple enough fix, but it doesn't resolve the problem. When I added the View to your archive (to replace the existing map generated by the paginated archive) the page wouldn't complete loading, and I can see errors in the PHP debug logs.

That was also the case if I inserted the map on a static page, not in the archive.

I did find that if I simply created a new View to display all markers without any of your customisations then this worked fine, so it appears that the devil is in the details of your particular set-up, so I'm exploring that further now to see if I can identify what specifically is causing it.

[Nigel]

Hi Orla

There was one thing I spotted that you should fix, but unfortunately it's just something I spotted along the way.

In your Archive General template you break a conditional shortcode because of using double-quotes for one of the attributes. See the screenshot, you should change the attribute to output='url'.

Now, regarding the slowness, I spotted two things that are contributing to it.

Firstly, you use a lot of conditional shortcodes, and where these appear within the loop it means they are executed for every iteration of the loop, so if you have several such conditions for each listing and you are also using several for each map marker then it multiplies to a lot of such conditions on the page.

It may be that you cannot do much about it, but you may need to make some compromises, for example using one icon for all markers instead of different icons for different categories. Or you may be able to make some changes that don't require any sacrifices. For example you conditionally add a class of "member" or "non-member" depending on whether the custom field alliance-member eq 1 or not. Well, how about instead of storing 1 store the classnames themselves as the values of the alliance-member field, so instead of comparing the field value to 1 to see whether to output the class name just output the field directly.

Another point, which you should likely try first, is to stop using custom sizes when outputting the featured image or image fields. Given that you have specific dimensions you want to output the images at, register a custom image size and then use that when outputting the images. See the official documentation (https://developer.wordpress.org/reference/functions/add_image_size/) or you'll see there are lots of tutorials (hidden link). Once you've registered custom image sizes you will want to use the plugin regenerate thumbnails to produce new sizes of your existing images.

I expect this should help a lot.

I made a simplified version of your archive minus all of the conditional shortcodes and custom image sizes.

On my test site your own archive, minus the map which I removed altogether, took 5.8s to be generated and involved 138 queries. My simplified version, without the map, took 1.5s and involved 68 queries. Adding the map showing all listings (a simple version with a uniform marker) made little difference, taking the page generation time to just 1.7s and involving 74 queries.

So I recommend you try some of the both and review what you can change and what you cannot, and see if it helps bring down the load times.

Let me know how you get on.