> ## 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.

# Proxy Topsort

> Aprenda como usar a solução de proxy do Topsort para aumentar os resultados do seu catálogo com produtos promovidos

export const IntegrationsCard1APt = () => {
  return <>
      <style>{`
        .integrations-card-1a-pt {
          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-pt:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
          border-color: rgba(0, 0, 0, 0.12);
        }

        .dark .integrations-card-1a-pt {
          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-pt:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          border-color: rgba(255, 255, 255, 0.12);
        }

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

        .integrations-card-1a-pt-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-pt-avatar {
          border-color: #25253b;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .integrations-card-1a-pt 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-pt h2 {
          color: #f9fafb;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

        <h2>Precisa de ajuda com sua integração Topsort?</h2>

        <p className="integrations-card-1a-pt-subtitle">
          Fale conosco, a equipe de engenharia de integrações.
        </p>

        <p>
          Entre em contato através do <strong>seu canal de mensagens dedicado</strong> ou em{" "}
          <a href="mailto:support@topsort.com">support@topsort.com</a>.
        </p>

        <p>
          Se você ainda não é cliente,{" "}
          <a href="https://www.topsort.com/book-a-demo">agende uma demo</a> com nossa
          equipe de vendas.
        </p>
      </div>
    </>;
};

O proxy é uma camada intermediária entre o backend do marketplace e o servidor de resultados (servidor do Algolia, por exemplo). Ele atua como uma ponte entre o marketplace, o mecanismo de busca e o Topsort. Isso permite que o proxy ingira os vencedores do leilão recuperados do Topsort na resposta fornecida pelo mecanismo de busca e retorne a resposta mesclada final ao marketplace.

O proxy é compatível com a maioria dos stacks tecnológicos e foi testado com plataformas como VTEX, Algolia e Salesforce.

## Como Usar o Proxy

Para começar a usar o proxy, você só precisa alterar o hostname na sua chamada de API existente, do seu catálogo ou mecanismo de busca para nosso proxy. Por exemplo, mude de:

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

para:

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

E nós cuidamos do resto. Enviamos a solicitação para o motor de leilão do Topsort e para o catálogo ou mecanismo de busca. Se algum dos produtos retornados pelo catálogo ou mecanismo de busca for promovido, indicaremos isso na resposta mesclada que construiremos, que será retornada ao marketplace.

Atualmente, o proxy suporta respostas application/json. Suporte para XML e GraphQL está planejado.

## Como Produtos Promovidos São Adicionados

Considere a seguinte solicitação, que busca produtos da taxonomia 'office':

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

A resposta do catálogo ou servidor de busca sem a integração do proxy do Topsort:

```json theme={null}
{
  "products": [
    { "id": "1", "name": "Impressora Laser Colorida de Alta Velocidade" },
    { "id": "2", "name": "Mesa de Pé Ajustável" },
    { "id": "3", "name": "Cadeira de Escritório Giratória Ergonômica" },
    { "id": "4", "name": "Combo de Teclado e Mouse Sem Fio" },
    { "id": "5", "name": "Quadro Branco Magnético com Conjunto de Marcadores" }
  ]
}
```

Após mesclar produtos promovidos na resposta:

```json theme={null}
{
  "products": [
    {
      "id": "3",
      "name": "Cadeira de Escritório Giratória Ergonômica",
      "rank": 1,
      "resolvedBidId": "..."
    },
    {
      "id": "6",
      "name": "Armário de Arquivo com Múltiplas Gavetas",
      "rank": 2,
      "resolvedBidId": "..."
    },
    { "id": "1", "name": "Impressora Laser Colorida de Alta Velocidade" },
    { "id": "2", "name": "Mesa de Pé Ajustável" },
    { "id": "4", "name": "Combo de Teclado e Mouse Sem Fio" }
  ],
  "topsort": {
    "winners": [
      { "rank": 1, "type": "product", "id": "3", "resolvedBidId": "..." },
      { "rank": 2, "type": "product", "id": "6", "resolvedBidId": "..." }
    ]
  }
}
```

## Entendendo os Novos Campos

* **rank**: A posição do produto promovido no leilão.
* **resolvedBidId**: Um ID único usado para rastrear o produto em análises.

Um novo objeto chamado **topsort** é adicionado no nível raiz apenas quando produtos promovidos são incluídos.

## Como Rastrear Eventos

Se você usar a biblioteca analytics.js do Topsort ou a API de Eventos, use os campos product id e resolvedBidId para rastrear interações do usuário:

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

## Recursos do Proxy

* **Cache de Resposta**: Reduz a latência armazenando em cache respostas bem-sucedidas do catálogo ou mecanismo de busca.
* **Modo de Staging**: Permite testar antes de entrar em produção.
* **Suporte para Sincronização de Catálogo**: Envia informações para manter o catálogo do Topsort atualizado.
* **Logging Integrado**: Coleta dados sobre produtos, leilões e desempenho.

<IntegrationsCard1APt />
