javascript - Trying to do a lazy load of posts with wordpress ajax api

Question

I don't know how do I suppose that I need to execute this?

I want to recreate this question in my case:
Using AJAX to load more products WooCommerce

So, I created a new plugin with my main file called z3nth10n.php:

<?php
/**
 * Plugin Name: z3nth10n's Plugin
 * Plugin URI: http://vizzuta.net/
 * Description: z3nth10n's plugin for ProductoEspa?a. Geolocalization of products
 * Version: 1.0
 * Author: z3nth10n (?lvaro Rodr?guez)
 * Author URI: http://vizzuta.net/
 */

require 'ajax-geo.php';

Where ajax-geo.php has the following code:

<?php

// require_once __DIR__ .'/../../../wp-includes/plugin.php';

// die(__DIR__ .'/../../../wp-includes/pluggable.php');

add_action( 'wp_enqueue_scripts', 'do_scripts' );

add_action('wp_ajax_ajax_next_posts', 'ajax_next_posts');
add_action('wp_ajax_nopriv_ajax_next_posts', 'ajax_next_posts');

// if(!isset($_POST)) {
function do_scripts() {
    $file = plugins_url('/js/ajax.js', __FILE__);

    wp_enqueue_script('ajax-script', $file, array('jquery'));

    // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
    wp_register_script( 'ajax-script', $file, array(), '', true);
    wp_localize_script( 'ajax-script', 'ajaz',
        array('ajax_url' => 'wp-content/plugins/z3nth10n/ajax-geo.php'));
}

// list($posts, $query) = $this->getPosts(0);

//Thanks to: https://stackoverflow.com/questions/52189258/using-ajax-to-load-more-products-woocommerce

// Load next 12 products using AJAX
function ajax_next_posts() {
    /* global $product;
    // Build Query
    $args = array(
        'post_type'             =>  'product',
        'posts_per_page'        =>  (int)$_POST['posts_per_page'],
        'orderby'               =>  'title',
        'order'                 =>  'ASC',
        'offset'                =>  (int)$_POST['post_offset'],
    );

    if( !empty( $_POST['product_cat'] ) ) {
        $args['tax_query'] = array(
            'relation'  => 'AND',
            array (
                'taxonomy'  =>  'product_cat',
                'field' =>  'slug',
                'terms' => $_POST['product_cat'],
                'operator'  =>  'IN'
            ),
        );
    }

    $count_results = '0';

    $ajax_query = new WP_Query( $args ); */

    $offset = (int)$_POST['post_offset'];
    $product_arr = array();
    list($posts, $ajax_query) = Geoproducts::getPosts($offset, $product_arr);
    // Results found
    if( $ajax_query->have_posts() ){
        // Start "saving" results' HTML
        $results_html = '';
        ob_start();

        while( $ajax_query->have_posts() ) {

            $ajax_query->the_post();
            echo wc_get_template_part( 'content', 'product' );

        }
        wp_reset_postdata();

        // "Save" results' HTML as variable
        $results_html = ob_get_clean();
    } else {
        // Start "saving" results' HTML
        $results_html = '';
        ob_start();

        echo "No hay más productos que cargar.";

        // "Save" results' HTML as variable
        $results_html = ob_get_clean();
    }

    // Build ajax response
    $response = array();
    $response['arr'] = $product_arr;

    // 1. value is HTML of new posts and 2. is total count of posts
    array_push ( $response, $results_html );
    echo json_encode( $response );

    // Always use die() in the end of ajax functions
    wp_die();
}

And js/ajax.js has:

$(document).ready(function () {
    var button = $("#horizontalTab > div > div[aria-labelledby="tab_item-0"] > div.loadgridlist-wrapper > button");
    button.on('click', function() {
        ajax_next_posts();
    });
});

var totalPosts = parseInt( jQuery( '#found-posts' ).text() );

function ajax_next_posts(cat_id = 0, postsPerPage = 12) {

    console.log("click");

    // ajaxLock = true;

    // How many have been loaded
    var postOffset = jQuery('li.product').length;

    // Ajax call itself
    $.ajax({
        method: 'POST',
        url: ajaz.ajax_url,
        data: {
            action: 'ajax_next_posts',
            post_offset: postOffset,
            posts_per_page: postsPerPage,
            product_cat: cat_id
        },
        // dataType: 'json',
        success: function(result) {
            console.log(result);
            // $("#div1").html(result);
        }
    })
        .done(function (response) { // Ajax call is successful

            console.log(response);

            // Add new posts
            jQuery('.product-grid').append(response[0]);

            // Update Post Offset
            var postOffset = jQuery('li.product').length;

            // ajaxLock = false;

            console.log('Success');

            $('body').removeClass('ajaxLoading');

            // How many posts there's total
            console.log("Total Posts: " + totalPosts);

            // How many have been loaded
            var postOffset = jQuery('li.product').length
            console.log("Posts on Page: " + postOffset);

            // Hide button if all posts are loaded
            if ((totalPosts - postOffset) <= 0) {
                jQuery('#load-more').fadeOut();
            }

        })
        // .fail( function() {
        .fail(function (jqXHR, textStatus, errorThrown) { // Ajax call is not successful, still remove lock in order to try again

            console.log(XMLHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);

            console.log('Failed');

        });
}

But for some reason, when I click the button the following error happens:

PHP Fatal error: Uncaught Error: Call to undefined function add_action()

So I required the wp-includes/plugin.php which delete all the errors.

But the code still doesn't work.

So how do I suppose that I need to call this? Because the https://codex.wordpress.org/AJAX_in_Plugins documentation is unclear to me.

question from:https://stackoverflow.com/questions/65910816/trying-to-do-a-lazy-load-of-posts-with-wordpress-ajax-api

Answer 1

Waitting for answers