Filtrado Dinámico de Productos en WordPress con PHP y JavaScript

Contenido del curso

Comprender las bases y el punto de partida

Crear Post Types y Archivos

Utilizar AJAX

La REST-API de WordPress

Utilizar Bloques

Deployment

Finalizar el Curso

29
Creación y Personalización de Sitios Web con WordPress
00:56 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0017:00

Filtrado Dinámico de Productos en WordPress con PHP y JavaScript

Curso Profesional de WordPress

Clase 15 de 29

Clase 15 / 29

Recursos

¿Cómo pasar atributos desde PHP a JavaScript en WordPress?

La conexión entre PHP y JavaScript es crucial para muchos desarrolladores de WordPress, ya que permite enviar datos del servidor al cliente de forma eficiente. En esta guía, aprenderás a pasar atributos desde PHP a JavaScript utilizando las funciones adecuadas para garantizar una interacción fluida en tu proyecto.

¿Qué función utilizamos para enviar datos de PHP a JavaScript?

En WordPress, utilizamos la función wp_localize_script() para enviar información a scripts JavaScript:

function mi_funcion_custom_scripts() {
    // ... Registro de estilos y scripts ...
    
    wp_localize_script(
        'handle-del-script', // Nombre del script registrado
        'nombreObjetoJS',    // Nombre del objeto JavaScript
        array(
            'propiedad' => 'valor'
        )
    );
}

Primer parámetro: El nombre del script JavaScript al que le estás adjuntando los datos.
Segundo parámetro: El nombre del objeto JavaScript que contendrá los datos.
Tercer parámetro: Un array con los datos que deseas pasar al script JavaScript.

¿Cómo definir y enviar datos con JSON?

Para definir la información que se enviará y procesarla en JavaScript, puedes utilizar el formato JSON:

Definición del objeto de datos:

let data = {
    accion: 'nombre_funcion_php',
    categoria: $('#miSelector').val()
};

Enviar el dato al servidor: La función $.ajax es útil en este contexto para gestionar peticiones asíncronas.

$.ajax({
    url: objetoGlobalJS.miURL,
    method: 'POST',
    data: data,
    beforeSend: function() {
        $('#idElemento').html('Cargando...');
    },
    success: function(response) {
        // Procesar la respuesta
    },
    error: function(error) {
        console.error(error);
    }
});

¿Cómo definir y registrar un endpoint en PHP?

Para recibir y procesar la solicitud Ajax en el servidor, define la función PHP y regístrala usando las acciones de WordPress:

function mi_funcion_php() {
    // Lógica del filtrado de productos o similar

    $resultado = array(); // Array con los resultados
    
    wp_send_json_success($resultado);
}

add_action('wp_ajax_nombre_funcion_php', 'mi_funcion_php');
add_action('wp_ajax_nopriv_nombre_funcion_php', 'mi_funcion_php');

Acción wp_ajax_: Registra el gancho para usuarios autenticados.
Acción wp_ajax_nopriv_: Registra el gancho para usuarios no autenticados.

¿Cómo procesar y mostrar los datos en JavaScript?

Una vez que tienes los datos de vuelta en JavaScript, como una respuesta JSON, crea la lógica para mostrar los datos en tu interfaz de usuario:

let html = '';
data.forEach(function(item) {
    html += `<div class="col-4 mb-3">
        <figure>
            <img src="${item.imagen}" alt="${item.titulo}" />
        </figure>
        <h4>${item.titulo}</h4>
        <a href="${item.link}" title="${item.titulo}">Ver Producto</a>
    </div>`;
});
$('#idContenedor').html(html);

¿Qué hacer en caso de errores en AJAX y cómo corregirlos?

Los errores pueden surgir por diversas razones, como la falta de parámetros. Para identificar y corregir estos errores:

Inspeccionar la consola: Verifica mensajes de error que pueden dar pistas sobre parámetros faltantes o errores de sintaxis.
Revisar las funciones PHP y AJAX: Asegúrate de que los datos se están enviando y recibiendo correctamente.

Con esta guía, ahora dispones de las herramientas necesarias para gestionar la interacción entre PHP y JavaScript en WordPress con confianza. A medida que profundices, descubrirás más funcionalidades y posibilidades, ¡continúa aprendiendo y explorando!

María Sierra

Hace 5 años

Completemos la función AJAX para darle vida a nuestro filtro

Para poder hacer cosas con AJAX en Wordpress usaremos algunas funciones y cosas en particular.

Para trabajar con AJAX, en el archivo de functions.php y en la misma función donde registramos nuestro CSS y JS, colocamos la siguiente función:

<?php

function template_styles() {
		// ...
		wp_localize_script( 'custom', 'pg', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    ) );
}

