Implémenter la logique de recherche dans votre backend ou application mobile

Ce guide explique comment interroger la Product Recommendation API pour afficher les résultats de recherche de produits en direct (instantanés) et complets sans intégrer l’élément HTML Kameleoon. Consultez le guide d’intégration visuelle pour la méthode visuelle. Le tutoriel utilise l’endpoint search.

Pourquoi utiliser l’API ?

Utilisez l’API pour les applications mobiles.

Selon vos besoins, cette approche offre plusieurs avantages :

Contrôle total : personnalisez l’affichage de la variation pour correspondre à vos standards de design et d’UX.
Meilleures performances : utilisez des appels API optimisés pour réduire les délais de chargement des pages par rapport aux solutions basées sur des scripts.
Débogage plus facile : journalisez, surveillez et déboguez les intégrations dans votre base de code client à l’aide d’outils standards.
Aucune dépendance à un script tiers : utilisez des appels directs pour éviter les scripts externes, réduire les conflits potentiels et vous aligner sur les politiques de sécurité.
Compatible SPA : intégrez directement dans les applications monopage pour éviter les problèmes de timing et vous adapter au routage côté client.
Résilience face aux ad blockers : diffusez les expériences de manière cohérente sans scripts tiers ni marqueurs HTML spécifiques. Pour plus de détails sur l’impact des ad blockers sur Kameleoon, consultez la FAQ.

Objectif

Récupérez et affichez les résultats de recherche de produits en fonction de la saisie de l’utilisateur en utilisant les modes de recherche instantanée (typeahead) ou complète.

Prérequis

Un compte Kameleoon valide avec un Store ID (shop_id).
- Obtenez votre shop_id dans Recommendations > Settings > Store settings dans l’application Kameleoon. Contactez votre Customer Success Manager pour obtenir la clé si nécessaire.
Un Device ID (did) et un Session ID (sid). (Requis uniquement lors de l’utilisation de filtres ou d’algorithmes reposant sur des données historiques de l’appareil/de l’utilisateur).
- Pour Kameleoon Web Experimentation, obtenez-les à partir des cookies suivants :
  - KameleoonProducts_device_id → Device ID (did)
  - KameleoonProducts_session_code → Session ID (sid)
- Sinon, générez ces valeurs manuellement.

Étapes

1. Configurer le flux pour Kameleoon Search

Suivez le guide de configuration de la recherche pour configurer votre flux.

2. Récupérer les cookies (Kameleoon Web Experimentation uniquement)

Générez ces valeurs manuellement pour les implémentations backend ou les environnements sans Kameleoon Web Experimentation. Consultez l’endpoint Init pour plus de détails.

function getCookie(name) {
  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) return match[2];
}
const did = getCookie('KameleoonProducts_device_id');
const sid = getCookie('KameleoonProducts_session_code');

3. Effectuer une requête de recherche

L’API prend en charge deux types de recherche :

a. Instant search (instant_search)

Utilisez l’instant search pour obtenir des résultats typeahead et d’autocomplétion au fur et à mesure que l’utilisateur tape. Endpoint :

GET https://api.products.kameleoon.com/search

Nom	Type	Requis	Description
`did`	string	True	Device ID (depuis le cookie)
`sid`	string	True	Session ID (depuis le cookie)
`shop_id`	string	True	Votre Kameleoon store ID
`type`	string	True	`"instant_search"`
`search_query`	string	True	Saisie de recherche de l’utilisateur
`locations`	List	False	Liste séparée par des virgules des IDs de lieux

Exemple :

curl -X GET -L 'https://api.products.kameleoon.com/search' \
             -H 'Content-Type: application/json' \
             -d '{
   "did":"abc123",
   "sid":"xyz456",
   "shop_id":"demoShop",
   "type":"instant_search",
   "search_query":"decon",
}'

b. Full search (full_search)

Utilisez la full search pour afficher des résultats détaillés avec filtres, catégories, pagination et tri. Endpoint :

GET https://api.products.kameleoon.com/search

