AJAX Breaking Offset Argument In WP Query

Question

I have been using AJAX on my website successfully and for my category.php page I need to use the offset argument. Unfortunately, AJAX creates complications with offset and I get the same posts looping over and over. I consulted the WordPress codex but I couldn't not figure out how to apply a solution to my particular WP_Query. Anyone that can help I'd be grateful, I can provide more code if necessary as well. Thanks!

category.php

<?php
    $category = get_category( get_query_var( 'cat' ) );
    $cat_id = $category->cat_ID;
    $current_page = max( 1, get_query_var( 'paged' ) );
    $the_query = new WP_Query( array(
        'category__in' => array($cat_id), 
        'post_type'      => 'post',
        'posts_per_page' => 5,
        'paged'          => $current_page,
    ) );

    $_SESSION['count'] = 1;
    wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
        'ajaxurl'      => admin_url( 'admin-ajax.php', 'relative' ),
        'posts'        => json_encode( $the_query->query_vars ),
        'current_page' => $current_page,
        'max_page'     => $the_query->max_num_pages
    ) );
?>

<div id="main" class="container feed-container">
    <div class="row mx-auto align-items-center post">      
    <?php if ($the_query->have_posts()) : ?>
        <?php $count = 0; ?>
        <?php while ($the_query->have_posts()) : $the_query->the_post(); get_template_part( 'parts/content', get_post_format() ); ?>
            <?php $count++;

            $_SESSION['count']=$_SESSION['count']+1;
            ?>
        <?php endwhile; ?>
     <?php endif; ?>
<?php wp_reset_postdata(); ?>
    </div><!-- END ROW -->
</div><!-- END CONTAINER -->

AJAX

jQuery(function($){
    var canBeLoaded = true,
                bottomOffset = 1300;


    $(window).scroll(function(){
        if ( misha_loadmore_params.current_page >= misha_loadmore_params.max_page ) {
//          console.log( 'max_page reached; AJAX canceled' );
            return;
        }
        var data = {
            'action': 'loadmore',
            'query': misha_loadmore_params.posts,
            'page' : misha_loadmore_params.current_page
        };
        if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && canBeLoaded == true ){

            $.ajax({
                url : misha_loadmore_params.ajaxurl,
                data: data,
                type: 'POST',
                beforeSend: function( xhr ){
                    canBeLoaded = false;
                },
                success:function(data){
                    if( data ) {
                        $('#main').find('div.post:last-of-type').after( data ); 
                        canBeLoaded = true;
                        misha_loadmore_params.current_page++;

                        // bottomOffset = ( $( '#main > div.post:last' ).offset() || {} ).top
                    }
                }
            });
        }
    });
});

Answer 1

So I'm guessing this is a follow-up to this question. And based on my answer there, you can use/add the offset parameter like so:

1. In category.php, just set the preferred offset:

   $the_query = new WP_Query( array(
       'category__in'   => array( $cat_id ),
       'post_type'      => 'post',
       'posts_per_page' => 5,
       'paged'          => $current_page,
       'offset'         => 1, // set offset
   ) );
   

2. In misha_loadmore_ajax_handler() (the PHP function which processes the AJAX requests), add this right before $the_query = new WP_Query( $args );:

   if ( isset( $args['offset'] ) ) {
       $offset = absint( $args['offset'] );
       $args['offset'] = absint( ( $args['paged'] - 1 ) * $args['posts_per_page'] ) + $offset;
   }
   

That's all. No changes necessary in the JavaScript parts.