WordPress как на ладони

Необходимо реализовать 2 ajax запроса на вывод постов.

ЗАДАЧА:

  1. На странице есть 4 рубрики (обувь, штаны, футболки, очки);
  2. По клику на рубрику c помощью ajax выводится СПИСОК МЕТОК рубрики (мужчина/женщина) под списком рубрик.
  3. По клику на метку с помощью ajax выводятся ПОСТЫ ниже с фильтром:
    рубрика>метка>посты

МОЙ КОД:

Реализовал как плагин для удобства
JS скрипт

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_tags',
		link: linkCat
	  },
	  function (responce) {
		$subcategories.html(responce);
	  }
	);
  }

});

PHP обработчик

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

// Функция обработчик
 add_action( 'wp_ajax_get_tags', 'ajax_show_tags' );
 add_action( 'wp_ajax_nopriv_show_tags', 'ajax_show_tags' );

 function ajax_show_tags() {

	$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' )
	) );
 }

Код который выводит метки при успешном выполнении

<!-- НАЧАЛО Вывод тегов для категорий -->
<?php
  $postIDs = get_objects_in_term(get_query_var('cat'), 'category');
	if (!empty($postIDs) && !is_wp_error($postIDs)) {
	  $tags = wp_get_object_terms($postIDs, 'post_tag');
	if (!empty($tags) && !is_wp_error($tags)) {
?>
<ul>
  <?php foreach($tags as $tag) { ?>
  <li><a href="<?php echo get_term_link($tag, 'post_tag') ?>">
	<?php echo $tag->name ?></a></li>
  <?php } ?>
</ul>
  <?php } ?>
<?php } ?>
<!-- КОНЕЦ Вывод тегов для категорий -->

-

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

Помогите довести до ума плиз, уже второй день вожусь?

Screen

