🎨 Sysprovider Code
Sysprovider LogoWiki
🇪🇸Hosting español para ecommerce

PrestaShop Headless: Integración con React y API REST

Actualizado el 10 de enero de 2026

Imagina un eCommerce donde el frontend no está atado al backend. Donde puedes elegir la tecnología que mejor se adapte a tu equipo, ofrecer experiencias ultra-rápidas y escalar sin tocar el core de PrestaShop. Eso es PrestaShop headless. En este artículo, exploraremos a fondo cómo integrar un frontend en React con la API REST de PrestaShop, analizando las ventajas, los desafíos y el camino práctico para lograrlo.

¿Qué es la Arquitectura Headless y por qué PrestaShop?

La arquitectura headless separa el frontend (la capa de presentación) del backend (la lógica de negocio y gestión de datos). En lugar de que el frontend dependa del sistema de plantillas nativo de PrestaShop (Smarty), todo se comunica a través de APIs.

Ventajas clave para un SysAdmin / Desarrollador

  • Rendimiento extremo: El frontend en React (o cualquier SPA) se renderiza en el cliente o se sirve estáticamente (SSG), reduciendo drásticamente la carga del servidor de PrestaShop.
  • Flexibilidad tecnológica: Puedes usar React, Vue.js, Angular o incluso Next.js para el frontend, mientras PrestaShop sigue siendo el CMS y motor de negocio.
  • Escalabilidad independiente: Puedes escalar el frontend en un CDN y el backend en servidores dedicados o cloud, optimizando costes.
  • Experiencia de usuario (UX) mejorada: Navegación sin recargas, transiciones suaves y lógica de estado en el cliente.

[INFO] PrestaShop no nació headless, pero su API REST (y con módulos, GraphQL) permite desacoplarlo completamente. Es una evolución lógica para tiendas que buscan rendimiento y modernidad.

Componentes Clave de una Integración Headless con React

Antes de escribir código, necesitas entender los bloques que formarán tu ecosistema:

  1. Backend (PrestaShop): Gestiona productos, categorías, pedidos, clientes y precios. Expone una API REST.
  2. Frontend (React): Aplicación SPA que consume la API. Se encarga de la interfaz de usuario, el carrito, el checkout y la lógica de estado.
  3. API Gateway / Middleware (Opcional pero recomendado): Capa intermedia que puede cachear respuestas, transformar datos o gestionar autenticación de manera más segura. Ej: Node.js + Express, Next.js API Routes.
  4. Servicio de Autenticación: Para el frontend, necesitas manejar tokens (JWT) para sesiones de cliente y administración.

El Rol de la API REST en PrestaShop

PrestaShop 1.7+ incluye una API REST nativa (Webservice). Aunque no es tan moderna como la de Shopify, es funcional. Los endpoints clave son:

  • /api/products
  • /api/categories
  • /api/customers
  • /api/cart (requiere módulos o endpoints personalizados)
  • /api/orders

[WARNING] La API nativa de PrestaShop no expone endpoints para el carrito de compras de forma estándar. Necesitarás módulos como "PrestaShop Headless API" (de pago) o construir tus propios controladores personalizados para manejar el carrito, el checkout y la pasarela de pago.

Integración Práctica: React + API REST de PrestaShop

Vamos a construir un ejemplo básico. Supondremos que tienes una tienda PrestaShop con la API habilitada y un módulo que expone endpoints de carrito.

1. Configuración del Proyecto React

Crea una app con Vite (más rápido que CRA):

npm create vite@latest prestashop-headless-react -- --template react
cd prestashop-headless-react
npm install axios react-router-dom

2. Configuración de la API Rest de PrestaShop

En PrestaShop, activa el Webservice desde Parámetros Avanzados > Webservice. Genera una clave de API con acceso a los recursos que necesites (productos, categorías, clientes, etc.).

[TIP] Para entornos de desarrollo, puedes deshabilitar la autenticación por clave temporalmente, pero nunca en producción. Usa siempre HTTPS y tokens seguros.

3. Creación de un Servicio API en React

