jQuery-php-ajax Calling

jQuery(document).ready(function(){
jQuery(‘#pfilter li’).css(‘cursor’, ‘pointer’);
jQuery(“#pfilter li”).click(function(){
jQuery(‘#spinner’).show();
jQuery(‘#spinner’).html(‘/images/oudarya2.GIF” alt=”Loading…”/>’);
var slug = jQuery(this).attr(‘id’);
jQuery.ajax({
url: “/filter-product.php”,
type: ‘POST’,
data: ‘slg=’ +slug,
success: function(data) {
jQuery(‘#spinner’).hide();
jQuery(“#prd”).html(data);
}
});
});
});

In HTML :

<?php
$level = get_queried_object()->term_id;
//echo $level;
$parent_id = $level;
$termchildren = get_terms(‘product_cat’,array(‘child_of’ => $parent_id));
echo ‘<ul id=”pfilter” class=”sidemenu”>’;
foreach($termchildren as $sub_category) {
echo ‘<li id=”‘. $sub_category->slug . ‘”>’ . $sub_category->name . ‘</li>’;
}
echo ‘</ul>’;
?>

AJAX Loader Div :

<style>
div#spinner
{
display: none;
width:100px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
text-align:center;
margin-left: -50px;
margin-top: -100px;
z-index:2;
overflow: auto;
}
</style>

filter-product.php

<?php
//echo $_POST[‘slg’];
require_once(‘../../../wp-load.php’);

$args = array(
‘post_type’ => ‘product’,
‘posts_per_page’ => -1,
‘tax_query’ => array(
array(
‘taxonomy’ => ‘product_cat’,
‘field’ => ‘slug’,
‘terms’ => $_POST[‘slg’],

)

),
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
while ( $loop->have_posts() ) : $loop->the_post();
$output.= wc_get_template_part( ‘content’, ‘product’ );
endwhile;
echo $output;
} else {
echo __( ‘No products found’ );
}
wp_reset_postdata();

?>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: