Как правильно реализовать динамический вывод записей применяя фильтры?

Question

[Алексей]

Добрый день,
Мне необходимо реализовать такую задачу:
Имеется одностраничный сайт на wordpress и моя задача дополнить его блоком, контент которого будет меняться динамически c помощью ajax.
Условия:
=> 4 категории (к примеру: обувь, штаны, футболки, очки)
=> 2 рубрики (к примеру: мужчина, женщина)
=> Мини посты (формат: Фото, мини-описание, цена)
=> Каждый пост не должен открываться по клику на него в отдельной странице (этот функционал буду отменять)
Задача:
1. На главной странице сайта вывести список категорий,
2. При выборе категории, под категориями без перезагрузки появляются две подкатегории(рубрики) при выборе одной из них ниже без перезагрузки подгружаются посты.

Мой план действий
1. Создаю в вордпресс: 4 категории и 2 метки - заполняю это все дело записями.
2. Настраиваю на cтранице вывод списка 4 категорий.
3. Обрабатываю клики по категориям ajax'ом и при выборе одной из них подгружаются метки.
4. Обрабатываю клик ajax'ом по меткам и при выборе одной из меток подгружаются нужные записи.

Я не сталкивался с такой задачей, но с ajax уже решал некоторые задачи.
Подскажите, пожалуйста, правильный ли ход действий? и если есть решения попроще или адекватней, то подскажите плиз.
Буду рад любой помощи.
P.s. Прикрепил фото структуру, продублировал структуру на codepen
https://codepen.io/alex-rogochiy/pen/JxXoKW

Answer 1

[yarovikov]

Ну да. А что смущает?

Comments

[Алексей]

Спасибо за ответ, буду пробовать.
Да не то чтобы смущает, но перед выполнением хочу убедиться на этапе планирования, что в правильном направлении двигаюсь

[yarovikov]

Алексей, если будете чисто на категориях реализовывать, то это самый простой способ

С помощью js создаете массив с айдишниками (где пушите в него новые по клику), а в пхп его получаете

$ids = $_POST['ids'];

	if ($ids) {
		$args = array(
			'post_type' => 'works' ,
			'tax_query' => array(
				array(
					'taxonomy' => 'works_categories',
					'terms' => $ids,
					'field' => 'term_id'
				),
			)
		);
	}

[Алексей]

Спасибо большое за ответ.
Главное начать, сейчас уже выводятся метки ajax'ом.
take.ms/ZN6ZK

Дошел до последнего пункта,
4. Обработать ajax'ом клик по меткам (men или women).
Не могу разобраться как в одной ajax функции обрабатывать отдельно клик по категориям,
и клик по меткам?

function ajaxCat(linkCat) {
    jQuery.post(
      myPlugin.ajaxurl,
      {
        action: 'get_subtitle',
        link: linkCat
      },
      function (responce) {
        $subcategories.html(responce);
      }
    );
  }

[yarovikov]

Алексей, а зачем отдельно? Просто с помощью кликов удаляйте/добавляйте данные. Как вы формируете выдачу в php?

[Алексей]

вот скриншот
take.ms/n37je

[Алексей]

jQuery(document).ready(function() {

  var $subcategories = jQuery('#subcategories');

  // Отправка ajax запроса при клике по ссылке
  jQuery('#customCategory a').click(function(e) {
    e.preventDefault();
    var linkCat = jQuery(this).attr('href');

    ajaxCat(linkCat);
  });

  function ajaxCat(linkCat) {
    jQuery.post(
      myPlugin.ajaxurl,
      {
        action: 'get_subcategories',
        link: linkCat
      },
      function (responce) {
        $subcategories.html(responce);
      }
    );
  }


});

<?php
/**
 * Plugin Name: Ajax Categories
 */

 add_action( 'wp_ajax_get_subcategories', 'ajax_show_subcategories' );
 add_action( 'wp_ajax_nopriv_get_subcategories', 'ajax_show_subcategories' );


 function ajax_show_subcategories() {

 	$link = ! empty( $_POST['link'] ) ? esc_attr( $_POST['link'] ) : false;
 	$slug = $link ? wp_basename( $link ) : false;
 	$cat  = get_category_by_slug( $slug );

 	if ( ! $cat ) {
 		die( 'Не найдена' );
 	}

 	query_posts( array(
 		'posts_per_page' => get_option( 'posts_per_page' ),
 		'post_status'    => 'publish',
 		'category_name'   => $cat->slug
 	) );

 	require plugin_dir_path( __FILE__ ) . 'subcategories.php';

 	wp_die();
 }

 add_action( 'wp_enqueue_scripts', 'my_assets' );
 function my_assets() {
 	wp_enqueue_script( 'show-posts', plugins_url( 'show-posts.js', __FILE__ ), array( 'jquery' ) );

 	wp_localize_script( 'show-posts', 'myPlugin', array(
 		'ajaxurl' => admin_url( 'admin-ajax.php' )
 	) );
 }

[yarovikov]

Алексей,

query_posts( array(
 		'posts_per_page' => get_option( 'posts_per_page' ),
 		'post_status'    => 'publish',
 		'tag_id => // массив айдишников тегов
                'cat' => // массив айдишников категорий
 	) );

или можно почитать про

'tax_query' => [
		'relation' => 'AND', ...

[Алексей]

Спасибо за то что уделили время и внимание, буду дальше разбираться в этом вопросе)
Завтра думаю уже закончу с этой задачей!)