Snippet: Advanced AJAX Filter Example

<?php // !!! ADDED FOR PROPER SNIPPET FORMATTING - YOU MAY NEED TO REMOVE !!!

/**
 * Create a custom filter shortcode.
 *
 * Make sure to change "myprefix_" to whatever prefix you want.
 *
 * Each data set should contain a data-vcex-type attribute with the type:
 * "meta", "post", "order", "search", "orderby", "reset", "submit" or {taxonomy_name}
 *
 * Each data set should also contain a data-vcex-value (for links) or value attribute (for form elements).
 *
 * Usage [myprefix_ajax_filter target="GRID_ID"]
 */
function myprefix_ajax_filter_shortcode( $atts ) {
	if ( empty( $atts['target'] ) || ! function_exists( 'totalthemecore_call_non_static' ) ) {
		return;
	}

	// Load ajax scripts.
	totalthemecore_call_non_static( 'Vcex\Ajax', 'enqueue_scripts' );

	// Get target grid.
	$target = $atts['target'];

	// Render filter HTML.
	ob_start();
	?>

	<div data-vcex-ajax-filter="1" data-vcex-ajax-filter-target="<?php echo esc_attr( str_replace( '#', '', $target ) ); ?>" data-vcex-ajax-filter-multiple="1" data-vcex-ajax-filter-relation="AND">

        <span class="screen-reader-text">Filter posts by:</span>

		<div class="wpex-flex wpex-flex-wrap wpex-gap-25">

			<?php
			/* A simple category button */ ?>
			<button class="theme-button" data-vcex-type="category" data-vcex-value="category-1">Category 1</button>

			<?php
			/* Category Dropdown */
			$categories = get_terms( [
				'taxonomy'   => 'category',
				'hide_empty' => false,
			] );
			if ( $categories && ! is_wp_error( $categories ) ) { ?>
				<select data-vcex-type="category">
					<option value="">Select Category</option>
					<?php foreach ( $categories as $category ) { ?>
						<option value="<?php echo esc_attr( $category->term_id ); ?>"><?php echo esc_html( $category->name ); ?></option>
					<?php } ?>
				</select>
			<?php } ?>
			
			<?php
			/* Order Dropdown */ ?>
			<select data-vcex-type="order">
				<option value="">Order</option>
				<option value="asc">ASC</option>
				<option value="desc">DESC</option>
			</select>

			<?php
			/* Orderby Dropdown */ ?>
			<select data-vcex-type="orderby">
				<option value="">Order By</option>
				<option value="name">Name</option>
				<option value="date">Date</option>
			</select>

			<?php
			/**
			 * Tribe Events Calendar "When" Dropdown.
			 * 
			 * Notice how we don't add the data-vcex-type to the select, but rather to
			 * each option. You can do this with any select field.
			 * 
			 * @requires Total 6.4+
			 */ ?>
			 <select>
				<option value="">When</option>
				<option data-vcex-type="ends_after" value="now">Upcoming</option>
				<option data-vcex-type="ends_before" value="now">Past</option>
			</select>

			<?php
			/**
			 * Tribe Events Calendar Date Inputs.
			 * 
			 * @requires Total 6.4+
			 */ ?>
			<div class="wpex-flex wpex-gap-25">
				<label for="start-date-filter-input" class="screen-reader-text">Start Date</label>
				<input id="start-date-filter-input" type="date" data-vcex-type="start_date" placeholder="Start Date">
				<label for="end-date-filter-input" class="screen-reader-text">End Date</label>
				<input id="end-date-filter-input" type="date" data-vcex-type="end_date" placeholder="End Date">
			</div>

			<?php
			/* Search Field */ ?>
			<input type="text" data-vcex-type="search" placeholder="search items">

		</div>

		<?php
		/**
		 * Submit Field ( !! Optional !!)
		 * 
		 * If a submit button exists the filter will only run when clicking the button.
		 * Otherwise it will run whenever making a new selection
		 * or when typing in the search box.
		 */ ?>
		<button class="theme-button" data-vcex-type="submit">Submit Filter</button>

		<?php
		/* Reset Field */ ?>
		<button class="theme-button" data-vcex-type="reset">Reset Filter</button>

	</div>

	<?php
	return ob_get_clean();
}
add_shortcode( 'myprefix_ajax_filter', 'myprefix_ajax_filter_shortcode' );