Index.php
<?php
/**
Plugin Name: ajax test
Plugin URI: http://wordpress.org/plugins/ajax/
Description: Woocommerce shortcode [mini_cart].
Author: Tamal Sarker
Version: 1.0.0
Author URI: http://templateeye.com/
*/
/* Set constant path to the plugin directory. */
define('EYE_PATH', plugin_dir_path(__FILE__));
/* Set the constant path to the plugin directory URI. */
define('EYE_URL', plugin_dir_url(__FILE__));
/* Add CSS */
function eye_styles(){
wp_register_style( 'header_cart_css', EYE_URL . 'assets/css/header-cart.css' , array(), '1.1.0', false );
wp_enqueue_style( 'header_cart_css' );
}
add_action('wp_head', 'eye_styles', 5);
/* Add JS */
function eye_scripts() {
wp_register_script( 'header_cart_js', EYE_URL . 'assets/js/header-cart.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'header_cart_js' );
wp_localize_script('header_cart_js', 'ajax_custom', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax-nonce'),
'getID' => get_the_ID()
));
}
add_action('wp_footer', 'eye_scripts', 5);
//call post function
require_once(EYE_PATH . 'function.php');
add_shortcode('aj_exam', 'aj_exam');
function aj_exam(){
?>
<section>
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Filters</h2>
<form action="" method="post" id="filterform">
<h5>Categories</h5>
<?php
$categories = get_terms('category',array(
'hide_empty' => false,
));
// print_r($categories);
foreach($categories as $category){ ?>
<input type="checkbox" name="category[]" value="<?php echo $category->term_id; ?>" > <?php echo $category->name; ?><br>
<?php
}
?>
<input type="hidden" name="action" value="ajax_filters" ><br>
<div class="clearfix"> </div>
<button type="button" id="add_enquiry_2" class="btn btn-sm btn-secondary">Apply Filters</button>
</form>
</div>
<div class="col-md-9">
<div id="postdata">
<?php
$args = array(
'post_type' => 'post',
'status' => 'publish'
);
// the query
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h2 class="h5"><?php the_title(); ?></h2>
<p><?php the_excerpt();?></p>
<hr>
<?php endwhile; ?>
<!-- end of the loop -->
<!-- pagination here -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</div>
</div>
</div>
</div>
</section>
<?php
}
function.php
<?php
/* Ajax Filters Function */
add_action("wp_ajax_ajax_filters", "ajax_filters_handler");
add_action("wp_ajax_nopriv_ajax_filters", "ajax_filters_handler");
function ajax_filters_handler() {
$cat_ids = $_REQUEST['category'];
$csv_cats = implode(", ", $cat_ids);
echo "Showing Results for (Term ID):".$csv_cats;
$args = array(
'post_type' => 'post',
'status' => 'publish',
'category__in' => $cat_ids
);
// the query
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h2 class="h5"><?php the_title(); ?></h2>
<p><?php the_excerpt();?></p>
<hr>
<?php endwhile; ?>
<!-- end of the loop -->
<!-- pagination here -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<?php
wp_die();
}
header-cart.js
jQuery( "#add_enquiry_2" ).on('click',function() {
jQuery(document).ready(function($) {
jQuery( "#add_enquiry_2" ).on('click',function() {
//alert("okay");
jQuery("body").css("opacity",".8");
var ajaxurl = ajax_custom.ajaxurl;
var postdata = $("#filterform").serialize();
jQuery.post(ajaxurl, postdata, function (response) {
$("#postdata").html(response);
console.log(response);
}).done(function() {
$("body").css("opacity","1");
});
});
});