> ## Documentation Index
> Fetch the complete documentation index at: https://docs.topsort.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Topsort Proxy

> Aprende cómo usar la solución proxy de Topsort para aumentar los resultados de tu catálogo con productos promocionados

export const IntegrationsCard1AEs = () => {
  return <>
      <style>{`
        .integrations-card-1a-es {
          display: flex;
          flex-direction: column;
          background-color: #f0f2f4;
          border: 1px solid rgba(0, 0, 0, 0.08);
          border-radius: 12px;
          padding: 1.25rem 1.5rem;
          gap: 0.25rem;
          color: #25253b;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
          transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
          margin-top: 2rem;
        }

        .integrations-card-1a-es:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
          border-color: rgba(0, 0, 0, 0.12);
        }

        .dark .integrations-card-1a-es {
          background-color: #25253b;
          color: #f6f8fa;
          border-color: rgba(255, 255, 255, 0.08);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .dark .integrations-card-1a-es:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          border-color: rgba(255, 255, 255, 0.12);
        }

        .integrations-card-1a-es-avatar-row {
          display: flex;
          margin-left: 14px;
          flex-wrap: wrap;
        }

        .integrations-card-1a-es-avatar {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          border: 2px solid #f0f2f4;
          margin-left: -14px;
          object-fit: cover;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
          pointer-events: none;
          cursor: default;
        }

        .dark .integrations-card-1a-es-avatar {
          border-color: #25253b;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .integrations-card-1a-es h2 {
          margin: 0;
          line-height: 1.25;
          font-size: clamp(1.25rem, calc(0.875rem + 1.25vw), 1.75rem);
          font-weight: 700;
          letter-spacing: -0.025em;
          color: #111827;
        }

        .dark .integrations-card-1a-es h2 {
          color: #f9fafb;
        }

        .integrations-card-1a-es-subtitle {
          font-size: 0.9375rem;
          font-weight: 500;
          line-height: 1.5;
          color: #4b5563;
          margin: 0;
        }

        .dark .integrations-card-1a-es-subtitle {
          color: #d1d5db;
        }

        .integrations-card-1a-es p {
          margin: 0;
          line-height: 1.5;
          font-size: 0.875rem;
          color: #374151;
        }

        .dark .integrations-card-1a-es p {
          color: #d1d5db;
        }

        .integrations-card-1a-es a {
          color: #0500ff;
          text-decoration: none;
          font-weight: 500;
          transition: color 0.15s ease;
        }

        .integrations-card-1a-es a:hover {
          color: #0400cc;
        }

        .dark .integrations-card-1a-es a {
          color: #8280ff;
        }

        .dark .integrations-card-1a-es a:hover {
          color: #a19fff;
        }

        @media (max-width: 640px) {
          .integrations-card-1a-es-avatar {
            width: 38px;
            height: 38px;
            margin-left: -12px;
          }

          .integrations-card-1a-es-avatar-row {
            margin-left: 12px;
          }
        }

        @media (min-width: 1280px) {
          .integrations-card-1a-es p {
            font-size: 0.6875rem;
            line-height: 1.4;
            letter-spacing: -0.01em;
          }

          .integrations-card-1a-es h2 {
            font-size: clamp(1rem, calc(0.75rem + 1vw), 1.25rem);
          }

          .integrations-card-1a-es-subtitle {
            font-size: 0.75rem;
          }
        }
      `}</style>
      <div className="integrations-card-1a-es">
        <div className="integrations-card-1a-es-avatar-row">
          <img src="/images/integration-team/agustin.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
          <img src="/images/integration-team/amelia.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
          <img src="/images/integration-team/bernardita.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
          <img src="/images/integration-team/borumy.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
          <img src="/images/integration-team/felipe.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
          <img src="/images/integration-team/gui.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
          <img src="/images/integration-team/javiera.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
          <img src="/images/integration-team/linn.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
          <img src="/images/integration-team/marcio.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
          <img src="/images/integration-team/mateus.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
          <img src="/images/integration-team/max.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
          <img src="/images/integration-team/rodrigo.webp" alt="" loading="lazy" className="integrations-card-1a-es-avatar" />
        </div>

        <h2>¿Necesitas ayuda con tu integración de Topsort?</h2>

        <p className="integrations-card-1a-es-subtitle">
          Habla con nosotros, el equipo de ingeniería de integraciones.
        </p>

        <p>
          Contáctanos a través de <strong>tu canal de mensajería dedicado</strong> o en{" "}
          <a href="mailto:support@topsort.com">support@topsort.com</a>.
        </p>

        <p>
          Si aún no eres cliente,{" "}
          <a href="https://www.topsort.com/book-a-demo">agenda una demo</a> con nuestro
          equipo de ventas.
        </p>
      </div>
    </>;
};