Crea un archivo src/services/api.js:

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://tu-tienda.com/api',
  auth: {
    username: 'TU_CLAVE_API',
    password: '', // La API de PrestaShop usa autenticación básica con usuario y contraseña vacía
  },
  headers: {
    'Content-Type': 'application/json',
    'Output-Format': 'JSON', // Importante para obtener JSON
  },
});

// Interceptor para manejar errores
apiClient.interceptors.response.use(
  response => response,
  error => {
    console.error('API Error:', error.response?.data || error.message);
    return Promise.reject(error);
  }
);

export default apiClient;

4. Consumiendo Productos con React

Creamos un hook personalizado para obtener productos:

// src/hooks/useProducts.js
import { useState, useEffect } from 'react';
import apiClient from '../services/api';

export const useProducts = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await apiClient.get('/products', {
          params: {
            display: 'full', // Obtiene todos los campos
            limit: 50,
          },
        });
        // La respuesta de PrestaShop viene en un objeto con los productos en 'products'
        setProducts(response.data.products || []);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchProducts();
  }, []);

  return { products, loading, error };
};

Ahora en tu componente ProductList.jsx:

import React from 'react';
import { useProducts } from '../hooks/useProducts';

const ProductList = () => {
  const { products, loading, error } = useProducts();

  if (loading) return <div className="spinner">Cargando productos...</div>;
  if (error) return <div className="error">Error al cargar productos: {error.message}</div>;

  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(product => (
        <div key={product.id} className="product-card">
          
          <h3>{product.name}</h3>
          <p className="price">{product.price} €</p>
          <button onClick={() => addToCart(product.id)}>Añadir al carrito</button>
        </div>
      ))}
    </div>
  );
};

export default ProductList;

5. Manejo del Carrito y Autenticación

El carrito es el punto más delicado. Necesitas un módulo que exponga endpoints como:

  • POST /api/cart (crear carrito)
  • POST /api/cart/{id}/product (añadir producto)
  • GET /api/cart/{id} (obtener estado)

Además, para la autenticación de clientes, puedes usar JWT. Al hacer login desde React, envías las credenciales a un endpoint personalizado de PrestaShop, que devuelve un token. Ese token se envía en cada petición posterior.

// Ejemplo de función de login
const login = async (email, password) => {
  const response = await apiClient.post('/customers/login', { email, password });
  localStorage.setItem('authToken', response.data.token);
  apiClient.defaults.headers.common['Authorization'] = `Bearer ${response.data.token}`;
};

GraphQL como Alternativa a la API REST

La API REST de PrestaShop puede ser verbosa y devolver datos que no necesitas. Aquí entra GraphQL.

Ventajas de GraphQL en un entorno Headless

  • Consultas precisas: Pides exactamente los campos que necesitas. Ej: solo nombre, precio e imagen de un producto.
  • Menos sobrecarga de red: Ideal para conexiones móviles o lentas.
  • Documentación viva: GraphQL se autodocumenta (GraphiQL).

Para implementar GraphQL en PrestaShop, necesitas un módulo como PrestaShop GraphQL (de pago) o construir un gateway GraphQL que consuma la API REST y la exponga como GraphQL (usando Apollo Server o Hasura).

[INFO] Si tu equipo ya usa React y Apollo Client, GraphQL se integra de forma natural. La curva de aprendizaje es baja si ya conoces REST.

Ejemplo de consulta GraphQL para productos

query {
  products(first: 10) {
    edges {
      node {
        id
        name
        price
        coverImage {
          url
        }
      }
    }
  }
}

Y en React, con Apollo Client:

import { useQuery, gql } from '@apollo/client';

const GET_PRODUCTS = gql`
  query GetProducts {
    products(first: 10) {
      edges {
        node {
          id
          name
          price
          coverImage { url }
        }
      }
    }
  }
`;

function Products() {
  const { loading, error, data } = useQuery(GET_PRODUCTS);
  // Renderizado...
}

Desafíos Técnicos y Soluciones en la Arquitectura Headless

Migrar a headless no es plug-and-play. Aquí los problemas más comunes y cómo resolverlos:

1. Gestión de Sesiones y Carrito

  • Problema: La API REST de PrestaShop no maneja sesiones de navegador. Cada petición es independiente.
  • Solución: Implementa un carrito persistente en el frontend (localStorage) y sincronízalo con el backend mediante un módulo personalizado. Usa un token de carrito (cart token) que se envía en cada petición.

