Необходимо реализовать 2 ajax запроса на вывод постов.
ЗАДАЧА:
- На странице есть 4 рубрики (обувь, штаны, футболки, очки);
- По клику на рубрику c помощью ajax выводится СПИСОК МЕТОК рубрики (мужчина/женщина) под списком рубрик.
- По клику на метку с помощью 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 } ?>
<!-- КОНЕЦ Вывод тегов для категорий -->
-
Я попытался реализовать эту задачу, получилось выводить либо метки либо посты категорий а как в задаче не понял.
Помогите довести до ума плиз, уже второй день вожусь?
У вас 1 обработчик, а должно быть 2. Для тегов и для категорий.
В первый, вам нужно передавать категорию, а во второй - категорию и тег.
По клику на категорию должен идти запрос на выборку меток (отправляется категория, приходят метки). По клику на метку должен идти запрос на выборку постов (отправляется категория и метка, приходят посты).
У вас, на сколько я понимаю по коду, реализовано только получение меток (получаются посты из категории (только ограниченное количество почему-то и выводятся их метки).
Вам нужно как-то запоминать активную категорию (например добавив к ссылке класс active после получения меток или запоминать ее в js переменную). При клике на тег, отправлять тег и категорию (которая у вас в переменной или active).
Спасибо за детальный план действий.
Я создал второй обработчик, который передает уже готовое название категории и ссылку на тег в таком виде:
{\"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(); }Я не сторонник работы со 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(); }Я первый ajax запрос также переделал, действительно, легче работать с id.
Сортировка заработала, посты сортируются и выводятся.
Спасибо вам за то что помогли разобраться с этим вопросом.
P.s. недавно зарегался и, блин, рейтинга не хватает чтобы поставить отметку "Хороший ответ"
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); } ); } });Спасибо за ответ, по факту теперь ajax работает и на клик по категории и метке, но при нажатии на метку выводятся посты со всех категорий относящиеся к данной метке.
Сейчас пытаюсь разобраться как реализовать чтобы фильтр категория,метка применялся, отпишусь к чему пришел.
Благодарю за помощь