WooCommerce es uno de los plugins de WordPress más populares para crear aplicaciones de comercio electrónico. Además de utilizar WooCommerce en una aplicación tradicional de WordPress, puedes utilizarlo como una solución headless.

Este artículo te enseña a crear una aplicación WordPress headless con React desplegada en Kinsta.

Introducción a WooCommerce headless

El término «ecommerce headless» significa la separación del backend (cabeza) del frontend (cuerpo) de una aplicación de comercio electrónico. La arquitectura headless pasa peticiones entre las capas de presentación (frontend) y las capas de aplicación (backend) de una solución de comercio electrónico a través de APIs.

Las APIs definen las interacciones entre los intermediarios, lo que permite a las empresas cambiar las capas de presentación sin alterar la funcionalidad de las capas de aplicación y actualizar, editar o añadir productos a varias capas de la aplicación.

En una aplicación WooCommerce headless, la API de WooCommerce es un intermediario, que proporciona comunicación entre el frontend y el backend. Además de las ventajas mencionadas anteriormente, esto permite un desarrollo frontend flexible y escalable, lo que te permite centrarte en la creación de interfaces de usuario atractivas y dinámicas con stacks tecnológicos modernos como React o Vue.

Además, el uso de WooCommerce headless garantiza el futuro de la infraestructura de comercio electrónico, ya que te ayuda a adaptarte a la evolución de las necesidades de los clientes y a los avances tecnológicos. Puedes actualizar sin esfuerzo los componentes del frontend al tiempo que garantizas la estabilidad y fiabilidad de la plataforma WooCommerce del backend.

Ilustración de un CMS tradicional y una aplicación WooCommerce backend separada de su frontend comunicándose a través de una API
Aplicación de comercio electrónico tradicional y una aplicación WooCommerce headless.

Este enfoque moderno ofrece numerosas ventajas en comparación con las configuraciones tradicionales de comercio electrónico de WordPress.

Ahora que ya sabes qué es una aplicación WooCommerce headless y cuáles son sus ventajas, es hora de que crees una por ti mismo. Utilizando WordPress, React y el plugin WooCommerce, crearás una aplicación de comercio electrónico y la desplegarás en Kinsta.

Requisitos previos

Antes de empezar, asegúrate de que tienes lo siguiente:

Ventajas de WooCommerce headless

Cuando eliges la ruta headless para tus aplicaciones WooCommerce, desbloqueas una serie de beneficios, especialmente la flexibilidad de tener un backend que soporte varios frontends para tu aplicación.

Aquí tienes otras ventajas de WooCommerce headless:

  • Personalización mejorada — Puedes construir tu aplicación WooCommerce como quieras utilizando cualquier framework web.
  • Rendimiento mejorado del sitio — Puedes aprovechar frameworks rápidos como React y Vue para aumentar significativamente el rendimiento de tu sitio.
  • Beneficios SEO — Tienes más control y flexibilidad sobre las estrategias SEO para alcanzar los objetivos de tu negocio.
  • Mejor escalabilidad — Tu sitio puede escalarse de forma más eficiente, garantizando un rendimiento sin problemas incluso durante periodos de mucho tráfico.
  • Capacidad para crear experiencias únicas para los clientes — Te liberas de las limitaciones de las plantillas tradicionales. Puedes crear experiencias innovadoras y personalizadas para tus clientes.

Configurar un sitio WooCommerce headless

Aquí tienes una guía paso a paso para configurar un sitio WooCommerce:

  1. Accede a tu panel MyKinsta
  2. Ve a Añadir Servicio > Sitio WordPress.
  3. Selecciona la opción Instalar WordPress.
  4. En la página Añadir nuevo sitio WordPress, rellena los campos necesarios para instalar WordPress.
  5. Marca la casilla Instalar WooCommerce antes de hacer clic en Continuar.
Añade un nuevo sitio de WordPress que muestre el título del sitio, el nombre de usuario del administrador, la contraseña del administrador, el correo electrónico del administrador y los campos de idioma. Debajo de los campos hay plugins opcionales como WooCommerce, Yoast SEO y Easy Digital Downloads. En la parte inferior de la página están los botones Atrás y Continuar
Instalar WordPress y el plugin WooCommerce.

Activar el plugin WooCommerce

  1. En tu panel de MyKinsta, haz clic en Dominios en la barra lateral.
  2. En la página Dominios, haz clic en Abrir Administración de WordPress.
  3. Accede a tu panel de administración de WordPress, navega hasta plugins, selecciona el plugin WooCommerce y actívalo.
