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

> Apprenez à utiliser la solution proxy de Topsort pour enrichir vos résultats de catalogue avec des produits promus

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        <h2>Besoin d'aide avec votre intégration Topsort ?</h2>

        <p className="integrations-card-1a-fr-subtitle">
          Parlez-nous, l'équipe d'ingénierie des intégrations.
        </p>

        <p>
          Contactez-nous via <strong>votre canal de messagerie dédié</strong> ou à{" "}
          <a href="mailto:support@topsort.com">support@topsort.com</a>.
        </p>

        <p>
          Si vous n'êtes pas encore client,{" "}
          <a href="https://www.topsort.com/book-a-demo">planifiez une démo</a> avec notre
          équipe de vente.
        </p>
      </div>
    </>;
};

Le proxy est une couche intermédiaire entre le backend de la marketplace et le serveur de résultats (le serveur d'Algolia, par exemple). Il agit comme un pont entre la marketplace, le moteur de recherche et Topsort. Cela permet au proxy d'intégrer les gagnants d'enchères récupérés depuis Topsort dans la réponse fournie par le moteur de recherche, et de retourner la réponse finale fusionnée à la marketplace.

Le proxy est compatible avec la plupart des stacks technologiques, et il a été testé avec des plateformes comme VTEX, Algolia et Salesforce.

## Comment utiliser le proxy

Pour commencer à utiliser le proxy, vous devez simplement changer le nom d'hôte dans votre appel API existant, de votre catalogue ou moteur de recherche vers notre proxy. Par exemple, changez de :

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

à :

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

Et nous nous occupons du reste. Nous envoyons la requête au moteur d'enchères de Topsort et au catalogue ou moteur de recherche. Si l'un des produits renvoyés par le catalogue ou le moteur de recherche est promu, nous l'indiquerons dans la réponse fusionnée que nous construirons, qui sera renvoyée à la marketplace.

Actuellement, le proxy prend en charge les réponses application/json. La prise en charge de XML et GraphQL est prévue.

## Comment les produits promus sont ajoutés

Considérez la requête suivante, qui récupère les produits de la taxonomie 'office' :

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

La réponse du catalogue ou du serveur de recherche sans l'intégration du proxy de Topsort :

```json theme={null}
{
  "products": [
    { "id": "1", "name": "Imprimante laser couleur haute vitesse" },
    { "id": "2", "name": "Bureau debout réglable en hauteur" },
    { "id": "3", "name": "Chaise de bureau pivotante ergonomique" },
    { "id": "4", "name": "Combo clavier et souris sans fil" },
    { "id": "5", "name": "Tableau blanc magnétique avec ensemble de marqueurs" }
  ]
}
```

Après fusion des produits promus dans la réponse :

```json theme={null}
{
  "products": [
    {
      "id": "3",
      "name": "Chaise de bureau pivotante ergonomique",
      "rank": 1,
      "resolvedBidId": "..."
    },
    {
      "id": "6",
      "name": "Classeur à tiroirs multiples",
      "rank": 2,
      "resolvedBidId": "..."
    },
    { "id": "1", "name": "Imprimante laser couleur haute vitesse" },
    { "id": "2", "name": "Bureau debout réglable en hauteur" },
    { "id": "4", "name": "Combo clavier et souris sans fil" }
  ],
  "topsort": {
    "winners": [
      { "rank": 1, "type": "product", "id": "3", "resolvedBidId": "..." },
      { "rank": 2, "type": "product", "id": "6", "resolvedBidId": "..." }
    ]
  }
}
```

## Comprendre les nouveaux champs

* **rank** : La position du produit promu dans l'enchère.
* **resolvedBidId** : Un ID unique utilisé pour suivre le produit dans les analyses.

Un nouvel objet nommé **topsort** est ajouté au niveau racine uniquement lorsque des produits promus sont inclus.

## Comment suivre les événements

Si vous utilisez la bibliothèque analytics.js de Topsort ou l'API Events, utilisez les champs product id et resolvedBidId pour suivre les interactions utilisateur :

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

## Fonctionnalités du proxy

* **Mise en cache des réponses** : Réduit la latence en mettant en cache les réponses réussies du catalogue ou du moteur de recherche.
* **Mode staging** : Permet les tests avant la mise en production.
* **Prise en charge de la synchronisation du catalogue** : Envoie des informations pour maintenir le catalogue de Topsort à jour.
* **Journalisation intégrée** : Collecte des données sur les produits, les enchères et les performances.

<IntegrationsCard1AFr />
