> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # Implémenter la logique de recherche dans votre backend ou application mobile > Affichez les résultats de recherche de produits en direct et complets dans votre backend ou application mobile en utilisant la Product Recommendation API de Kameleoon. 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](/user-manual/recommendations-and-merchandising/recommendations/enable-kameleoon-search-capabilities#technical-implementation-of-kameleoon-instant-search) pour la méthode visuelle. Le tutoriel utilise l'**[endpoint search](../all-endpoints/Search/get-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](../../../feature-experimentation/technical-reference/faq-global#how-do-ad-blockers-affect-kameleoon)**. ## 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. ![Store Key](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/api-tutorial/store-key.jpg) * 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](/user-manual/recommendations-and-merchandising/recommendations/enable-kameleoon-search-capabilities) 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](../all-endpoints/Initialize/init)** pour plus de détails. ```javascript theme={null} 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 :** ```bash theme={null} 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 | ```bash theme={null} 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](#appliquer-des-filtres) 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é. ![Instant Search](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/api-tutorial/instant-search.jpg) Pour les applications mobiles, utilisez les tableaux JSON de produits et de catégories pour concevoir une interface native. ##### Exemple de réponse ```json theme={null} { "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": "
Categories <\/div>
Men <\/span><\/a> Women <\/span><\/a> Men - Sneakers <\/span><\/a> <\/div> <\/div> <\/div>
Possible item matches <\/div>
<\/div>
VANS | SK8-HI DECON (CUTOUT)| LEAVES\/WHITE <\/div>
$ 179.95 <\/div> <\/a> <\/div> <\/div> <\/div>
<\/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 : ![Full Search](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/api-tutorial/full-search.jpg) #### Appliquer des filtres L'exemple suivant montre la requête de full search avec les filtres sélectionnés dans l'image ci-dessus : ```json theme={null} { "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 ```json theme={null} { "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": "
<\/a> <\/div>
VANS | SK8-HI DECON (CUTOUT)| ...<\/a> <\/div>
$ 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.