Last active
June 17, 2020 17:44
-
-
Save User0123456789/a6dd2abadbfe8a4d399c6cf8734e809a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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(); ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.