Nom	Type	Requis	Description
`did`	string	True	Device ID (depuis le cookie)
`sid`	string	True	Session ID (depuis le cookie)
`shop_id`	string	True	Votre Kameleoon store ID
`type`	string	True	`"full_search"`
`search_query`	string	True	Saisie de recherche de l’utilisateur
`locations`	List	False	Liste séparée par des virgules des IDs de lieux
`limit`	Integer	False	Nombre maximum de résultats
`offset`	Integer	False	Décalage pour la pagination
`extended`	Integer/Empty	False	`1` renvoie les données complètes du produit
`sort_by`	String	False	Critère de tri : `popular`, `price`, etc.
`order`	String	False	Ordre de tri : `asc` ou `desc`
`brands`	List	False	Filtrer par liste de marques
`categories`	List	False	Filtrer par liste de catégories
`filters`	String	False	Chaîne JSON échappée pour les paramètres du produit
`price_min`	Integer	False	Prix minimum
`price_max`	Integer	False	Prix maximum
`exclude`	List	False	IDs de produits à exclure

curl -X GET -L 'https://api.products.kameleoon.com/search' \
             -H 'Content-Type: application/json' \
             -d '{
   "did":"abc123",
   "sid":"xyz456",
   "shop_id":"demoShop",
   "type":"full_search",
   "search_query":"decon",
   "limit":"10",
   "extended":"1",
   "sort_by":"price",
   "order":"asc",
}'

Consultez la section de filtrage pour plus de détails sur le filtrage.

4. Intégrer la réponse

a. Instant search

Si la requête réussit, l’API renvoie un extrait HTML pour une injection directe dans la page, ainsi que des données de produits et de catégories pour un rendu personnalisé.

Pour les applications mobiles, utilisez les tableaux JSON de produits et de catégories pour concevoir une interface native.

Exemple de réponse

{
    "search_query": "decon",
    "collections": [],
    "products_total": 1,
    "products": [
        {
            "name": "VANS | SK8-HI DECON (CUTOUT)| LEAVES\/WHITE",
            "url": "\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=instant_search&recommended_code=decon",
            "category_ids": [
                "1",
                "2",
                "295508017316"
            ],
            "barcode": "VN-05-white-4",
            "vendor_code": "VA",
            "brand": "Vans",
            "leftovers": "lot",
            "rating": 5,
            "fashion_sizes": [
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "10"
            ],
            "fashion_feature": "adult",
            "fashion_gender": "m",
            "fashion_wear_type": "shoe",
            "fashion_original_sizes": [
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "10"
            ],
            "picture": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
            "categories": [
                {
                    "id": "1",
                    "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
                    "name": "Men",
                    "level": "1",
                    "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon"
                },
                {
                    "id": "2",
                    "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
                    "name": "Women",
                    "level": "1",
                    "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon"
                },
                {
                    "id": "295508017316",
                    "parent_id": "1",
                    "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
                    "name": "Men - Sneakers",
                    "level": "2",
                    "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon"
                }
            ],
            "price_formatted": "$ 179",
            "price_full_formatted": "$ 179.95",
            "price": 179,
            "price_full": 179.95,
            "image_url": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484",
            "image_url_handle": "\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484",
            "image_url_resized": {
                "120": "https:\/\/images.products.kameleoon.com\/resize-images\/120\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "140": "https:\/\/images.products.kameleoon.com\/resize-images\/140\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "160": "https:\/\/images.products.kameleoon.com\/resize-images\/160\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "180": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "200": "https:\/\/images.products.kameleoon.com\/resize-images\/200\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "220": "https:\/\/images.products.kameleoon.com\/resize-images\/220\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "310": "https:\/\/images.products.kameleoon.com\/resize-images\/310\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "520": "https:\/\/images.products.kameleoon.com\/resize-images\/520\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "original": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484"
            },
            "url_handle": "\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=instant_search&recommended_code=decon",
            "currency": "$",
            "_id": "3927252",
            "id": "VN-05-white-4",
            "stock_quantity": 19,
            "fashion_colors": [
                "white"
            ],
            "params": [
                {
                    "key": "Size",
                    "values": [
                        "4"
                    ]
                },
                {
                    "key": "Color",
                    "values": [
                        "white"
                    ]
                }
            ],
            "group_id": "_3927252_"
        }
    ],
    "categories": [
        {
            "id": "1",
            "name": "Men",
            "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "count": 1
        },
        {
            "id": "2",
            "name": "Women",
            "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "count": 1
        },
        {
            "id": "295508017316",
            "name": "Men - Sneakers",
            "parent": "1",
            "url": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=instant_search&recommended_code=decon",
            "count": 1
        }
    ],
    "clarification": true,
    "requests_count": 1,
    "queries": [],
    "html": "<div class=\"KameleoonProducts-search-wrapper\"> <div class=\"KameleoonProducts-search-container\"> <div class=\"KameleoonProducts-search-group\"> <div class=\"KameleoonProducts-search-group-title\"> Categories <\/div> <div class=\"KameleoonProducts-search-group-description\"> <a class=\"KameleoonProducts-search-row\" data-id=\"1\" data-remote=\"true\" href=\"\/collections\/all?recommended_by=instant_search&recommended_code=decon\"><span>Men <\/span><\/a> <a class=\"KameleoonProducts-search-row\" data-id=\"2\" data-remote=\"true\" href=\"\/collections\/all?recommended_by=instant_search&recommended_code=decon\"><span>Women <\/span><\/a> <a class=\"KameleoonProducts-search-row\" data-id=\"295508017316\" data-remote=\"true\" href=\"\/collections\/all?recommended_by=instant_search&recommended_code=decon\"><span>Men - Sneakers <\/span><\/a> <\/div> <\/div> <\/div> <div class=\"KameleoonProducts-search-container\" id=\"KameleoonProducts_search_products\"> <div class=\"KameleoonProducts-search-group KameleoonProducts-search-products\"> <div class=\"KameleoonProducts-search-group-title\"> Possible item matches <\/div> <div class=\"KameleoonProducts-search-group-description\"> <a class=\"KameleoonProducts-search-product\" href=\"\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=instant_search&recommended_code=decon\"> <div class=\"KameleoonProducts-search-product__image\" style=\"background-image: url(&#39;https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484&#39;)\"><\/div> <div class=\"KameleoonProducts-search-product__name\"> VANS | SK8-HI DECON (CUTOUT)| LEAVES\/WHITE <\/div> <div class=\"KameleoonProducts-search-product__price\"> $ 179.95 <\/div> <\/a> <\/div> <\/div> <\/div> <div class=\"KameleoonProducts-search-close\"><\/div><\/div>"
}

