Filtro de Productos con PHP y JavaScript en WordPress

¿Cómo crear un filtro de productos en una página principal?

Crear un filtro de productos es una habilidad esencial para cualquier desarrollador que busca mejorar la funcionalidad y la experiencia del usuario en un sitio web. En esta guía, aprenderás cómo incorporar un filtro de categorías en una página de productos usando HTML, PHP y JavaScript.

¿Cómo se estructura el HTML para el filtro de categorías?

El primer paso en la construcción del filtro de productos es entender la estructura HTML adecuada. Incluirás un elemento <select> para que los usuarios escojan la categoría que desean filtrar.

<!-- Insertar dentro de un contenedor adecuado -->
<div class="col">
    <select id="categoriaProductos" class="form-control">
        <option value="">Todas las categorías</option>
        <!-- Las opciones serán generadas dinámicamente -->
    </select>
</div>

¿Cómo cargar dinámicamente las categorías con PHP?

Para cargar las categorías de productos, utilizarás PHP para obtener los términos de una taxonomía específica. Usarás el método get_terms() que te permitirá traer sólo las categorías que tienen productos asociados.

<?php
    // Obtener términos de la taxonomía 'categoria_productos'
    $terms = get_terms('categoria_productos', array(
        'hide_empty' => true
    ));
    
    // Recorrer y mostrar cada término
    foreach($terms as $term) {
        echo '<option value="'.$term->slug.'">'.$term->name.'</option>';
    }
?>

¿Cómo conectar el filtro a JavaScript para registrar cambios?

Una vez que tengas tu selector cargado con las categorías, el siguiente paso es hacer que tu aplicación responda a los cambios que un usuario realice en este selector. Esto se logra mediante JavaScript para escuchar eventos de cambio en el <select>.

jQuery(document).ready(function($) {
    // Cuando cambia el valor del selector de categoría
    $('#categoriaProductos').on('change', function() {
        // Ejecuta el filtro en el cambio de selección
        console.log('Categoría seleccionada: ', $(this).val());
        
        // Aquí se establecería la lógica para manejar la nueva categoría seleccionada
    });
});

¿Cómo configurar Ajax para el filtro de categorías?

Para que tu filtro de categorías sea completamente funcional y realice cambios mediante Ajax, es necesario que configures una petición Ajax. Esto implica enviar datos al servidor y recibir una respuesta sin necesidad de recargar la página.

function realizarFiltro() {
    var categoriaSeleccionada = $('#categoriaProductos').val();
    
    // Realizar la petición Ajax
    $.ajax({
        url: ajaxurl, // Será el enlace al archivo handler de Ajax en PHP
        type: 'POST',
        data: {
            action: 'filtrar_productos', // Acción definida para la llamada
            categoria: categoriaSeleccionada
        },
        success: function(response) {
            // Manejar la respuesta obtenida
            $('#contenedor-productos').html(response);
        }
    });
}

¿Cómo enlazar el backend con Ajax para completar el filtro?

Finalmente, en el archivo PHP, manejas la llamada Ajax utilizando el hook wp_ajax, escuchando la acción que configuraste en tu función JavaScript.

// Función que retornará los productos filtrados
function filtrar_productos_callback() {
    $categoria = $_POST['categoria'];
    
    // Consultar productos por la taxonomía de la categoría
    $args = array(
        'post_type' => 'producto',
        'tax_query' => array(
            array(
                'taxonomy' => 'categoria_productos',
                'field' => 'slug',
                'terms' => $categoria,
                
            ),
        ),
    );
    $query = new WP_Query($args);

    if($query->have_posts()) {
        while($query->have_posts()) {
            $query->the_post();
            // Formato de salida de cada producto
        }
    } else {
        echo 'No hay productos en esta categoría';
    }
    
    wp_die(); // Terminar ejecución
}

add_action('wp_ajax_filtrar_productos', 'filtrar_productos_callback');
add_action('wp_ajax_nopriv_filtrar_productos', 'filtrar_productos_callback');

Este enfoque te ayudará a agregar funcionalidad dinámica a tu sitio web, mejorando la experiencia de usuario al permitirles filtrar productos sin tener que recargar la página. ¡Sigue adelante y mejora tu sitio web con estas técnicas!