mizner
5/30/2016 - 1:36 AM

Custom Post Type & Tax w/ List JS

Custom Post Type & Tax w/ List JS

<section class="auctions row container">
	<h1><?php $post_type = get_post_type_object( 'auctions_post' );
		echo $post_type->label; ?></h1>
	<div id="auctions-list">
		<input class="search" placeholder="Filter Auctions"/>
		<ul class="sort-by">
			<button class="sort btn" data-sort="name">Sort by name</button>
			<button class="sort btn" data-sort="date">Sort by date</button>
		</ul>
		<h3>Term List</h3>
		<?php
		$tax = 'auctions_type'; // your taxonomy name
		// get the terms of taxonomy
		$terms = get_terms( $tax, $args = [
			'hide_empty' => false, // do not hide empty terms
			'orderby'    => 'count',
		]
		);

		?>
		<ul class="auction-types-filter">
			<button class="btn" id="filter-none">Show all</button>
			<?php
			foreach ( $terms as $term ):
				$term_link = get_term_link( $term ); // Get the term link
				// How to grab links, in case you need a tags: esc_url( $term_link )
				if ( $term->count > 0 ): // display name and count
					?>
					<button class="btn"
					        id="filter-<?php echo $term->slug ?>"><?php echo $term->name . ' (' . $term->count . ')' ?></button>
					<?php
				elseif ( $term->count === 0 ): // display name
					?>
					<button class="btn" id="filter-<?php echo $term->slug ?>"><?php echo $term->name ?></button>
					<?php
				endif;
			endforeach;
			?>
		</ul>
		<?php
		function get_all_the_terms( $post ) {
			$postTerms = wp_get_post_terms( $post->ID, 'auctions_type' );
			foreach ( $postTerms as $postTerm ) {
				echo $postTerm->name . ', '; // Added a space between the slugs with . ' '
			}
		}

		?>
		<section class="list">
			<?php
			$the_query = new WP_Query( [
				'post_type'      => 'auctions_post',
				'posts_per_page' => - 1
			] );

			while ( $the_query->have_posts() ) : $the_query->the_post();
				$get_term = wp_get_post_terms( $post->ID, 'auctions_type', [ "fields" => "all" ] );
				$the_term = $get_term[0]->name;


				?>
				<a class="" href="<?php the_permalink(); ?>">
					<article class="<?php echo $the_term ?> auction-listing">
						<?php
						if ( has_post_thumbnail() ) :
							$thumb_id        = get_post_thumbnail_id();
							$thumb_url_array = wp_get_attachment_image_src( $thumb_id, 'medium', true );
							$thumb_url       = $thumb_url_array[0];
						else:
							$thumb_url = get_template_directory_uri() . '/images/powell-auction-default-image.jpg';
						endif; ?>

						<div class="auction-listing-image"
						     style="background: url('<?php echo $thumb_url ?>') center center no-repeat; height: 300px; width: 300px; background-size: cover;">
						</div>
						<div class="auction-listing-description description">
							<p><strong><span
										class="category"><?php get_all_the_terms( $post ); ?></span></strong>
							</p>
							<h2 class="name"><?php echo the_title(); ?></h2>
							<p class="date"><strong>Date: </strong><?php the_field( 'event_date_ends' ); ?></p>
							<p class="time"><strong>Time: </strong><?php the_field( 'time' ); ?></p>
							<p class="location"><strong>Location: </strong><?php the_field( 'location' ); ?></p>
							<p class="office"><strong>Office: </strong><?php the_field( 'office' ); ?></p>
							<p class="agent"><strong>Agent: </strong><?php the_field( 'agent' ); ?></p>
						</div>
					</article>
				</a>
				<?php
			endwhile;
			wp_reset_postdata();
			?>
		</section>
		<script>
			jQuery(document).ready(function ($) {
				var options = {
					valueNames: ["category", "name", "description", "date"]
				};
				var featureList = new List("auctions-list", options);
				<?php foreach ( $terms as $term ): ?>
				$("#filter-<?php echo $term->slug; ?>").click(function () {
					featureList.filter(function (item) {
						var taxList = item.values().category;
						<?php /* console.log(taxList.includes("<?php echo $term->name; ?>")); // Debug */ ?>
						if (taxList.includes("<?php echo $term->name; ?>") == 1) {
							return true;
						} else {
							return false;
						}
					});
					return false;
				});
				<?php endforeach; ?>

				$("#filter-none").click(function () {
					featureList.filter();
					return false;
				});
			});
		</script>
	</div>

</section>