Callback function – Ajax Auto Load Posts

Hi there

Can you perhaps elaborate on the “not loaded”. Are the plugin’s JS files loaded, but the stories themselves not visible? Or are not even the files loaded? And is this about the regular single embeds (using <amp-story-player>) or things like the carousel? A demo site or video/screenshot would be helpful to better understand the situation.

What I can say is that we don’t expose any global JS functions to just magically enqueue all required JS files or load stories via Ajax. So here’s a more general answer:

• If the JS and CSS files for single embeds are missing, ensure the standalone-amp-player handles are enqueued (https://cdn.ampproject.org/amp-story-player-v0.css and https://cdn.ampproject.org/amp-story-player-v0.js)
• If they are not missing, but the story in the amp-story-player is not loaded, you’ll need something like as follows to manually load them:

document.querySelectorAll('amp-story-player').forEach(playerEl => (new AmpStoryPlayer(window, playerEl)).load())

OK, so the it’s the latter case for you. The scripts are already there, but the stories themselves in the player are not loaded because they were added later. So you’ll need something like the code I shared above.

Now, I don’t know this Ajax Load More plugin and how it works, so I can only give you same minimum guidance. The rest is beyond our support offering for the Web Stories plugin.

You will want something like this:

1. In the almComplete callback, access alm.el to get the newly added post.
2. Find all amp-story-player instances within alm.el
3. Load the players.

So, something like that:

window.almComplete = function(alm){
	alm.el.querySelectorAll('amp-story-player').forEach(
		playerEl => (new AmpStoryPlayer(window, playerEl)).load()
	);
};

Again, I don’t know this Ajax Load More plugin, so I don’t know if this works.

If you need more help, I recommend asking on StackOverflow or similar.