Búsqueda AJAX en páginas de posts por tipo de post personalizado

Question

Búsqueda AJAX en páginas de posts por tipo de post personalizado

22 ago 2012, 22:58:43

Vistas: 14.9K

Votos: 8

Tengo un problema al crear una búsqueda AJAX en mis páginas de post individuales. Necesito limitar los resultados de búsqueda a los tipos de post personalizados "fod_videos" y "post" y a la categoría 12. Mi problema es que la búsqueda está devolviendo todos los posts bajo esos filtros sin tener en cuenta el valor de búsqueda. Supongo que me estoy perdiendo algo obvio pero no logro resolverlo. Aquí está mi configuración.

<div class="panel">
  <h2>Buscar Videos</h2>
  <div id="my-search">
   <form role="search" method="get" id="searchform" action="http://myurl.com/" >
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Buscar" />
   </form>
  </div>
</div>

// Acción para AJAX (tanto para usuarios logueados como no logueados)
add_action('wp_ajax_wpa5000_search', 'wpa5000_search');
add_action('wp_ajax_nopriv_wpa5000_search', 'wpa5000_search');
function wpa5000_search(){
  global $wp_query;
  $search = $_POST['search_val'];
  $args = array(
    's' => $search,
    'posts_per_page' => 10,
    'cat' => 12, 
    'post_type' => array( 'post','fod_videos'  )
  );
  $wp_query = new WP_Query( $args );

  // Cargar plantilla con resultados
  get_template_part( 'video-search-results' );

  exit;
}

// Cargar scripts necesarios
add_action( 'wp_enqueue_scripts', 'wpa56343_scripts', 100 );
function wpa56343_scripts() {
 wp_enqueue_script(
    'wpa56343_script',
    get_template_directory_uri() . '/libs/search.js?ver=1.0',
    array( 'jquery' ),
    null,
    false
 );
 wp_localize_script(
    'wpa56343_script',
    'WPaAjax',
    array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    )
 );
}

// search.php

$(document).ready(function($){
 $('#searchsubmit').click(function(e){
    var $panel = $(this).closest(".panel");
    $panel.empty();
    e.preventDefault();
    var search_val=$("#s").val();
    $.post(
        WPaAjax.ajaxurl,
        {
            action : 'wpa5000_search',
            search_val : search_val
        },
        function( response ) {
            $panel.append( response );
        }
    );
 });
});

//video-search-results.php

<?php
 while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
   //CONTENIDO
<?php endwhile; ?>

Pollux Khafra

888

tipos de entradas personalizadas wp query buscar ajax

Comentarios

¿Es $wp_query un objeto WP_Query real?

Brian Fegter

23 ago 2012 05:54:29

@BrianFegter No estoy seguro de entender lo que quieres decir. Sabes, es raro porque uso esta misma fórmula en mi página de índice para obtener resultados de búsqueda AJAX y funciona bien. Simplemente no está obteniendo el search_val. Intenté imprimir $search pero no devuelve nada.

Pollux Khafra

23 ago 2012 06:25:49

Las acciones AJAX no tienen $wp_query definido porque no hay otro contexto aparte de los datos $_POST.

Brian Fegter

23 ago 2012 06:32:07

¿Qué lo hace funcionar desde mi página de índice? Lo uso para reemplazar el bucle predeterminado con los resultados de búsqueda y funciona.

Pollux Khafra

23 ago 2012 06:42:20

Todas las respuestas a la pregunta

Obtuve el código original funcionando, pero con el tipo de publicación personalizada (sin las categorías). Agrega un campo de entrada oculto en tu formulario con tu tipo de publicación así:

<input type="hidden" name="post_type" value="fod_videos" />

user142428

31

25 abr 2018 04:09:37

fuxia 107K · Accepted Answer · 2012-08-25T02:49:44Z

En lugar de 'cat' => 12 y $wp_query usa 'category_name' => slug y get_posts().

Aquí tienes un ejemplo básico de cómo funciona:

PHP

add_action( 'wp_loaded', array ( 'T5_Ajax_Busqueda', 'init' ) );

