Reply To: Filtering issues which remove images and filters on page

• jarvis

• November 24, 2021 at 6:11 am

Ok, so one thing I think you need to do, is change your function (my_pre_get_posts).

As a checkbox returns a serialised array, I believe you need to change the compare from IN to LIKE (worth double checking!):

// append meta query
$meta_query = [];
$meta_query[] = array(
	'key'       => 'film_genre',
	'value'     => $_GET['film_genre'],
	'compare'   => 'LIKE',
);

Now, the next point to consider is returning ACF fields. Usually, if you want to get a value, you can simply use get_field.
If you want to get the value from a specific page/post you can add in the ID (more examples can be seen here).

The issue I think you have is that you’ve assigned the ACF fields to a custom post type and output them on an archive template (archive-film.php).
As such, for whatever reason, when you move to the result, it doesn’t show the ACF field.

You then can’t specify an ID against the get_field as an archive doesn’t have an ID value.

I’ve played around with code locally but can’t seem to get it working either – unless I’m missing something.

If it were me, I think I’d approach it differently.

I’d use the films custom post type
I would then use the film genre as a taxonomy

I’d create a page called films and have a dedicated template (page-films.php for example).

It would be far easier to query and you could also look to use AJAX.

Something like the below. page-films.php

<?php
/**
 * @package WordPress
 Template Name: Films
**/
get_header();
?>

<div class="container-fluid" id="filters">
	<div class="row">
		<div class="col-12 py-0">
			<nav class="navbar navbar-expand-md navbar-fixed-top navbar-light main-nav pt-5 pb-4">
				<div class="container">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarFilters" aria-controls="navbarFilters" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarFilters">					
					<?php if( $genres = get_terms( array( 'taxonomy' => 'genres' ) ) ) : ?>
						<ul class="nav navbar-nav order-1 order-md-2">
						<li class="nav-item active">
							<a class="reset btn btn-red-outline mr-2 mb-4" href="#" sector="genre" genreid="">All</a>
						</li>	                        
						<?php
						foreach( $genres as $genre ) : ?>

						<li class="nav-item">
							<a class="btn btn-red-outline mr-2 mb-4" href="#" genre="" genreid="<?php echo $genre->term_id; ?>"><?php echo $genre->name; ?></a>
						</li>	

						<?php endforeach;      
						echo '</ul>';
					endif;
					?>	
					</div><!-- /navbarFilters -->
				</div>
			</nav>
		</div><!-- /col-12 -->		
	</div><!-- /row -->
</div><!-- /container -->

<?php
global $wp_query;
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
	'posts_per_page' => 12,
	'post_type'		=> 'films',
	'paged' 		=> $paged
);
$wp_query = new WP_Query($args); ?>
<?php if ($wp_query->have_posts()) : ?>
<section class="container py-0">

	<div class="row" id="ajax_filter_films">
	<p class="filter_status"></p>
	<?php while ($wp_query->have_posts()) : $wp_query->the_post(); $col = 'col-md-4'; ?>
		<?php include( locate_template( 'includes/loop.php', false, false ) ); ?>
	<?php endwhile;  ?> 
	</div><!-- /row -->
    
	<div class="row pt-3 pb-5" id="pagination">
		<div class="col-12 col-md-8 offset-md-2">
			<div align="center"><?php wpbeginner_numeric_posts_nav(); ?></div>
		</div><!-- /col-md-8 -->
	</div><!-- /row -->	    
    
</section><!-- /container -->     
<?php endif; wp_reset_query(); ?>   

<?php
get_footer();

loop.php would contain whatever you need, like the post title, image and any other info.

Then in your footer (or enqueue it), add the javaScript:

<script>
//filter the films
jQuery(function($){
	$('#filters .btn').click(function(){
		
		var genre = jQuery(this).attr("genre");	
		var genreid = jQuery(this).attr("genreid");	
		
		$.ajax({
			type        : "POST",
			data		: { action : 'get_film_posts', genre: genre, genreid: genreid }, 
			dataType	: "html",
			url			: '<?php echo admin_url('admin-ajax.php');?>', 

			success     : function(data) {
				//alert(this.data);
				jQuery("#ajax_filter_films").html(data);
				
			},
			error       : function(xhr, status, error) {
				var err = eval("(" + xhr.responseText + ")");
				alert(err.Message);
			}
		});
		return false;
	});
});
</script>

Finally, in your functions file:

<?php
function get_film_posts() {
	
	$genre_id = $_POST['genreid'];
	
	$genre = $_POST['genre'];
	
	if( $sector ) {
		$terms = get_terms( $genre ); 
		$genre_id = wp_list_pluck( $terms, 'term_id' );
	}
	
	$args = array(
			'post_type' 		=> 'films',
			'post_status'		=> 'publish',
			'posts_per_page'	=> -1, // show all posts.
			'order'				=> 'DESC',
	);
			
	$args['tax_query'] = array(
		'relation' 		=> 'OR', 

		array(
			'taxonomy'	=> 'genres',
			'field'		=> 'term_id',
			'terms'		=> $genre_id
		),			
		
	);
	
	$query = new WP_Query( $args );
	if( $query->have_posts() ) : 

		while( $query->have_posts() ): $query->the_post(); $col = 'col-md-4';	
			include( locate_template( 'includes/loop.php', false, false ) );
		endwhile;  wp_reset_postdata();

	endif;
	
	die();

}
// Fire AJAX action for both logged in and non-logged in users
add_action('wp_ajax_get_film_posts', 'get_film_posts');
add_action('wp_ajax_nopriv_get_film_posts', 'get_film_posts');

That should then get you somewhere!