Panel de administración de WordPress que muestra los plugins opcionales disponibles, incluido el plugin WooCommerce. Cada plugin tiene un botón Activar y Eliminar debajo de la opción
Activar el plugin WooCommerce.

Configurar WooCommerce para el funcionamiento headless

Para configurar WooCommerce para operaciones headless:

  1. Accede a tu panel de administración de WordPress. En la barra lateral, haz clic en WooCommerce > Configuración.
  2. En la página Configuración, haz clic en la pestaña Avanzado. A continuación, haz clic en API Rest.
  3. Ahora haz clic en Añadir clave.

    Página avanzada que muestra la opción API REST seleccionada y un botón Añadir clave a su lado
    Añadir la clave para la API REST.

  4. Haz clic en Crear una clave API. Dale una descripción a tu nueva API REST, establece el campo Permisos en Lectura/Escritura y haz clic en Generar clave API.

    Página de detalles de la clave para la API REST. Tiene los campos Descripción, Usuario y Permisos. Debajo de los campos hay un botón Generar clave API
    Generar la clave API de WooCommerce.

  5. Copia la clave y la clave secreta del cliente y guárdalos de forma segura para utilizarlos en la aplicación React.
  6. Por último, ajusta la estructura de los Enlaces Permanentes para garantizar que se devuelvan datos JSON al solicitar la API. En el panel de administración de WordPress, haz clic en Configuración > Enlaces permanentes y selecciona Nombre de la entrada.

Antes de continuar, añade algunos productos a tu tienda WooCommerce. Ve a la sección WooCommerce de tu panel de control de WordPress, haz clic en Productos y sigue las instrucciones para añadir productos. También puedes importar estos productos de ejemplo para tu tienda.

Con WordPress y WooCommerce configurados, estás listo para centrarte en el frontend de tu aplicación de comercio electrónico headless.

Configurar un proyecto React

A continuación te explicamos cómo configurar un proyecto React:

  1. En tu directorio preferido, utiliza los siguientes comandos para crear un proyecto React: 
    # Remember to replace <app-name> with your preferred name

# With npx
npx create-react-app <app-name> && cd <app-name>

# With yarn
yarn create react-app <app-name> && cd <app-name>
  2. Una vez creado tu proyecto, crea un archivo .env en la raíz de tu proyecto y añade lo siguiente: 
    REACT_APP_CONSUMER_KEY=your_Woocommerce_consumer_key
REACT_APP_CONSUMER_SECRET=your_Woocommerce_consumer_secret

    Sustitúyelo por tu clave y clave secreta de cliente de WooCommerce generados anteriormente.

  3. A continuación, utiliza el siguiente comando para instalar un paquete para gestionar rutas: 
    ## With npm
npm i react-router-dom

## With yarn
yarn add react-router-dom
  4. Por último, lanza el proyecto React utilizando el siguiente comando: 
    ## With npm
npm start

## With yarn
yarn start

Desarrolla el frontend de tu sitio WooCommerce headless

Una tienda de comercio electrónico de éxito muestra los productos y facilita las compras. Empieza por mostrar los productos disponibles en la tienda WooCommerce en el frontend. Esto implica hacer peticiones a la API de WooCommerce.

El endpoint para listar todos los productos es wp-json/wc/v3/products. Este endpoint debe añadirse a la URL del host. Añade esta variable a tu archivo .env para tu URL base, que es la URL del host anexada al endpoint products. Actualiza http://example.com con el dominio de tu sitio WooCommerce.

REACT_APP_BASE_URL=http://example.com/wp-json/wc/v3/products

Cuando realices solicitudes a la API, debes incluir tu clave de cliente y tu clave secreta de cliente en la URL. Cuando se combinan, la URL tiene este aspecto


https://kinstawoocommerce.kinsta.cloud/wp-json/wc/v3/products?consumer_key=your_consumer_key&consumer_secret=your_consumer_secret

Hagamos peticiones a la API en la aplicación React utilizando la API Fetch para obtener los productos de WooCommerce.

  1. En tu aplicación React, abre el archivo App.js en el directorio src y sustituye su contenido por el código que aparece a continuación: 
    import {Link} from 'react-router-dom';
import {useEffect, useState} from 'react';

