PLUGIN DEV - JQUERY AJAX & REST - RELATED POSTS PLUGIN - ES6 TEMPLATE USED

gistfile1.txt

------------------------------
PHP FOR THE REST & AJAX SETUP
------------------------------
<?php 

/**
* RelatedPostMPF Class
*/
class RelatedPostMPF
{
	
	function __construct()
	{
		add_filter( 'the_content', array( $this, 'display_html' ) );
	}

	public function make_html() {

		ob_start(); // OUTPUT BUFFERING

		?>
		
			<section id="mpf-related-posts">
				
				<h2><a href="#" class="get-related-posts">Get Related Post</a></h2>
				<div class="ajax-loader">
					<img src="<?php echo plugin_dir_url( __FILE__ ) . 'assets/img/spinner.gif'; ?>" alt="">
				</div>

			</section>	
			<!-- End Related Posts -->

		<?php 

		$html_content = ob_get_contents();

		ob_end_clean();

		return $html_content;		
	}	

	public function display_html( $content ) {

		if ( is_single() && is_main_query() ) {

			$content .= $this->make_html();
		}

		return $content;
	}

	public static function related_post_get_json()	{

		// http://plugin.local/wp-json/wp/v2/posts?categories=6,2&per_page=2

		$cats = get_the_category(); //Gets only the the Categories of the current post
		$cat_ids = array();

		foreach ($cats as $cat) {
			
			$cat_ids[] = $cat->term_id;
		}

		$args = array(
			'categories' => implode(",", $cat_ids), 
			'per_page' => 5
		);

		$url = add_query_arg( $args, rest_url( 'wp/v2/posts' ) );

		return $url;

	}
}

------------------------------
JQUERY SCRIPT FOR AJAX & REST
------------------------------

jQuery(document).ready(function($) {

	// alert('working');

  $('.get-related-posts').on( 'click', function(event) {

  		event.preventDefault();

  		$('.ajax-loader').show(); 
  	 	// console.log('Click');
  	 	var json_url = postdata.json_url;
  	 	var post_id = postdata.post_id;

  	 	console.log(json_url);
  	 	console.log( `This is the post ID: ${post_id}`);

  	 	// The Ajax
  	 	$.ajax({
  	 		dataType: 'json',
  	 		url: json_url
  	 	})

  	 	.done(function (response) {
  	 		// body...
  	 		// console.log(response);

  	 		$.each(response, function (index, obj) {
  	 			// body...
  	 			$('#mpf-related-posts').append(`

		  	 		<section class='post-block'>
			  	 		<a href="${obj.link}"><h2>${obj.title.rendered}</h2></a>
			  	 		<h5>Author Name: ${obj.author_name}</h5>
			  	 		<a href="${obj.link}"><figure>${obj.featured_image}</figure></a>
			  	 		<p>
							${obj.excerpt.rendered}
			  	 		</p>
		  	 		</section>
						
	  	 			<br>`
  	 			);
  	 		});

  	 		$('.ajax-loader').remove(); 
  	 	})

  	 	.fail(function () {
  	 		// body...
  	 		console.log('Failure!')
  	 	})

  	 	.always(function () {
  	 		// body...
  	 		console.log('Complete');
  	 	});
  });
	
});