/**
 * Hacer el formulario de búsqueda con AJAX.
 */
class T5_Ajax_Busqueda
{
    /**
     * Instancia principal. Puedes crear más instancias para pruebas unitarias.
     * @type object
     */
    protected static $instance = NULL;

    /**
     * Nombre de la acción usada por los manejadores de callback AJAX
     * @type string
     */
    protected $action = 't5_ajax_busqueda';

    /**
     * Manejador para la carga inicial.
     *
     * @wp-hook wp_loaded
     * @return void
     */
    public static function init()
    {
        NULL === self::$instance and self::$instance = new self;
        return self::$instance;
    }

    /**
     * Constructor. Registra las acciones.
     *
     *  @wp-hook wp_loaded
     *  @return object
     */
    public function __construct()
    {
        $callback = array ( $this, 'buscar' );
        add_action( 'wp_ajax_'        . $this->action,        $callback );
        add_action( 'wp_ajax_nopriv_' . $this->action, $callback );
        add_action( 'wp_enqueue_scripts', array ( $this, 'registrar_script' ) );
    }

    /**
     * Callback para la búsqueda AJAX.
     *
     * @wp-hook wp_ajax_t5_ajax_busqueda
     * @wp-hook wp_ajax_nopriv_t5_ajax_busqueda
     * @return void
     */
    public function buscar()
    {
        $args  = array ( 's' => $_POST['termino_busqueda'] );
        $args  = apply_filters( 't5_ajax_busqueda_args', $args );
        $posts = get_posts( $args );
        if ( $posts )
        {
            $this->mostrar_resultados_busqueda( $posts );
        }
        else
        {
            print '<b>No se encontraron resultados</b>';
        }
        exit;
    }

    /**
     * Crear marcado desde $posts
     *
     * @param array $posts Array de objetos post
     * @return void
     */
    protected function mostrar_resultados_busqueda( $posts )
    {
        print '<ul class="t5-ajax-resultados-busqueda">';

        foreach ( $posts as $post )
        {
            printf(
                '<li><a href="%1$s">%2$s</a></li>',
                get_permalink( $post->ID ),
                esc_html( $post->post_title )
            );
        }
        print '</ul>';
    }

    /**
     * Registrar script y variables locales.
     *
     * @wp-hook wp_enqueue_scripts
     * @return void
     */
    public function registrar_script()
    {
        wp_enqueue_script(
            't5-ajax',
            #plugins_url( __FILE__ ) . '/busqueda.js',
            plugins_url( 'busqueda.js', __FILE__ ),
            array ( 'jquery' ),
            NULL,
            TRUE
        );

        wp_localize_script(
            't5-ajax',
            'T5Ajax',
            array(
                'ajaxurl' => admin_url( 'admin-ajax.php' ),
                'action'  => $this->action
            )
        );
    }
}

JavaScript `busqueda.js`

jQuery( function( $ ) {
    // campo de búsqueda
    var $s = $( '#s' );
    // el formulario de búsqueda
    var $sForm = $s.closest( 'form' );
    console.log( $sForm );
    $sForm.on( 'submit', function( event) {
        event.preventDefault();
        $.post(
            T5Ajax.ajaxurl,
            {
                action:     T5Ajax.action,
                termino_busqueda: $s.val()
            },
            function( response ) {
                // simplemente añade el resultado al formulario de búsqueda.
                $sForm.append( response );
            }
        );
    });
});

Restringiendo la búsqueda

add_filter( 't5_ajax_busqueda_args', 'restringir_busqueda_t5' );

function restringir_busqueda_t5( $args )
{
    $args['post_type'] = array ( 'post', 'fod_videos' );
    $args['category_name']       = 'slug-de-categoria';
    return $args;
}

En lugar de mi $this->mostrar_resultados_busqueda( $posts ); también puedes cargar una plantilla desde tu tema y usar el array $posts en un resultado más sofisticado. :)

Búsqueda AJAX en páginas de posts por tipo de post personalizado

PHP

JavaScript busqueda.js

Restringiendo la búsqueda

JavaScript `busqueda.js`