Creamos una función donde esté el código de PHP que recibe la función AJAX así:

<?php

add_action("wp_ajax_nopriv_pgFiltroProductos", "pgFiltroProductos");
add_action("wp_ajax_pgFiltroProductos", "pgFiltroProductos");
function pgFiltroProductos() {
    $args = array(
        'post_type' => 'producto',
        'posts_per_page' => -1,
        'order'     => 'ASC',
        'orderby' => 'title',
    );

    if ($_POST['categoria']) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'categorias-productos',
                'field' => 'slug',
                'terms' => $_POST['categoria']
            )
        );
    }

    $productos = new WP_Query($args);

    $return = array();
    if ($productos->have_posts( )) {
        while ($productos->have_posts()) {
            $productos->the_post();

            $return[] = array(
                'imagen' => get_the_post_thumbnail( get_the_id( ), 'large' ),
                'link'   => get_the_permalink( ),
                'titulo' => get_the_title( )
            );
        }
    }
    wp_send_json( $return );
}

Y código de JQuery es:

(function($) {
    console.log('Hola WordPress')
    $("select").change(function() {
        $.ajax({
            url: pg.ajaxurl,
            method: "POST",
            data: {
                "action": "pgFiltroProductos",
                "categoria": $(this).find(':selected').val()
            },
            beforeSend: function() {
                $("#resultados-productos").html("Cargando...")
            },
            success: function(data) {
                let html = ''
                data.forEach(item => {
                    html += `
                        <div class="col-4 my-3">
                            <figure>${item.imagen}</figure>
                            <h4 class="text-center my-2">
                                <a href="${item.link}">${item.titulo}</a>
                            </h5>
                        </div>
                    `
                })

                $("#resultados-productos").html(html)
            },
            error: function(error) {
                console.error(error)
            }
        })
    })
})(jQuery)

Comentarios (48)48 comentarios

MARCO ANTONIO ASPEITIA PEÑA

Hace 4 años

Renzo Rolando Manuel Reinoso Alcas

Raúl Gonzalo Martiarena Valdivia

Hace 6 años

Lucio Negrello

Profesor

Juan Sebastian Calderon

Kelvin Omar Silvestre Moises

Briam alejandro Prada rubio

Daniel da Silva Jarque

Giselle Desiree Boyer Jimenez

Marcelo Vinicio Chavarría Ugalde

Hace 3 años

Jorge Paiva

Erik Elyager

carlos castro

Antonio Javier Colmenarez Gonzalez

Gabriel Ortiz

ADRIANA BERNAL VILLEGAS

Jesús Navas

Marketing Desarrollo

Ruben Ariel

Julio Soto

Comprender las bases y el punto de partida

Gestión de Contenidos Avanzada en WordPress

Entornos de Desarrollo Personalizados con Warp y Flight Bill

Creación de Tienda Online en WordPress con Gutenberg

Crear Post Types y Archivos

Organización de Contenidos en WordPress: Taxonomías y Etiquetas

Creación de Archivos PHP en WordPress para Mostrar Categorías

Mejorando la Navegabilidad en Sitios Web con WordPress

Personalización de Post Types en WordPress

Diferenciar Interfaces de Productos y Novedades en WordPress

WordPress: Crear Menú de Productos Relacionados con Loop Personalizado

Registro de Taxonomías Personalizadas en WordPress

Personalización de Páginas en WordPress con Advanced Custom Fields

Utilizar AJAX

Configuración de Formularios y Correos en WordPress

Desarrollo de Funciones Ajax en WordPress con PHP y JavaScript

Filtro de Productos con PHP y JavaScript en WordPress

Filtrado Dinámico de Productos en WordPress con PHP y JavaScript

La REST-API de WordPress

Uso del API REST de WordPress para integración y gestión de contenido

Creación de Endpoints Personalizados en WordPress API

Integración de API de WordPress en la Página Principal

Utilizar Bloques

Creación y Uso de Bloques en el Editor Gutenberg de WordPress

Creación de Bloques Personalizados en WordPress con PHP y JavaScript

Creación de Bloques Editables en WordPress con React

Bloques Dinámicos en WordPress: Creación y Uso Avanzado

Uso de InspectorControls en Bloques de WordPress

Registro y Personalización de Bloques en WordPress con ACF

Creación de Bloque Nativo con Renderizado del Lado del Servidor (SSR)

Deployment

Migración de un Sitio WordPress de Local a Servidor Real

Optimización SEO e Indexación con Plugins para Sitios Web

Seguridad y Configuración de Wordfence en Sitios WordPress

Finalizar el Curso

Creación y Personalización de Sitios Web con WordPress

Filtrado Dinámico de Productos en WordPress con PHP y JavaScript