Фильтр категорий WordPress Ajax в блоке Гутенберга - PullRequest
Новая
       35

Фильтр категорий WordPress Ajax в блоке Гутенберга

0 голосов
/ 18 апреля 2019

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

Есть много постгрид-блоков, но я не видел ни одного с фильтром ajax на внешнем интерфейсе. Поэтому я решил попробовать и построить один.

Это настройка блока, основанная на уроке от Миши: https://rudrastyh.com/wordpress/ajax-post-filters.html

index.php (для рендеринга на стороне сервера): 

<?php

function register_block() {
    register_block_type(
        'blocks/filter-posts',
        array(
            'editor_script' => 'blocks-js',
            'attributes'      => array(
                'categories'      => array(
                    'type' => 'string',
                ),
              ),
            'render_callback' => 'filter_function'
        )
    );
}

add_action('wp_ajax_filter', 'filter_function');
add_action('wp_ajax_nopriv_filter', 'filter_function');

function filter_function($attributes){

    if( isset( $_POST['categoryfilter'] ) ) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'category',
                'field' => 'term_id',
                'terms' => $_POST['categoryfilter']
            )
        );
    }
        $posts_markup = '<div id="response">';//output ajax data here

    if( $terms = get_terms( array('taxonomy' => 'category') ) ) {
        $posts_markup .= '<form action="'.site_url().'/wp-admin/admin-ajax.php" method="POST" id="filter">';
        $posts_markup .= '<select name="categoryfilter"><option value="">Select category...</option>';

        foreach ( $terms as $term ) :
            $posts_markup .= '<option value="'.$term->term_id.'">'.$term->name.'</option>';
        endforeach;

        $posts_markup .= '</select><button>Apply filter</button><input type="hidden" name="action" value="ajax_filter"></form>';

    }

    $query = new WP_Query( $args );

    if( $query->have_posts() ) {

        while( $query->have_posts() ) {
            $query->the_post();
            $posts_markup .= '<h2>' . $query->post->post_title . '</h2>';
        }

        $posts_markup .= '</div>';//<div id="response">

        wp_reset_postdata();

        return $posts_markup;

    } else {
        $posts_markup .= '<h2>No posts to show</h2>';
        $posts_markup .= '</div>';//<div id="response">

        return $posts_markup;
    }

}//end filter_function

index.js: 

registerBlockType( 'blocks/filter-posts', {
... etc etc...
});

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('button').text('Processing...'); // changing the button label
            },
            success:function(data){
                filter.find('button').text('Apply filter'); // changing the button label back
                $('#response').html(data); // insert data
            }
        });
        return false;
    });
});

Вызов ajax возвращает 0. Я могу получить некоторые результаты только при отображении post_markup в файле php. Но это противоречит способу установки блока Гутенберга. Я не могу понять, как заставить это работать. Я надеюсь, что некоторые из вас опытные программисты Wordpress могут помочь.

...