Saltar al contenido principal

Componentes que utilizan Typesense

TypesenseRecommender​

El componente TypesenseRecommender se encuentra en src/components/recommenders-carousel/typesense-recommender.tsx.

import React from "react";
import RecommendersCarousel from "@components/recommenders-carousel/index";

type TypesenseRecommenderProps = {
  title: string,
} & React.HTMLAttributes<HTMLDivElement>;

const TypesenseRecommender = (props: TypesenseRecommenderProps) => {
  const { title = '' } = props;
  return <RecommendersCarousel items={[]} title={title} />
}

export default TypesenseRecommender;

Este componente envuelve el componente RecommendersCarousel para mostrar recomendaciones basadas en Typesense.

Implementación en páginas​

Página de producto​

En pages/p/[...sku].js y pages/pla/[sku].js, se importan las utilidades de Typesense, para obtener información del producto actual y sus variaciones

import { IndexName, getNewSearchClient, categoryFields} from "src/utils/typesense";

Página de categoría​

En pages/c/[...slug].tsx y pages/category/[...slug].tsx, se importa el cliente de búsqueda de Typesense, para utilizar en los componentes de Algolia (con el typesense instantsearch adapter)

import {getNewSearchClient} from "@/utils/typesense"

Flujo de uso​

  1. Se crea un cliente de búsqueda con getNewSearchClient()
  2. Se utilizan los métodos del TypesenseService para realizar búsquedas
  3. Los resultados se pasan a componentes como RecommendersCarousel para mostrarlos

Ejemplo de uso​

// Ejemplo de uso del servicio TypesenseService
const bestSellers = await TypesenseService.getBestSellers();

// Ejemplo de creación de un cliente de búsqueda
const searchClient = getNewSearchClient('unique-id', true, {
  query_by: "name,sku,categories"
});

// Ejemplo de búsqueda por SKU
const product = await TypesenseService.searchBySku({
  sku: "11_1",
  attributesToRetrieve: "name,price,image,stock"
});

Consideraciones de rendimiento​

  • Typesense implementa caché de resultados por 5 segundos (cacheSearchResultsForSeconds: 1 * 5)
  • Se utiliza muestreo de facets para mejorar el rendimiento (facet_sample_percent: 15)
    • Mientras más pequeño sea el número, menos facets pueden listarse, si el catálogo a mostrar en el cliente tiene muchos, se debe jugar con este parámetro
  • Los clientes se almacenan en caché para reutilizarlos