2. SEO y Motores de Búsqueda

  • Problema: Las SPAs (React) no son indexables por defecto. Los crawlers no ejecutan JavaScript.
  • Solución: Usa Server-Side Rendering (SSR) con Next.js o Static Site Generation (SSG). PrestaShop headless con Next.js es una combinación ganadora: renderiza páginas en el servidor y las sirve como HTML estático.

3. Pasarelas de Pago

  • Problema: Muchos módulos de pago esperan un formulario enviado desde el servidor de PrestaShop.
  • Solución: Usa pasarelas con SDKs JavaScript (Stripe, PayPal) que permiten tokenizar tarjetas desde el frontend. El backend solo confirma el pago.

4. Sincronización de Precios y Stock

  • Problema: Los datos pueden quedar desactualizados si no se gestiona bien el caché.
  • Solución: Implementa webhooks en PrestaShop que notifiquen al frontend cuando un producto cambie. Usa un sistema de colas (Redis, Bull) para invalidar cachés.

Herramientas y Módulos Recomendados

Para acelerar el desarrollo, considera estas herramientas:

  • Módulos Headless para PrestaShop:
    • PrestaShop Headless API (PrestaShop Addons): Añade endpoints para carrito, checkout y autenticación.
    • PrestaShop GraphQL (PrestaShop Addons): Expone GraphQL.
  • Frontend Frameworks:
    • Next.js (React): SSR, SSG, API Routes.
    • Gatsby (React): SSG, ideal para catálogos.
  • Middleware/API Gateway:
    • Apollo Server (Node.js): Para construir un gateway GraphQL.
    • Hasura: Conecta PrestaShop a una base de datos Postgres y expone GraphQL en tiempo real.
  • CDN y Caché:
    • Vercel / Netlify: Para desplegar el frontend con caché global.
    • Cloudflare Workers: Para cachear respuestas de la API.

Pasos para Implementar una Tienda Headless con PrestaShop y React

  1. Audita tu tienda actual: ¿Qué módulos usas? ¿Alguno depende del frontend de Smarty? Identifica los bloqueantes.
  2. Prepara el backend: Activa la API REST, instala módulos headless, configura CORS.
  3. Elige el frontend: Si priorizas SEO, usa Next.js. Si es una app interna, React puro vale.
  4. Construye la API Gateway (opcional): Un servicio Node.js que consuma la API de PrestaShop y la transforme para tu frontend.
  5. Desarrolla los componentes clave: Listado de productos, detalle, carrito, checkout.
  6. Implementa la autenticación: Login, registro, recuperación de contraseña.
  7. Integra el pago: Usa Stripe Elements o similar.
  8. Pruebas de rendimiento: Mide el TTFB, First Paint, Time to Interactive. Optimiza.
  9. Despliegue: Frontend en Vercel/Netlify, backend en tu servidor o cloud.

[TIP] Empieza con un MVP: catálogo de productos visible, carrito funcional y un método de pago. Luego añade registro, búsqueda avanzada y paneles de administración.

Conclusión: ¿Merece la pena PrestaShop Headless?

La arquitectura headless con React y PrestaShop no es para todos. Si tu tienda es pequeña y el equipo es limitado, la sobrecarga inicial puede no compensar. Pero si buscas:

  • Rendimiento de primer nivel (carga en milisegundos).
  • Experiencia de usuario moderna (SPA, transiciones, PWA).
  • Escalabilidad sin tocar el backend.
  • Libertad tecnológica (elegir React, Vue o lo que quieras).

Entonces, invertir en PrestaShop headless es una decisión estratégica. La API REST (o GraphQL) te da el control, y React te da la velocidad. La combinación es potente, aunque requiere un buen plan de desarrollo y mantenimiento.

El futuro del eCommerce es modular y desacoplado. PrestaShop, con su ecosistema de módulos, puede ser el motor perfecto si sabes cómo sacarle partido. Ahora, manos a la obra.

¿Necesitas ayuda?Son dos de nuestros técnicos, Agustín y Mikel, y están disponibles para resolver cualquier problema.

Hablar con ellos ahora
Agustín y Mikel