Construire une page de catégorie avec Browse & Discovery

Ce qu'il vous faut

Une clé API (essai gratuit 14 jours, sans carte bancaire) et une page HTML où injecter les résultats. Pas de SDK à installer.

Étape 1 — Indexez avec des catégories

categories (ou category au singulier) est un champ que vous fournissez, exactement comme name ou stock — reprenez la taxonomie que vous avez déjà sur votre site, pas besoin de la redéfinir pour Heurix. Ajoutez aussi price si vous voulez trier par prix :

curl -X POST https://api.heurix.fr/v1/index/monsite/items \
  -H "Authorization: Bearer VOTRE_CLE_API" \
  -H "Content-Type: application/json" \
  -d '{
  "items": [
    {"id": "sku-1", "name": "Perceuse GDX 18V-285 BOSCH",
     "categories": ["outillage-electroportatif", "perceuses-visseuses"],
     "brand": "Bosch", "price": 139.90, "stock": 8},
    {"id": "sku-2", "name": "Perceuse HP457D MAKITA",
     "categories": ["outillage-electroportatif", "perceuses-visseuses"],
     "brand": "Makita", "price": 99.90, "stock": 3}
  ]
}'

Deux niveaux dans categories : la catégorie principale ET la sous-catégorie, dans la même liste. Un produit ainsi indexé apparaît aussi bien dans une page « Outillage électroportatif » que dans une page « Perceuses & visseuses » plus précise — chaque valeur de la liste est une page de catégorie potentielle.

Étape 2 — Vérifiez ce qui a été détecté

Avant de coder quoi que ce soit côté site, confirmez ce que Heurix a compris de votre catalogue :

curl https://api.heurix.fr/v1/index/monsite/browse-categories \
  -H "Authorization: Bearer VOTRE_CLE_API"

{"categories": [
  {"category": "outillage-electroportatif", "products": 2},
  {"category": "perceuses-visseuses", "products": 2}
]}

Ces mêmes catégories sont aussi visibles et gérables depuis votre console, onglet Dashboard → Browse & Discovery.

Étape 3 — Affichez la page, avec le snippet fourni

Téléchargez heurix-browse-widget.js, renseignez votre clé et votre catalogue en tête de fichier, puis incluez-le sur votre page de catégorie :

<div id="ma-page-categorie"></div>
<script src="heurix-browse-widget.js"></script>
<script>
  Heurix.browse({
    catalog: "monsite",
    category: "perceuses-visseuses",
    sort: "price_asc",
    containerId: "ma-page-categorie"
  });
</script>

Par défaut, chaque produit s'affiche dans un <div class="heurix-product"> simple, à styler avec votre propre CSS. Pour un contrôle total du HTML généré (grille de cartes, boutons, badges promo…), fournissez votre propre fonction de rendu :

Heurix.browse({
  catalog: "monsite",
  category: "perceuses-visseuses",
  containerId: "ma-page-categorie",
  renderItem: function (hit) {
    return '<div class="ma-carte-produit">' +
      '<h3>' + hit.product.name + '</h3>' +
      '<span>' + hit.product.price + ' €</span>' +
      (hit.in_stock ? '' : '<span class="rupture">Rupture</span>') +
    '</div>';
  }
});

Aller plus loin : trier, filtrer, mettre en avant

Un sélecteur de tri se branche en rappelant simplement Heurix.browse() avec un sort différent au changement de valeur — stock, recent, alphabetical, price_asc/price_desc, margin, ou popular (clics et achats réels, si vous avez posé le tracker de conversion).

Pour affiner à l'intérieur d'une catégorie (par marque, par couleur…), passez un objet filters — n'importe quel champ produit non réservé devient automatiquement filtrable, sans configuration :

Heurix.browse({
  catalog: "monsite", category: "perceuses-visseuses",
  filters: { brand: "Makita" },
  containerId: "ma-page-categorie"
});

Et pour mettre en avant toute une marque ou une gamme sans éditer produit par produit, une règle de boost par attribut se pose une fois depuis la console (ou l'API) — voir la documentation complète pour le détail des endpoints d'épinglage et de boost.