function App() {
    const BASE_URL = process.env.REACT_APP_BASE_URL;
    const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
    const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;

    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchProducts = async () => {
            const response = await fetch(`${BASE_URL}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`);
            const data = await response.json();
            setProducts(data);
            setLoading(false);
        };

        fetchProducts();
    }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET]);

    return loading ? (
        <div className="loaderText">
            <h2>Just a moment. Fetching products...</h2>{' '}
        </div>
    ) : (
        <ul>
            {products ? (
                products.map((product) => (
                    <li key={product.id}>
                        <Link to={`/product/${product.id}`}>
                            <img src={product.images[0].src} alt="Product banner"/>
                            <h2>{product.name}</h2>
                            <p>Sale price: {product.sale_price}</p>
                            <strong>
                                {product.stock_status === 'instock'
                                    ? 'In stock'
                                    : 'Out of stock'}
                            </strong>
                            <button>Add to Cart</button>
                        </Link>
                    </li>
                ))
            ) : (
                <li>No products found</li>
            )}
        </ul>
    );
}

export default App;

    Este código obtiene una lista de productos del endpoint de la API de WooCommerce utilizando la API Fetch cuando se monta el componente (hookuseEffect ). La URL del endpoint se construye utilizando las variables de entorno establecidas anteriormente

    Una vez obtenidos los datos, actualiza el estado del componente (products) utilizando setProducts(response) y establece loading en false utilizando setLoading(false).

    Mientras se obtienen los datos, muestra un mensaje de carga. Una vez que se obtienen los datos y loading se establece en false, mapea a través del array products y muestra una lista de elementos de producto utilizando JavaScript XML (JSX). Cada elemento de producto se envuelve en un componente Link de react-router-dom, que genera un enlace a la página de detalles del producto individual basándose en su ID.

    Para cada producto se muestra el nombre, el precio, la descripción (renderizada utilizando dangerouslySetInnerHTML para inyectar contenido HTML), el estado de las existencias y un botón.

  2. En el directorio src, abre el archivo index.js y sustituye el código por el siguiente fragmento: 
    import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./index.css";
import App from "./App";


ReactDOM.render(
    <React.StrictMode>
        <div className="container">
            <header>
                <h1>Kinsta Store</h1>
            </header>
                <BrowserRouter>
                    <Routes>
                        <Route exact path="/" element={<App />} />
                    </Routes>
                </BrowserRouter>

        </div>
    </React.StrictMode>,
    document.getElementById("root")
);

    Éste muestra el componente App cuando se llama a la ruta / en el navegador.

  3. Ejecuta tu aplicación para ver los cambios. 
    ## With npm
npm start

## With yarn
yarn start

    La aplicación React muestra ahora una lista de productos de la tienda WooCommerce.

    Página web que muestra una lista de productos de ropa. Cada listado tiene un nombre, un precio y una descripción, y va seguido de un botón Añadir a la cesta
    Lista de productos de la tienda WooCommerce.

Crear páginas de productos dinámicas

Ahora, para mejorar la experiencia del usuario, crea páginas dinámicas de productos utilizando la API de WooCommerce. Esta API proporciona un endpoint para obtener datos sobre un único producto: wp-json/wc/v3/products/<id>. Para utilizar este endpoint para obtener y mostrar datos sobre un único producto en la tienda, sigue estos pasos:

  1. Crea un componente ProductDetail.js dentro del directorio src que obtenga y muestre datos sobre un único producto. Este componente obtiene y muestra información detallada sobre un único producto y funciona de forma similar al código del archivo App.js, con la diferencia de que obtiene los detalles de un único producto. 
    import {useState, useEffect} from 'react';
import {useParams} from 'react-router-dom';

function ProductDetail() {
    const BASE_URL = process.env.REACT_APP_BASE_URL;
    const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
    const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;

    const {id} = useParams();
    const [product, setProduct] = useState(null);

    useEffect(() => {
        const fetchSingleProductDetails = async () => {
            const response = await fetch(
                `${BASE_URL}/${id}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`
            );
            const data = await response.json();
            setProduct(data);
        };
        fetchSingleProductDetails();
    }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET, id]);

    if (!product) {
        return (
            <div className="loaderText">
                <h2>Fetching product details...</h2>
            </div>
        );
    }

    return (
        <div className="product-detail">
            <h2>{product.name}</h2>
            <h4>Original Price: {product.regular_price}</h4>
            <h4>Sale price: {product.sale_price}</h4>
            <img src={product.images[0].src} alt="Product banner"/>
            <strong>
                {product.stock_status === 'instock' ? 'In stock' : 'Out of stock'}
            </strong>
        </div>
    );
}

export default ProductDetail;
  2. Crea una nueva ruta en index.js y asígnale el componente ProductDetail. Este fragmento de código crea una nueva ruta en index.js y le asigna el componente ProductDetail. Esto garantiza que cuando los usuarios hagan clic en el enlace de un producto, sean dirigidos a la página del producto correspondiente. 
    // index.js
…
import ProductDetail from "./ProductDetail";

ReactDOM.render(
  <React.StrictMode>
	…
               <Router>
          <Routes>
            <Route exact path="/" element={<App />} />
		{/* the new route */}
            <Route path="/product/:id" element={<ProductDetail />} />
          </Routes>
        </Router>
    </div>
  </React.StrictMode>,
  document.getElementById("root")
);

    Con estas modificaciones, al hacer clic en cualquier producto de la aplicación se redirige a los usuarios a una página que muestra información detallada sobre ese producto concreto.

    Página web que muestra información detallada sobre un producto de ropa
    Información detallada sobre un producto de ropa.

Puedes acceder al código completo en este repositorio de GitHub.

Integrar funciones clave de WooCommerce en una configuración headless

Puedes partir de la base de listar productos en una aplicación WooCommerce headless integrando funciones esenciales como las siguientes:

  • Carritos de la compra — Gestiona los datos del carrito en el lado del cliente o utiliza almacenamiento local para permitir a los usuarios añadir, eliminar y actualizar artículos sin problemas.
  • Procesos de pago — diseña un proceso de pago optimizado con componentes React, recopila la información necesaria, valida la entrada del usuario y garantiza una experiencia de pago fluida.
  • Autenticación de usuarios — Implementa una autenticación segura mediante JSON Web Token (JWT) u Open Authorization 2.0 (OAuth2) para mejorar la experiencia del usuario con funciones de registro, inicio de sesión y restablecimiento de contraseña.
  • Procesamiento de pagos — utiliza una API de pasarela de pago segura, como Stripe o PayPal, para las transacciones y los reembolsos.
  • Gestión de pedidos — Gestiona pedidos y estados de forma eficiente con la API de WooCommerce. Proporciona funciones fáciles de usar para el historial de pedidos, el seguimiento, las devoluciones y los reembolsos, y automatiza los procesos mediante webhooks o arquitectura basada en eventos.

Despliega tu sitio WooCommerce en Kinsta

Una vez que hayas desarrollado tu sitio WooCommerce headless, desplegarlo en la plataforma de Alojamiento WordPress de Kinsta es muy sencillo.

Kinsta ofrece una serie de ventajas, como alto rendimiento, seguridad robusta y escalabilidad, lo que la convierte en la opción ideal para alojar tu sitio de comercio electrónico headless. Si ya tienes un sitio de WordPress que no está en Kinsta, puedes migrarlo a Kinsta fácilmente

Además, puedes desplegar tu aplicación React en el servicio de Alojamiento de Sitios Estáticos de Kinsta de forma gratuita — lo único que tienes que hacer es enviar tu código a tu proveedor Git preferido (Bitbucket, GitHub o GitLab).

Una vez que hayas enviado tu código, sigue estos pasos para desplegar tu sitio:

  1. Accede a tu panel de MyKinsta.
  2. Haz clic en Añadir servicio, luego en Sitio estático.
  3. Selecciona un proveedor Git y haz clic en Conectar proveedor git.
  4. Selecciona el repositorio y la rama que deseas desplegar. Los ajustes de construcción se detectan automáticamente.
  5. Asegúrate de añadir las variables de entorno necesarias de tu archivo .env.

    Página de variables de entorno con campos para pares clave y valor. Hay un botón Crear sitio en la parte inferior derecha
    Añadir variables de entorno.

  6. Por último, haz clic en Crear sitio para desplegar tu aplicación React.

¡Has desplegado con éxito tu aplicación WooCommerce headless!

Resumen

Este artículo ha explicado las numerosas ventajas y nuevas posibilidades para crear tiendas online dinámicas y de alto rendimiento mediante la creación de sitios WooCommerce headless.

Al desacoplar el frontend del backend, puedes personalizar tu sitio para ofrecer experiencias de compra más atractivas y personalizadas a los clientes que se benefician de un alto rendimiento, una seguridad robusta y escalabilidad.

Tanto si eres un desarrollador experimentado como si acabas de empezar, Kinsta te proporciona el soporte, las herramientas y otros recursos que necesitas para crear y gestionar soluciones de comercio electrónico innovadoras y exitosas. ¡Alójate en Kinsta hoy mismo para explorar las posibilidades del comercio electrónico headless!

¿Te entusiasman las infinitas posibilidades de WooCommerce headless para tu tienda online? Comparte tus ideas o preguntas en los comentarios a continuación.

Jeremy Holcombe Kinsta

Editor de Contenidos y Marketing en Kinsta, Desarrollador Web de WordPress y Redactor de Contenidos. Aparte de todo lo relacionado con WordPress, me gusta la playa, el golf y el cine. También tengo problemas con la gente alta ;).