0
amirg
5.1 год назад
  • 2

    У вас 1 обработчик, а должно быть 2. Для тегов и для категорий.
    В первый, вам нужно передавать категорию, а во второй - категорию и тег.

    По клику на категорию должен идти запрос на выборку меток (отправляется категория, приходят метки). По клику на метку должен идти запрос на выборку постов (отправляется категория и метка, приходят посты).

    У вас, на сколько я понимаю по коду, реализовано только получение меток (получаются посты из категории (только ограниченное количество почему-то и выводятся их метки).

    Вам нужно как-то запоминать активную категорию (например добавив к ссылке класс active после получения меток или запоминать ее в js переменную). При клике на тег, отправлять тег и категорию (которая у вас в переменной или active).

    amirg 5.1 год назад

    Спасибо за детальный план действий.
    Я создал второй обработчик, который передает уже готовое название категории и ссылку на тег в таком виде:

    {\"link\":\"http://localhost:8888/wp-local/tag/men/\",\"category\":\"first\"}

    Появилось еще пару вопросов, буду признателен если поможете разобраться:
    1) не могу разобраться как получить ответ без лишних символов в виде ключ-значение;
    Подскажите пожалуйста что я делаю не так?
    2) Как правильно оформить query_posts с полученными данными?

    Javascript код

      // Отправка ajax запроса при клике по ТЕГУ
      jQuery(document).on('click', '#subcategories a', function(e) {
    	e.preventDefault();
    	// получаю ссылку активной категории и с помощью js извлекаю название категории
    	var categoryLink = jQuery('.active').attr('href'); 
    	var categorySlug = categoryLink.slice(0, -1).split('category/');
    	var linkTag = jQuery(this).attr('href');
    	ajaxGetPosts(linkTag, categorySlug[1]); // передаю ссылку на тег и название категории в AJAX функцию
      });
    
      function ajaxGetPosts(linkTag, currentCategory) {
    	var dataObj = { link: linkTag, category: currentCategory }
    	var data = JSON.stringify(dataObj); // перевожу обьект в строку чтобы отправить на сервер
    	jQuery.post(
    	  myPlugin.ajaxurl,
    	  {
    		action: 'show_posts',
    		data: data
    	  },
    	  function (data) {
    		$posts.html(data);
    	  }
    	);
      }
    });

    Обработчик в PHP

    // Функция обработчик клика по МЕТКЕ = получение категорий+тегов
      add_action( 'wp_ajax_show_posts', 'ajax_show_posts' );
      add_action( 'wp_ajax_nopriv_show_posts', 'ajax_show_posts' );
    
      function ajax_show_posts() {
    
    	$data = ($_POST['data']);
    
    	echo $data; // просто вывел на экран данные которые получил сервер
    
    	query_posts( array(
    		'posts_per_page' => get_option( 'posts_per_page' ),
    		'post_status'    => 'publish',
    		'category_name'   => '' // Как передать второе значение полученного массива?
    	  'tag_name' => '' // как записать тег?
    	) );
    
    	require plugin_dir_path( __FILE__ ) . 'category-posts.php'; // в этом файле находится loop с выводом постов
    
    	wp_die();
      }
    kaliyan 5.1 год назад

    Я не сторонник работы со slug-ами (строками), это лишний геморрой (очищать и проверять), легче работать с id (тут просто intval($var) и проверить, если !=0).

    При выводе ссылок на категории, добавьте в тег ссылки data-category-id="тут_id_категории". При формировании данных, для отправки ajax-ом, получить этот id можно $(this).data('categoryId'), но вместо $(this) подставляете нужный селектор. С тегами аналогично, ставим атрибут data-tag-id="тут_id_тега", получаем - $this.data('tagId').

    Теперь про отправку данных ajax-ом. Не нужно ничего stringify-ить.

    jQuery(document).ready(function($) {
    
    	// Отправка ajax запроса при клике по ТЕГУ
    	$(body).on('click', '#subcategories a', function(e) {
    		e.preventDefault();
    
    		var category_id = $('.active').data('categoryId');
    		var tag_id = $(this).data('tagId');
    
    		ajaxGetPosts(category_id , tag_id);
    	});
    
    	function ajaxGetPosts(c_id, t_id) {
    		var data = {
    			action: 'show_posts',
    			category_id: c_id,
    			tag_id: t_id
    		}
    
    		$.post(myPlugin.ajaxurl, data, function (data) {
    			$posts.html(data);
    		});
    	}
    
    });

    Теперь в php будут доступны переменные $_POST['category_id'] и $_POST['tag_id']. Их intval-им.

    Вместо query_posts, используйте new WP_Query();

    $args = array(
    	'posts_per_page' => //число, сколько нужно выбрать постов,
    	'cat' => $category_id,
    	'tag_id' => $tag_id
    );
    
    $posts = new WP_Query($args);
    
    if ($posts->have_posts()) {
    	// тут работаем с выводом постов
    	while ($posts->have_posts()) {
    		$posts->the_post();
    
    		// тут работаем с постом
    		the_title();
    		echo '<br/>';
    	}
    
    	wp_reset_query();
    }
    amirg 5.1 год назад

    Я первый ajax запрос также переделал, действительно, легче работать с id.
    Сортировка заработала, посты сортируются и выводятся.
    Спасибо вам за то что помогли разобраться с этим вопросом.

    P.s. недавно зарегался и, блин, рейтинга не хватает чтобы поставить отметку "Хороший ответ" smile

    Комментировать
  • 1
    el-lable620 el-lable.ru
    jQuery(function($) {
      var $subcategories = $('#subcategories');
    
      // Отправка ajax запроса при клике по ссылке
      $('#subcategories, #customCategory').delegate('a', 'click', function(e) {
    	e.preventDefault();
    	var linkCat = $(this).attr('href');
    
    	ajaxCat(linkCat);
      });
    
      function ajaxCat(linkCat) {
    	$.post(
    	  myPlugin.ajaxurl,
    	  {
    		action: 'get_tags',
    		link: linkCat
    	  },
    	  function (responce) {
    		$subcategories.html(responce);
    	  }
    	);
      }
    
    });
    amirg 5.1 год назад

    Спасибо за ответ, по факту теперь ajax работает и на клик по категории и метке, но при нажатии на метку выводятся посты со всех категорий относящиеся к данной метке.

    Сейчас пытаюсь разобраться как реализовать чтобы фильтр категория,метка применялся, отпишусь к чему пришел.

    Благодарю за помощь

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация