Developer guide

How loading works

There is no AJAX or REST endpoint for products. The script requests the archive's real next page (GET the next link, same origin, with X-Requested-With: XMLHttpRequest), parses it with DOMParser and copies the product elements into the current list. Scripts inside the fetched HTML never run, so anything your theme attaches to products must be re-run through the events below.

JavaScript events

Events are dispatched on the product list and bubble, so listen on document.

WordPress's jQuery post-load event also fires on document.body after every load. Pro's earlier pages (loaded above the list when a shopper who arrived on a later page scrolls up) fire only post-load, so listen to both.

( function ( $ ) {
	function init( root ) {
		// e.g. root.querySelectorAll( '.my-slider:not(.is-ready)' ).forEach( mySlider );
	}
	document.addEventListener( 'siteryn-is:loaded', function ( e ) { e.detail.items.forEach( init ); } );
	document.addEventListener( 'siteryn-is:replaced', function ( e ) { e.detail.items.forEach( init ); } );
	if ( $ ) {
		$( document.body ).on( 'post-load', function () { init( document ); } ); // also covers Pro's earlier pages
	}
} )( window.jQuery );

Catching the start reliably

The script is deferred, so siteryn-is:init usually fires before your own deferred scripts run. Load your script only where the loader runs, and handle existing instances too:

add_action( 'siteryn_is_enqueue_assets', function () {
	wp_enqueue_script( 'my-is-glue', get_stylesheet_directory_uri() . '/js/is-glue.js',
		array( 'siteryn-is' ), '1.0', array( 'in_footer' => true, 'strategy' => 'defer' ) );
} );

function attach( loader ) {
	if ( loader && ! loader.myGlue ) { loader.myGlue = true; /* … */ }
}
( window.SiterynInfiniteScroll ? window.SiterynInfiniteScroll.instances : [] ).forEach( attach );
document.addEventListener( 'siteryn-is:init', function ( e ) { attach( e.detail.instance ); } );

JavaScript API

document.addEventListener( 'siteryn-is:loaded', function ( e ) {
	if ( 'scroll' === e.detail.trigger && e.detail.page >= 4 ) {
		e.detail.instance.setMode( 'load_more' );
	}
} );

Page config

window.siterynIsConfig (filter it with siteryn_is_frontend_config):

Markup and classes

• Loaded products get data-siteryn-is-page="N" (and .siteryn-is-item-enter while fading in).
• The list gets .siteryn-is-container and aria-busy while loading; the controls get .is-loading, .is-done and .is-error, data-siteryn-is-mode, and --align-*, --loader-* and --style-* modifier classes.
• Colors and sizes are CSS custom properties on .siteryn-is-controls, such as --siteryn-is-button-bg, --siteryn-is-button-radius, --siteryn-is-link-color and --siteryn-is-loader-size.
• The hidden theme pagination gets .siteryn-is-pagination-hidden.
• Lists inside .siteryn-is-disable are skipped. Only the first eligible list on a page is enhanced.

Custom selectors in code

add_filter( 'siteryn_is_settings_get_all', function ( $s ) {
	if ( is_admin() ) {
		return $s; // otherwise the settings form shows (and saves) these values
	}
	$s['container_selector']    = '.my-grid';
	$s['item_selector']         = '.product-card'; // direct children of the list
	$s['pagination_selector']   = '.my-pagination';
	$s['next_selector']         = '.my-pagination a.next';
	$s['result_count_selector'] = '.my-result-count';
	return $s;
} );

Templates

Keep every data-siteryn-is-* attribute. controls.php receives $settings, $context and $pagination; keep its @version header, because an outdated copy triggers an admin notice.

Data

No post or term meta is written. Uninstalling removes each plugin's own options (on every site of a network).

Endpoints

No REST routes, shortcodes, blocks or public AJAX actions. Admin endpoints require manage_woocommerce and a nonce:

wp-config constants

Every hook, with more examples, is on Hooks reference.