Skip to content

Instantly share code, notes, and snippets.

@User0123456789
Last active June 17, 2020 17:44
Show Gist options
  • Save User0123456789/a6dd2abadbfe8a4d399c6cf8734e809a to your computer and use it in GitHub Desktop.
Save User0123456789/a6dd2abadbfe8a4d399c6cf8734e809a to your computer and use it in GitHub Desktop.
/**
* JS
*
**/
$(document).on('change','.js-filter-form', function(e){
e.preventDefault();
var category = $(this).find('option:selected').val();
$.ajax({
url: wpAjax.ajaxUrl,
data:{ action: 'filter_ajax_wap', category: category },
type: 'post',
success: function(result){
$('.js-filter').html(result);
},
error: function(result){
console.warn(result);
}
});
});
/**
* PHP Functions
*
**/
function load_scripts(){
wp_enqueue_script('ajax', get_stylesheet_directory_uri().'/js/script.js', array('jquery'),'1.0', true );
wp_localize_script('ajax', 'wpAjax', array('ajaxUrl' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts','load_scripts');
add_action('wp_ajax_nopriv_filter_ajax', 'filter_ajax');
add_action('wp_ajax_filter_ajax', 'filter_ajax');
function filter_ajax(){
$category = $_POST['category'];
if( in_category( 'category_2' ) ):
$args = array(
'post_status' => 'publish',
'post_type' => 'post',
'posts_per_page' => -1,
'child_of' => 102,
'category_name' => 'cat1,cat2,cat3,cat4'
);
elseif(in_category( 'category_1' )) :
$args = array(
'post_status' => 'publish',
'post_type' => 'post',
'posts_per_page' => -1,
'child_of' => 101,
'category_name' => 'cat_1,cat_2,cat_3,cat_4'
);
endif;
if (isset($category)){
$args['category__in'] = array($category);
}
$query = new WP_Query($args);
if ($query->have_posts()): ?>
<div>
<?php while($query->have_posts()) : $query->the_post(); ?>
<div>
<div class="desciption">
<figure style="background: url(<?php the_field('thumbnail'); ?>) no-repeat">
<figcaption><?php foreach((get_the_category()) as $category): echo $category->name . '<br/>'; endforeach; ?></figcaption>
</figure>
<h3><?php the_title(); ?></h3>
<a href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>
<?php endwhile; ?>
</div>
<?php
endif;
wp_reset_postdata();
die();
}
/**
* HTML/PHP
**/
<form class="js-filter-form" method="post">
<select name="categories">
<?php
if( in_category( 'category_2' ) ):
$cat_args = array(
'post_type' => 'post',
'option_all' => 'All',
'exclude' => array(1),
'child_of' => 101
);
elseif(in_category( category_1' )) :
$cat_args = array(
'post_type' => 'post',
'option_all' => 'All',
'exclude' => array(1),
'child_of' => 102
);
endif;
$categories = get_categories($cat_args); ?>
<option class="js-filter-item" value="-1">All</option>
<?php foreach ($categories as $cat) : ?>
<option class="js-filter-item" value="<?= $cat->term_id; ?>"><?= $cat->name; ?></option>
<?php endforeach; ?>
</select>
</form>
<div class='js-filter'>
<?php
if( in_category( 'category_2' ) ):
$args = array(
'post_status' => 'publish',
'post_type' => 'post',
'posts_per_page' => -1,
'child_of' => 102,
'category_name' => 'cat1,cat2,cat3,cat4'
);
elseif(in_category( 'category_1' )) :
$args = array(
'post_status' => 'publish',
'post_type' => 'post',
'posts_per_page' => -1,
'child_of' => 101,
'category_name' => 'cat_1,cat_2,cat_3,cat_4'
);
endif;
$query = new WP_Query($args);
if ($query->have_posts()): ?>
<div>
<?php while($query->have_posts()) : $query->the_post(); ?>
<div class="article__conntent">
<div class="desciption">
<figure style="background: url(<?php the_field('thumbnail'); ?>) no-repeat">
<figcaption><?php foreach((get_the_category()) as $category): echo $category->name . '<br/>'; endforeach; ?></figcaption>
</figure>
<h3><?php the_title(); ?></h3>
<a href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
@User0123456789
Copy link
Author

User0123456789 commented Jun 17, 2020 via email

@Quin452
Copy link

Quin452 commented Jun 17, 2020

I don't know what you mean by "posts in another category option are not displaying".

What we need to do is try to get whatever category you've selected posted.

I would scrap the categories in categories thing you've got going on, and simply list all the categories for now.

@User0123456789
Copy link
Author

@Quin452 if I tried to change the $category = $_POST['category']; into $category = $_POST['categories']; the posts are not displaying when selecting another option. Now, I changed the $category = $_POST['category']; to this $category = $_POST['categories']; to be match in the html <select name="categories"> and I checked if the $_POST['categories'] has already a value, no luck. Still getting the No post.

@Quin452
Copy link

Quin452 commented Jun 17, 2020

You'll need to get the select box/drop down to submit some data, any data at this point.
There is also an option in Developer Tools, which could be more useful than trying to echo out a response.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment