Conexión con API REST usando JavaScript en WordPress

¿Cómo conectar un formulario con una API en JavaScript?

Para interactuar de manera efectiva con una API, es esencial establecer una conexión correctamente desde el lado del cliente. Este proceso puede parecer desafiante al principio, pero con una estructura bien definida, puedes lograrlo sin problemas. A continuación, te explicamos cómo conectar un formulario web con una API usando JavaScript.

¿Cómo estructuramos nuestros archivos y carpetas?

Antes de escribir el código JavaScript necesario, es crucial organizar adecuadamente los archivos y carpetas del proyecto. Este paso preliminar facilitará las referencias y el trabajo en equipo.

1. Crear una carpeta llamada assets dentro de tu directorio public.
2. Generar una subcarpeta llamada js donde se almacenará el archivo registro.js.
3. Dentro de registro.js, se escribirá el código que manejará la interacción entre el formulario y la API.

¿Cómo inicializamos y configuramos nuestro JavaScript?

Una vez que tengas configurada la estructura de carpetas, puedes comenzar a escribir el código en registro.js. Inicia escuchando eventos y manipula el DOM adecuadamente:

document.addEventListener('DOMContentLoaded', () => {
    const form = document.querySelector('#singin'); // Selector del formulario
    form.addEventListener('submit', (e) => {
        e.preventDefault(); // Prevenir la acción por defecto del formulario
        let datos = new FormData(form); // Capturar los datos del formulario
        let datosParse = new URLSearchParams(datos); // Formato que WordPress entiende

        fetch('http://yoursite.com/wp-json/registro', {
            method: 'POST',
            body: datosParse
        })
        .then(res => res.json())
        .then(json => console.log(json))
        .catch(error => console.log(`Hay un error: ${error}`));
    });
});

¿Cómo registramos y cargamos el script en WordPress?

Es vital que el archivo JavaScript se cargue solo cuando se necesite, en este caso, cuando el shortcode específico de WordPress que lo requiere está presente:

1. Registrar el script en WordPress: Utiliza wp_register_script para asegurarte de que está disponible sin encolarlo inmediatamente.

   wp_register_script('plzRegistro', plugins_url('assets/js/registro.js', __FILE__));

2. Encolar el script solo cuando sea necesario: Es recomendable que esto ocurra cuando se renderiza el shortcode relacionado.

   function enqueue_script() {
       wp_enqueue_script('plzRegistro');
   }

¿Cómo verificamos que el script se ha cargado correctamente?

Siempre es buena práctica asegurarse de que los scripts se están ejecutando como se espera. Agrega una simple línea de console.log para ver la ejecución en las herramientas de desarrollo del navegador.

console.log('registro cargado');

Actualizando tu página y revisando la consola de desarrolladores, deberías ver el mensaje de que el script se cargó exitosamente.

¿Qué sería el siguiente paso?

Ahora que tienes el formulario conectado a la API, el siguiente paso natural sería desarrollar la lógica en WordPress para procesar los datos al crear un nuevo usuario. Esto involucrará trabajar directamente con las acciones y filtros de WordPress para manejar el backend.

¡Sigue así! Estás en el camino correcto hacia la creación de aplicaciones web dinámicas y funcionales. A medida que continúas aprendiendo y practicando, tus habilidades solo continuarán aumentando.