Ajax Html

function blog_list_shortcode($atts) {
	ob_start();
    $atts = shortcode_atts(array(), $atts);
	$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $posts_per_page = get_option('posts_per_page');
	$cat = isset($_GET['cat'])?$_GET['cat']:'';
	
	$args = array(
		'post_type'      => 'post',
		'post_status'    => 'publish',
		'posts_per_page' => $posts_per_page,
		'paged'          => $paged,
	);
	$tax_query = [];
	if (!empty($cat)) {
		$tax_query[] = [
			'taxonomy' => 'category',
			'field'    => 'slug',
			'terms'    => [$cat],
		];
	}
	if (!empty($tax_query)) {
		$args['tax_query'] = $tax_query;
	}
    $query = new WP_Query($args);

    

    if ($query->have_posts()) {
		?>
		<form method="GET" action="" class="frmFilterPost">
			<input type="hidden" value="" name="cat" class="category_val" />
			<?php  
				$category = get_terms([
					'taxonomy'   => 'category',
					'hide_empty' => true,
			
				]);
				if(!empty($category)):
				$column_item = ceil(count($category) / 4);
				$total = count($category);
			?>	
			<div class="rst-box-filter">
				<div class="rst-box-filter-list deskop">
						<div class="rst-box-filter-list-all">
							<a class="rst-box-filter-item <?php echo $cat ? '' : 'active' ?>" data-slug="" >All<span class="count">(<?php echo $query->found_posts; ?>)</span></a>
						</div>	
						<div>
						<?php
							$i = 0;
							foreach ($category as $key => $value){
								$i++;
								$class="";
								if(!empty($cat) && $cat == $value->slug){
									$class="active";
								}
						?>
						
							<a class="rst-box-filter-item <?php echo $class; ?>" data-slug="<?php echo $value->slug ?>" ><?php echo $value->name ?><span class="count">(<?php echo $value->count ?>)</span></a>
						
						<?php
							if($i%$column_item == 0 && $i != $total ){
								echo '</div><div>';
							}
							}
						?>
							</div>
					
				</div>
				<div class="rst-box-filter-list mobile">
						<div class="rst-box-filter-list-all">
							<a class="rst-box-filter-item <?php echo $cat ? '' : 'active' ?>" data-slug="" >All<span class="count">(<?php echo $query->found_posts; ?>)</span></a>
						</div>	
						
						<?php
							foreach ($category as $key => $value){
								$class="";
								if(!empty($cat) && $cat == $value->slug){
									$class="active";
								}
						?>
						<div>
							<a class="rst-box-filter-item <?php echo $class; ?>" data-slug="<?php echo $value->slug ?>" ><?php echo $value->name ?><span class="count">(<?php echo $value->count ?>)</span></a>
						</div>
						<?php
							
							}
						?>
							
					
				</div>
			</div>
			<?php endif; ?>
		</form>
	<div class="rst-blog-lists-container-ajax">
		<div class="rst-blog-lists-container">
		<div class="rst-blog-lists">
		<?php
        

        while ($query->have_posts()) {
            $query->the_post();
			
            $post_id = get_the_ID();
            $permalink = get_permalink();
            $title = get_the_title();
			$excerpt = wp_trim_words(get_the_excerpt(), 22, '...');
            $thumbnail = get_the_post_thumbnail_url($post_id, 'full');
            $post_date = get_the_date();
            ?>
            <div class="blog-item">
				<a href="<?php echo esc_url($permalink); ?>"></a>
				<span class="icon-more">
				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.25 7.25C15.6562 7.25 16 7.59375 16 8C16 8.4375 15.6562 8.75 15.25 8.75H8.75V15.25C8.75 15.6875 8.40625 16 8 16C7.5625 16 7.25 15.6875 7.25 15.25V8.75H0.75C0.3125 8.75 0 8.4375 0 8C0 7.59375 0.3125 7.25 0.75 7.25H7.25V0.75C7.25 0.34375 7.5625 0 8 0C8.40625 0 8.75 0.34375 8.75 0.75V7.25H15.25Z" fill="#0A5660"/>
</svg>

				</span>
				<?php if($thumbnail):?>
					<div class="rst-blog-post-image"> 
						<img src="<?php echo esc_url($thumbnail); ?>" alt="<?php echo esc_attr($title); ?>">
					</div>
				<?php endif;?>
				<div class="rst-blog-post-content">
					<div class="rst-blog-post-content-top">
						<h3><?php echo esc_html($title); ?></h3>
						<p><?php echo get_the_excerpt(); ?></p>
					</div>
					<div class="rst-blog-post-meta">
						<span class="rst-post-date"><?php echo get_the_date(); ?></span><span class="rst-space"></span><span class="rst-post-author">by <a href="<?php echo get_author_posts_url( get_post_field('post_author', $post_id) ); ?>" class="meta-author"><?php the_author()?></a></span>
					</div>	
				</div>
            </div>
            <?php
        }
		
		?>
        </div>
			<?php
			echo rst_the_posts_navigation($query);
		?>
			</div>
</div>
		<?php
        

    } else {
        echo '<p>No posts found.</p>';
    }

    wp_reset_postdata();
	?>
	<script type="text/javascript">
		(function($){
			$('.rst-box-filter-item').click(function(){
				var value = $(this).attr('data-slug');
				$('.rst-box-filter-item').removeClass('active');
				$(this).addClass('active');
				$('.category_val').val(value);
				$('.frmFilterPost').submit();
				return false;
			});
			
			
			function customAjaxSend(form,fullUrl){
				$.ajax({
					url: fullUrl,
					method: form.attr('method'),
					data: form.serialize(),
					dataType: 'html',
					beforeSend: function () {
						$('.rst-blog-lists-container').addClass('loading')
					},
					success: function(response) {
						const html = $(response);
						const items = html.find('.rst-blog-lists-container');
						$('.rst-blog-lists-container-ajax').html(items);
						$('.rst-blog-lists-container').removeClass('loading')
					},
					error: function(jqXHR, textStatus, errorThrown) {
						console.log('Error submitting form');
						console.log(textStatus, errorThrown);
					}
				});
			}
			
			$('.frmFilterPost').on('submit', function(e) {
				e.preventDefault(); 
				var form = $(this); 
				var url = form.attr('action'); 
				var fullUrl = url + '?' + form.serialize();
				var link_page = $('.link_page').val();
				//history.pushState({}, '', link_page);
				let currentUrl = window.location.href;
				let newUrl = currentUrl.replace(/page\/\d+\//, '');
				customAjaxSend(form, newUrl);
			});
			$('body').on('click','#tf-pagination a',function(e){
				e.preventDefault();
				var form = $('.frmFilterPost'); 
				var fullUrl = $(this).attr('href');
				$('html, body').animate({
					scrollTop: $(".rst-blog-lists").offset().top - 300
				}, 1000);
				customAjaxSend(form, fullUrl);
				
			})
			
		})(jQuery);
	</script>
	<?php
    return ob_get_clean();
}
add_shortcode('blog_list', 'blog_list_shortcode');