a. Full Search

L’intégration de la full search fournit également un extrait HTML pour afficher les résultats. La réponse comprend également les tableaux brands et filters en plus du tableau categories.

Le tableau filters contient les clés et valeurs des champs params du produit. Utilisez-les pour construire l’interface de filtre.

Exemple de page de résultats de full search :

Appliquer des filtres

L’exemple suivant montre la requête de full search avec les filtres sélectionnés dans l’image ci-dessus :

{
   "did":"abc123",
   "shop_id":"9fa630bf863db7a87fc6d5fd2a188f",
   "type":"full_search",
   "search_query":"vans",
   "input_query":"vans",
   "categories":"295508017316",
   "filters":{"Color":["white"],"Size":["4"]},
   "brands":"vans"

}

Exemple de réponse

{
    "search_query": "decon",
    "collections": [],
    "products_total": 1,
    "products": [
        {
            "name": "VANS | SK8-HI DECON (CUTOUT)| LEAVES\/WHITE",
            "url": "\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=full_search&recommended_code=decon",
            "category_ids": [
                "1",
                "2",
                "295508017316"
            ],
            "barcode": "VN-05-white-4",
            "vendor_code": "VA",
            "brand": "Vans",
            "leftovers": "lot",
            "rating": 5,
            "fashion_sizes": [
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "10"
            ],
            "fashion_feature": "adult",
            "fashion_gender": "m",
            "fashion_wear_type": "shoe",
            "fashion_original_sizes": [
                "4",
                "5",
                "6",
                "7",
                "8",
                "9",
                "10"
            ],
            "picture": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
            "categories": [
                {
                    "id": "1",
                    "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
                    "name": "Men",
                    "level": "1",
                    "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon"
                },
                {
                    "id": "2",
                    "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
                    "name": "Women",
                    "level": "1",
                    "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon"
                },
                {
                    "id": "295508017316",
                    "parent_id": "1",
                    "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
                    "name": "Men - Sneakers",
                    "level": "2",
                    "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon"
                }
            ],
            "price_formatted": "$ 179",
            "price_full_formatted": "$ 179.95",
            "price": 179,
            "price_full": 179.95,
            "image_url": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484",
            "image_url_handle": "\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484",
            "image_url_resized": {
                "120": "https:\/\/images.products.kameleoon.com\/resize-images\/120\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "140": "https:\/\/images.products.kameleoon.com\/resize-images\/140\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "160": "https:\/\/images.products.kameleoon.com\/resize-images\/160\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "180": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "200": "https:\/\/images.products.kameleoon.com\/resize-images\/200\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "220": "https:\/\/images.products.kameleoon.com\/resize-images\/220\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "310": "https:\/\/images.products.kameleoon.com\/resize-images\/310\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "520": "https:\/\/images.products.kameleoon.com\/resize-images\/520\/9fa630bf863db7a87fc6d5fd2a188f\/3927252.jpg",
                "original": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484"
            },
            "url_handle": "\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=full_search&recommended_code=decon",
            "currency": "$",
            "_id": "3927252",
            "id": "VN-05-white-4",
            "stock_quantity": 19,
            "fashion_colors": [
                "white"
            ],
            "params": [
                {
                    "key": "Size",
                    "values": [
                        "4"
                    ]
                },
                {
                    "key": "Color",
                    "values": [
                        "white"
                    ]
                }
            ],
            "group_id": "_3927252_"
        }
    ],
    "price_range": {
        "min": 179.95000000000002,
        "max": 179.95000000000002
    },
    "price_ranges": [
        {
            "from": 10,
            "count": 1
        }
    ],
    "price_median": 0,
    "filters": {
        "Color": {
            "count": 1,
            "values": {
                "white": 1
            }
        },
        "Size": {
            "count": 1,
            "values": {
                "4": 1
            },
            "ranges": {
                "min": "4",
                "max": "4"
            }
        }
    },
    "brands": [
        {
            "name": "Vans",
            "count": 1
        }
    ],
    "categories": [
        {
            "id": "1",
            "name": "Men",
            "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "count": 1
        },
        {
            "id": "2",
            "name": "Women",
            "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "count": 1
        },
        {
            "id": "295508017316",
            "name": "Men - Sneakers",
            "parent": "1",
            "url": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "url_handle": "\/collections\/all?recommended_by=full_search&recommended_code=decon",
            "count": 1
        }
    ],
    "industrial_filters": {
        "fashion_sizes": [
            {
                "size": 4,
                "count": 1
            },
            {
                "size": 5,
                "count": 1
            },
            {
                "size": 6,
                "count": 1
            },
            {
                "size": 7,
                "count": 1
            },
            {
                "size": 8,
                "count": 1
            },
            {
                "size": 9,
                "count": 1
            },
            {
                "size": 10,
                "count": 1
            }
        ],
        "colors": [
            {
                "color": "white",
                "count": 1
            }
        ]
    },
    "clarification": true,
    "requests_count": 1,
    "html": "<div class=\"KameleoonProducts-search-items\"> <div class=\"KameleoonProducts-search-item\"> <div class=\"KameleoonProducts-search-item-photo\"> <a href=\"\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=full_search&recommended_code=decon\"><img class=\"item_img\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/327cd936d9a9c409cd8b36987158013f_grande.jpg?v=1622707484\" \/><\/a> <\/div> <div class=\"KameleoonProducts-search-item-title\"> <a href=\"\/products\/asics-tiger-gel-lyte-v-30-years-of-gel-pack?recommended_by=full_search&recommended_code=decon\">VANS | SK8-HI DECON (CUTOUT)| ...<\/a> <\/div> <div class=\"KameleoonProducts-search-item-price\"> $ 179.95 <\/div> <\/div> <\/div>"
}

Remarques

Assurez-vous que les cookies sont accessibles avant d’effectuer des requêtes.
Utilisez la full search avec extended=1 pour des listes de produits détaillées, par exemple sur les pages de produits.
Personnalisez le HTML renvoyé ou affichez une interface personnalisée à l’aide de la réponse JSON. se.

​Pourquoi utiliser l’API ?

​Objectif

​Prérequis

​Étapes

​1. Configurer le flux pour Kameleoon Search

​2. Récupérer les cookies (Kameleoon Web Experimentation uniquement)

​3. Effectuer une requête de recherche

​a. Instant search (instant_search)

​b. Full search (full_search)

​4. Intégrer la réponse

​a. Instant search

Exemple de réponse

​a. Full Search

​Appliquer des filtres

Exemple de réponse

​Remarques

Pourquoi utiliser l’API ?

Objectif

Prérequis

Étapes

1. Configurer le flux pour Kameleoon Search

2. Récupérer les cookies (Kameleoon Web Experimentation uniquement)

3. Effectuer une requête de recherche

a. Instant search (instant_search)

b. Full search (full_search)

4. Intégrer la réponse

a. Instant search

a. Full Search

Appliquer des filtres

Remarques