Как сделать ajax фильтрацию по категориям в WP?

Question

[tajfun_rt]

Есть рабочий код решения вопроса, вот от сюда Как сделать ajax фильтрацию по произвольному полю флажок?, в качестве выбора там использован список тег <li>, как сделать чтобы выбор категорий происходил из выпадающего списка. Сам список вывожу вот таким способом:

<div class="category-filter">
	<form id="ajax-filter">
		<?php
			$categories = get_terms( // you can use get_categories() function as well
				array(
					// you can replace the taxonomy parameter value with any custom taxonomy name or 'post_tag'
					'taxonomy' => 'category',
					'orderby' => 'name',
				) 
			);
			if( $categories ) :
				?>
					<select>
						<option data-cat="0" value="">Select category...</option>
						<?php
							foreach ( $categories as $category ) :
								?><option data-cat="' . $category->term_id . '" value="<?php echo $category->term_id ?>"><?php echo $category->name ?></option><?php
							endforeach;
						?>
					</select>
				<?php
			endif;
		?>
	</form>
</div>

В файле functions.php темы размещен следующий код:

function enqueue_ajax_filter() {
    wp_enqueue_script('ajax-filter', get_stylesheet_directory_uri() . '/ajax-filter.js', array('jquery'), '1.0', true);
    wp_localize_script('ajax-filter', 'myAjax', array(
        'url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('filter_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_ajax_filter');

function filter_posts_by_category() {
    check_ajax_referer('filter_nonce', 'nonce');

    $cat_id = isset($_POST['cat_id']) ? intval($_POST['cat_id']) : 0;

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
    );

    if ($cat_id > 0) {
        $args['cat'] = $cat_id;
    }

    $query = new WP_Query($args);
   if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post();
   
   if ( $yaatra_mag_archive_layout == 'classic-grid' ) {
						if ( $post_count == 1 ) {
		                	echo '<div class="archive-grid-post-wrapper">';
		                } elseif ( $post_count == 5 ) {
		                	echo '<div class="archive-classic-post-wrapper">';
		                }
					}

					/*
					 * Include the Post-Type-specific template for the content.
					 * If you want to override this in a child theme, then include a file
					 * called content-___.php (where ___ is the Post Type name) and that will be used instead.
					 */
					get_template_part( 'template-parts/content', get_post_type() );

					if ( $yaatra_mag_archive_layout == 'classic-grid' ) {
						if ( $post_count == 4 || $post_count == 5 || $post_count == $total_post_count ) {
							echo '</div>';
						}
						if ( $post_count == 5 ) { $post_count = 0; }
						$post_count++;
					}
    endwhile;
			 wp_reset_postdata();
    else :
        echo '<p>Записи не найдены.</p>';
    endif;

    wp_die();
}
add_action('wp_ajax_filter_posts_by_category', 'filter_posts_by_category');
add_action('wp_ajax_nopriv_filter_posts_by_category', 'filter_posts_by_category');

Не могу к нему правильно сделать JS в файле ajax-filter.js. Может кто подскажет решение?

Comments

[ProjectSoft]

Не могу к нему правильно сделать JS в файле ajax-filter.js

Всё дал? А просишь помощь в JS.

[tajfun_rt]

ProjectSoft, со списком на основе тега <li> работает вот с этим JS

jQuery(document).ready(function($) {
    $('.category-filter a').on('click', function(e) {
        e.preventDefault();
        var cat_id = $(this).data('cat');
        $.ajax({
            url: myAjax.url,
            type: 'POST',
            data: {
                action: 'filter_posts_by_category',
                cat_id: cat_id,
                nonce: myAjax.nonce
            },
            success: function(response) {
                $('#post-container').html(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

а с тегом <option> нет.

[ProjectSoft]

tajfun_rt, ну так правильно. Вы не можете получить data-cat. А вот value у select получить можете. Причём это отслеживается в HTML коде.

И не могу понять, зачем вам здесь форма. Она абсолютно не нужна. МБ какой-то срытый смысл....

[tajfun_rt]

ProjectSoft, спасибо работает. Да тег лишний, убрал.