Static Load More Example

As you may know by now, calls to admin-ajax.php will not work on your static Strattic site (say that five times fast 🤓 ). But, all your hard work is not lost, and in many cases, a static ajax solution can be fairly straightforward to implement.

Here is an example of a site that uses JS and a call to admin-ajax.php to display more elements on the page, and how to preserve the same functionality with a static approach.

Example original JS code (that is, code that will not work out of the box on Strattic):

function load_more() {
   const page = $('#page-number').data('number')
   const url = 'admin-ajax.php'
   $.ajax(url, {
       method: 'POST',
       data: {
           post_type: 'media',
           page_number: page + 1
       },
       success: function (data) {
           //add returned data to page, or any other implementation
           $('#my-content).append(data)
       }
   })
}

In order to convert this to static, we will first use a filter on the backend to catch any requests going to /media/X, where X is the page number, and serve the same results as we would have from any POST request to /admin-ajax.php?post_type=media&page_number=X

add_filter( 'parse_request', 'media_pages' );
function media_pages() {
   $request = $_SERVER['REQUEST_URI'];
   if ( strpos( $request, '/media/' ) === 0 ) {
       $url_parts = explode( '/', $request );
       $page = end( $url_parts );

       /**
       * Here, implement functionality to load and return the desired results.
       * This could be a wp_remote_request() to admin-ajax.php built with the data now available, or echoing the result of another function.
       * For our example, we will assume a load_more() function that takes the type and page number and returns the desired result
       * */      
       echo load_more( 'media', $page );
       exit;
   }
}

Now, if we navigate to the page oursite.com/media/3, we should get the same results as if we had sent a POST request to /admin-ajax.php with the parameters of post_type 'media' and page 3.

Now we return to our Javascript and modify to do that GET request instead of the original POST request:

function load_more() {
   const page = $('#page-number').data('number')
   const url = '/media/' + page + 1
   $.ajax(url, {
       method: 'GET',
       success: function (data) {
           //add returned data to page, or any other implementation
           $('#my-content').append(data)
       }
   })
}

The final step will be to ensure that the pages /media/1, /media/2, etc, are added to the Strattic publish list, so that they will be published to the static site. Depending how they are created, they may already be included.  If they are not, we will need to determine how many pages there will be and to add that many pages to the list. We can do this using Strattic’s filter strattic_paths.

add_filter( 'strattic_paths', 'add_urls' );
function add_urls( $paths ) {
   $posts_per_page = 6;
   $args = array(
       'post_type' => 'media',
       'post_status' => 'publish'
   );
   $query = new WP_Query ($args);
   //Determine how many pages to publish
   $pages = $query->found_posts / $posts_per_page;
   for ($i = 1; $i <= $pages; $i++) {
       $paths[] = [
           // Makes sure presence of trailing slash matches permalink scheme.
           'path' => '/media/' . $i . '/',
           // Determines if this page should be included in quick publishes.
           'quick_publish' => true
       ];
   }
   return $paths;
}