WooCommerce | AJAX | Product Pagination | Help me implement Ajax Pagination

Question

Im struggling to find a good resource on implementing my own AJAX product pagination onto products within the WooCommerce shop loop.

Please can someone guide me on how is best to load more products without the page reloading.

I have previously been able to successfully load more posts and filter posts. However, have never had to do this to products.

It is my understanding I will need a function in functions.php. Linked up to the paginated products on the shop front page.

Ideally this functionality won’t be limited to just the store front shop loop, but will carry over to search results pages.

So far I have tried unsuccessfully maybe 10 other resources and a couple plug-ins. All of which I feel are bulky, poorly documented or have to be paid for within the plug-ins.

Here is a starting point of the files I wish to manipulate. Please help me change them to create:

ARCHIVE-PRODUCT.PHP (WooCommerce storefront template) – Adding a form in with previous and next buttons to help indicate which way pagination should work, along with the jQuery to trigger the function within functions.php:

<?php
/**
 * Haseeb Asif https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header();

if ( have_posts() ) { ?>

    <div id="product-loop"> 

        <?php
        do_action( 'woocommerce_before_shop_loop' );
        woocommerce_product_loop_start();
        if ( wc_get_loop_prop( 'total' ) ) {
            while ( have_posts() ) {
                the_post();
                do_action( 'woocommerce_shop_loop' );
                wc_get_template_part( 'content', 'product' );
            }
        }
        woocommerce_product_loop_end();
        do_action( 'woocommerce_after_shop_loop' );

        ?>

    </div>

    <form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="product-pagination">
        <input id="previous" type="submit" name="prev" value="<- Previous">
        <input id="next" type="submit" name="next" value="Next ->">

        <input type="hidden" name="action" value="customproductpagination">
    </form>

    <script>
        jQuery(function($) {
            $('#product-pagination').submit(function(){
                var filter = $('#product-pagination');
                $.ajax({
                    url:filter.attr('action'),
                    data:filter.serialize(), // form data
                    type:filter.attr('method'), // POST
                    beforeSend:function(xhr){
                        filter.find('#previous').text('Loading...');
                        filter.find('#next').text('Loading...');
                    },
                    success:function(data){
                        filter.find('#previous').text('<- Previous');
                        filter.find('#next').text('Next ->');
                        $('#product-loop').html(data);
                    }
                });
                return false;
            });
        });
    </script>

    <?php

} else {
    do_action( 'woocommerce_no_products_found' );
}

do_action( 'woocommerce_sidebar' );

get_footer();

FUNCTIONS.PHP (Where we can put the AJAX function called in the archive-product.php page form) – I need to add the pagination arguments and query the products:

/* Custom Product Pagination */
function custom_product_pagination_function(){
    $args = array(
        // Some way to read pagination (previous / next)
    );

    $query = new WP_Query( $args );

    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post();

            echo 'Product goes here'; 

        endwhile;
        wp_reset_postdata();
    else :
        echo 'No posts found';
    endif;

    die();
}
add_action('wp_ajax_customproductpagination', 'custom_product_pagination_function');
add_action('wp_ajax_nopriv_customproductpagination', 'custom_product_pagination_function');
/* END Custom Product Pagination */

Really hopeful someone can understand what I am trying to achieve, I appreciate it’s not an easy one.

Massive thanks to all contributors, Jason.

0
, , , Jason Is My Name 1 year 2020-01-27T08:43:19-05:00 0 Answers 81 views 0

Leave an answer