El proxy es una capa intermedia entre el backend del marketplace y el servidor de resultados (el servidor de Algolia, por ejemplo). Actúa como un puente entre el marketplace, el motor de búsqueda y Topsort. Esto permite al proxy ingerir los ganadores de la subasta recuperados de Topsort en la respuesta proporcionada por el motor de búsqueda, y devolver la respuesta final fusionada al marketplace.

El proxy es compatible con la mayoría de los stacks tecnológicos, y ha sido probado con plataformas como VTEX, Algolia y Salesforce.

## Cómo Usar el Proxy

Para comenzar a usar el proxy, solo necesitas cambiar el hostname en tu llamada API existente, desde tu catálogo o motor de búsqueda a nuestro proxy. Por ejemplo, cambiar de:

```http theme={null}
https://api.site.com/catalog/query?taxonomy=clothes
```

a:

```http theme={null}
https://site.proxy.topsort.com/catalog/query?taxonomy=clothes
```

Y nosotros nos encargamos del resto. Enviamos la solicitud al motor de subasta de Topsort y al catálogo o motor de búsqueda. Si alguno de los productos devueltos por el catálogo o motor de búsqueda está promocionado, lo indicaremos en la respuesta fusionada que construiremos, la cual será devuelta al marketplace.

Actualmente, el proxy admite respuestas application/json. El soporte para XML y GraphQL está planificado.

## Cómo Se Agregan los Productos Promocionados

Considera la siguiente solicitud, que obtiene productos de la taxonomía 'office':

```http theme={null}
GET https://api.site.com/catalog/query?taxonomy=office
```

La respuesta del catálogo o servidor de búsqueda sin la integración del proxy de Topsort:

```json theme={null}
{
  "products": [
    { "id": "1", "name": "High-Speed Color Laser Printer" },
    { "id": "2", "name": "Adjustable Height Standing Desk" },
    { "id": "3", "name": "Ergonomic Swivel Office Chair" },
    { "id": "4", "name": "Wireless Keyboard and Mouse Combo" },
    { "id": "5", "name": "Magnetic Whiteboard with Marker Set" }
  ]
}
```

Después de fusionar productos promocionados en la respuesta:

```json theme={null}
{
  "products": [
    {
      "id": "3",
      "name": "Ergonomic Swivel Office Chair",
      "rank": 1,
      "resolvedBidId": "..."
    },
    {
      "id": "6",
      "name": "Multi-drawer Filing Cabinet",
      "rank": 2,
      "resolvedBidId": "..."
    },
    { "id": "1", "name": "High-Speed Color Laser Printer" },
    { "id": "2", "name": "Adjustable Height Standing Desk" },
    { "id": "4", "name": "Wireless Keyboard and Mouse Combo" }
  ],
  "topsort": {
    "winners": [
      { "rank": 1, "type": "product", "id": "3", "resolvedBidId": "..." },
      { "rank": 2, "type": "product", "id": "6", "resolvedBidId": "..." }
    ]
  }
}
```

## Entendiendo los Nuevos Campos

* **rank**: La posición del producto promocionado en la subasta.
* **resolvedBidId**: Un ID único usado para rastrear el producto en analytics.

Un nuevo objeto llamado **topsort** se agrega al nivel raíz solo cuando se incluyen productos promocionados.

## Cómo Rastrear Eventos

Si usas la biblioteca analytics.js de Topsort o Events API, usa los campos product id y resolvedBidId para rastrear las interacciones del usuario:

```html theme={null}
<div class="product" data-ts-product="3" data-ts-resolved-bid="resolvedBidId">
  ...
</div>
```

## Características del Proxy

* **Caché de Respuestas**: Reduce la latencia al almacenar en caché respuestas exitosas del catálogo o motor de búsqueda.
* **Modo Staging**: Permite probar antes de poner en vivo.
* **Soporte de Sincronización de Catálogo**: Envía información para mantener el catálogo de Topsort actualizado.
* **Logging Integrado**: Recopila datos sobre productos, subastas y rendimiento.

<IntegrationsCard1AEs />
