Sample Filter HTML - Total WP Theme - IMPORTANT SEE EXAMPLE SHORTCODE IN THE COMMENTS!

gistfile1.txt

/*** IMPORTANT ****/
You need to make sure the AJAX script is loaded on the page which is done via PHP using the following:

<?php totalthemecore_call_non_static( 'Vcex\Ajax', 'enqueue_scripts' ); ?>


/**** SAMPLE FILTER HTML ****/

@note: You can have multiple filter elements with the same target - for example if you want to have a search element that targets a filter above the grid and then the rest of the filter options to the side.

<div data-vcex-ajax-filter="1" data-vcex-ajax-filter-target="#YOUR_POST_CARDS_ELEMENT_UNIQUE_ID" data-vcex-ajax-filter-multiple="1" data-vcex-ajax-filter-relation="AND">

	SAMPLE LINK - THIS WOULD FILTER ITEMS IN "category_1"
	<a href="#" data-vcex-type="category" data-vcex-value="category_1">Category 1</a>

	SAMPLE NOT IN BUTTON - THIS WOULD EXCLUDE ITEMS IN THE "tag_1" POST TAG.
	<button class="theme-button" data-vcex-type="post_tag" data-vcex-value="tag_1" data-vcex-operator="NOT IN">Life Tag <span class="vcex-ajax-filter-count">(-)</span></button>

	SAMPLE CATEGORY SELECT - for custom taxonomies simply change the data-vcex-type value to your taxonomy name.
	<select data-vcex-type="category">
	  <option value="">All</option>
	  <option value="category_1">Category 1</option>
	  <option value="category_2">Category 2</option>
	  <option value="category_3">Category 3</option>
	</select>

	SAMPLE ORDER DROPDOWN - Note: doesn't have to be a dropdown you can use links/buttons - this is just an example
	<select data-vcex-type="order">
	<option value="">Default</option>
	  <option value="asc">ASC</option>
	  <option value="desc">DESC</option>
	</select>

	SAMPLE ORDERBY DROPDOWN
	<select data-vcex-type="orderby">
	  <option value="">Default</option>
	  <option value="name">Name</option>
	  <option value="date">Date</option>
	</select>

	SAMPLE CHECKBOX
	<input type="checkbox" id="category_1_filter" data-vcex-type="category" value="category_1">
	<label for="category_1_filter">Show Items in Category 1</label>
	
	SAMPLE META CHECKBOX
	<input type="checkbox" id="meta_checkbox" data-vcex-type="meta" data-vcex-key="color" value="red">
	<label for="meta_checkbox">Meta: Color = Red</label>

	SAMPLE RANGE USING META VALUE
	<input type="range" min="1" max="5" data-vcex-type="meta" data-vcex-key="wpex_post_rating" data-vcex-meta-compare="<" data-vcex-meta-type="NUMERIC" data-vcex-value="" onchange="this.nextElementSibling.value = this.value"><output>0</output>

	SAMPLE SEARCH
	<input type="text" data-vcex-type="search" placeholder="search items">

	// SAMPLE META QUERY SELECT - again, doesn't have to be a select this is just an example.
	<select data-vcex-type="meta" data-vcex-key="color" data-vcex-meta-compare="LIKE" data-vcex-meta-type="CHAR">
	  <option value="">Choose a Color</option>
	  <option value="red">red</option>
	  <option value="black">black</option>
	</select>

	SAMPLE RESET BUTTON
	<button class="theme-button" href="#" data-vcex-type="reset">Reset</button>

</div>

Example Shortcode for a custom filter:

/**
 * Create a custom filter shortcode.
 *
 * Make sure to change "myprefix_" to whatever prefix you want ;)
 *
 * 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">

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

				<?php
				// Example category select.
				$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 } ?>

				<select data-vcex-type="order">
					<option value="">Order</option>
				  	<option value="asc">ASC</option>
				  	<option value="desc">DESC</option>
				</select>

				<select data-vcex-type="orderby">
					<option value="">Order By</option>
					<option value="name">Name</option>
					<option value="date">Date</option>
				</select>

				<input type="text" data-vcex-type="search" placeholder="search items">

			</div>

			<button class="theme-button" href="#" data-vcex-type="reset">Reset Filter</button>

		</div>

	<?php

	return ob_get_clean();
}
add_shortcode( 'myprefix_ajax_filter', 'myprefix_ajax_filter_shortcode' );

In Total 5.11 you can now add a "submit" button inside your filter so that the ajax filter won't run until the user clicks the submit button which can be ideal for large filters and/or filters that include search fields.

Simply add an element (button probably best) with a data-vcex-type attribute value of "submit", example:

<button class="theme-button" data-vcex-type="submit">Submit</button>

And that's it! Happy Coding ;)