Saltar al contenido principal

Página de Categoría

La página de categoría se encuentra en /pages/c/[...slug].tsx y es responsable de mostrar los productos de una categoría específica. Esta página utiliza Typesense como motor de búsqueda pero implementa los componentes de Algolia para la interfaz de usuario.

1. Prebuild script​

El archivo /lib/pre-build/category-prebuild.ts se encarga de generar un archivo JSON con los slugs de las categorías habilitadas durante el proceso de build

Este script:

  1. Consulta la base de datos Directus para obtener todas las categorías que tienen la propiedad headless establecida como true
  2. Extrae los slugs de estas categorías
  3. Guarda la lista de slugs en un archivo JSON en _content_cache/category-slugs-enabled.json

2. Ejecución del prebuild​

El script se ejecuta durante el proceso de build a través del archivo /lib/prebuild.ts, que carga y ejecuta todos los scripts de prebuild:

3. Middleware para verificación de acceso​

En el archivo middleware.ts, se implementa la lógica para verificar si una URL de categoría está habilitada:

Este middleware:

  1. Importa la lista de slugs habilitados desde _content_cache/category-slugs-enabled.json
  2. Verifica si la URL solicitada está en esa lista
  3. Si está habilitada, reescribe la URL a /category/{slug} para que Next.js la procese
  4. Si no está habilitada, permite que la solicitud continue, lo que probablemente resultará en una página 404 o en una redirección a Magento

Flujo completo​

  1. Durante el build, se ejecuta el script de prebuild que consulta las categorías habilitadas
  2. Se genera un archivo JSON con los slugs habilitados
  3. Cuando un usuario solicita una URL con formato de categoría (terminada en .html), el middleware verifica si está en la lista de habilitadas
  4. Si está habilitada, la solicitud se reescribe y se procesa por la página /pages/c/[...slug].tsx
  5. Esta página realiza una consulta a DatoCMS/Directus para obtener los datos completos de la categoría
  6. Se configura el cliente de Typesense y se renderiza la interfaz de usuario con los componentes InstantSearch

Propiedad 'headless' en categorías​

La decisión de si una categoría debe mostrarse a través de la aplicación headless se basa en la propiedad headless en el modelo de datos:

  • Si headless es true, la categoría se incluirá en la lista de slugs habilitados
  • Si headless es false o no está definida, la categoría no se incluirá y las solicitudes a esa URL continuarán al backend de Magento

Esta propiedad permite una migración gradual de categorías desde Magento a la aplicación headless.

Flujo de renderizado​

Una vez que se ha determinado que una categoría está habilitada:

  1. getStaticPaths: Define qué rutas se pre-renderizan durante el build
  2. getStaticProps: Obtiene los datos de la categoría desde Directus
  3. El componente CategoryPage renderiza la interfaz utilizando:
    • InstantSearch para la estructura de búsqueda
    • Configure para los parámetros de búsqueda
    • CategoryView para el layout visual
    • Typesense como motor de búsqueda subyacente

Estructura de la URL​

La página utiliza rutas dinámicas de Next.js con el patrón [...slug], lo que permite capturar cualquier número de segmentos de ruta después de /c/. Por ejemplo:

  • /c/muebles
  • /c/muebles/sala
  • /c/muebles/sala/sofas

Integración con Directus​

La página utiliza el tipo CategoryBySlugQuery para tipar los datos recibidos desde Directus, que incluye:

  • Información básica de la categoría (nombre, slug)
  • Metadatos (descripción, consulta de Algolia)
  • Configuración de filtros
  • Banners
  • Configuración específica para Typesense

Configuración de Typesense​

Configura un cliente de búsqueda utilizando:

typescript import {getNewSearchClient} from "@/utils/typesense"
// En el componente const searchClient = getNewSearchClient('category-page', category.distinctResult)

Estructura de filtros​

Los filtros se configuran según el modelo de Directus:

  1. Filtros individuales: Definidos en el campo filters del modelo de categoría.
  2. Grupos de filtros: Definidos en filtersGroups para agrupar filtros relacionados.

Cada filtro incluye:

  • algoliaFieldName: El nombre del campo en el índice de Algolia
  • typesenseFieldName: El nombre del campo en el índice de Typesense
  • displayName: El nombre que se muestra al usuario
  • refinementType: El tipo de refinamiento (lista, rango, etc.)

Componentes principales​

La página utiliza varios componentes de Algolia InstantSearch adaptados para funcionar con Typesense:

  1. InstantSearch: Componente principal que configura el contexto de búsqueda.
  2. Configure: Configura los parámetros de búsqueda como hits por página y la consulta.
  3. RefinementList: Muestra listas de valores para los filtros.
  4. RangeInput: Muestra controles de rango para filtros numéricos.
  5. Hits: Muestra los resultados de la búsqueda.
  6. Pagination: Muestra los controles de paginación.

Personalización de la búsqueda​

La página permite personalizar la búsqueda mediante varios parámetros:

  1. algoliaQuery: Consulta personalizada para la categoría.
  2. hitsPerPage: Número de productos por página.
  3. customSort: Orden personalizado para los resultados.
  4. filters: Filtros predefinidos para la categoría.

La página implementa navegación entre categorías mediante:

subCategoryMenuLink: Enlaces rápidos a subcategorías.

Manejo de SEO​

La página implementa configuración SEO utilizando metadatos del modelo de Directus:

  1. metaDescription: Descripción para los metadatos.
  2. categoryName: Nombre para el título de la página.
  3. customImage: Imagen personalizada en el listado de productos

Funcionamiento de URL y rutas​

Las rutas de categoría siguen el formato /c/[...slug] o /category/[slug] donde slug puede ser uno o varios segmentos. El middleware procesa estas rutas y las reescribe internamente a /[slug] si la categoría está habilitada.

Optimización de rendimiento​

  1. Caché de resultados: Typesense implementa caché de resultados por 5 segundos.
  2. Muestreo de facets: Se utiliza para mejorar el rendimiento con conjuntos de datos grandes.
  3. Paginación: Implementa paginación para no cargar todos los resultados a la vez.
  4. Limitación de campos: Solo recupera los campos necesarios para mejorar el rendimiento.