WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

Необходимо реализовать 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
23 дня назад
  • 2

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

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

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

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

    amirg 22 дня назад

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

    {\"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 22 дня назад

    Я не сторонник работы со 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 21 день назад

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

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

    Kama 21 день назад

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

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

    Комментировать
  • 1
    el-lable155 cайт: 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 22 дня назад

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

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

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

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