Overview
Autocomplete Layouts organize how autocomplete sections are displayed and style the Autocomplete box. Choose one of three layouts on the Athena XAI Dashboard, under Autocomplete > Layouts.
After you select a layout, remember to Publish Autocomplete.
| Layout | What it does | API to use |
|---|---|---|
| Layout 1 | Features one prominent section for displaying products or blog posts, with additional sections alongside it. | Autocomplete API |
| Layout 2 | Stacks autocomplete sections vertically. | Autocomplete API |
| Layout 3 | Allows filtering of autocomplete results. | Autocomplete Layout 3 API |
Autocomplete Layout 3 API
If you choose Layout 3, use this API to display Autocomplete results. It provides information about filters and the data you chose for display on the Autocomplete > Sections page of the Athena XAI Dashboard. You can filter Autocomplete data by passing additional parameters to the API call.
The API returns data in two fields:
| Field | What it contains |
|---|---|
autocompleteResponse | Information about sections, true Autocomplete, and data for sections other than the Product section. The Product section also returns items, but do not use them in Layout 3. |
searchDataResponse | Data for displaying products, filters, active filters, sorters and pagination. Use only the products returned in this response, because they can be filtered and sorted. The Search API page has more details about this response. |
You can pass additional parameters for filtering, paging and sorting, as with the Search API. See Search API with Active Filters and Search API with Additional Parameters.
| Method | Path |
|---|---|
POST | /api/v1/search/autocomplete |
POST | /api/v2/search/autocomplete |
Request body
{
"q": "Yoga", //required
"token": "{{ website_token }}" //required
}Successful response
{
"response" : {
"autocompleteResponse" : {
"data" : {
"results": {
"product": {
"items": [
{
"id": 1780,
"name": "Maya Tunic",
"highlighted_name": "Maya Tunic",
"link": "https://example.com/maya-tunic.html",
"sku": "WT07",
"product_type_id": "configurable",
"image": "https://example.com/media/catalog/product/cache/eb76/w/t/main_1.jpg",
"price": {
"regular_price": 29,
"regular_price_with_currency": "$29.00",
"special_price": null,
"special_price_with_currency": null,
"loyalty_price": null,
"loyalty_price_with_currency": null,
"discount_percentage": 0
}
},
…
],
"title": "Product Matches"
},
"recent_searches": {
"items": [
{
"name": "M",
"highlighted_name": "M",
"link": "https://onboarding-magento.syncitgroup.com/athena/?q=m"
},
…
],
"title": "Recent Searches"
},
"category": {
"items": [
{
"id": "99999195",
"name": "Viktor Luma",
"highlighted_name": "Viktor Luma",
"link": "https://example.com/viktor-lumatech-trade-pant.html",
"image": "https://example.syncitgroup.com/media/catalog/product/main_2.jpg"
},
…
],
"title": "Popular Categories"
},
"section_b": {
"items": [],
"title": "Section B"
},
"popular": {
"items": [
{
"id": 31,
"name": "Mini",
"highlighted_name": "Mini",
"link": "https://onboarding-magento.syncitgroup.com/athena/?q=mini",
"name_urlencoded": "mini"
},
{
"id": 43,
"name": "Mollitia",
"highlighted_name": "Mollitia",
"link": "https://onboarding-magento.syncitgroup.com/athena/?q=mollitia",
"name_urlencoded": "mollitia"
},
…
],
"title": "Popular Searches"
},
"pdf_documents": {
"items": [],
"title": "Documents"
},
"blog_category": {
"items": [],
"title": "Blog Categories"
},
},
"tabs" : {
"count" : {
"3" : 19
}
},
"true_autocomplete_keywors" : "yoga"
}
}
"searchDataResponse" : {
"products": {
"results": [
{
"short_description": "The most difficult yoga poses….",
"link": "http://www.local.magento.com/beginner-s-yoga.html",
"description": "Beginner's Yoga starts you down the path toward strength.",
"created_at": "2021-09-01 08:54:22",
"availability": 1,
"category_names": [
"Training",
"Video Download"
],
"updated_at": "2021-09-01 08:54:22",
"price": {
"regular_price": 6,
"regular_price_with_currency": "$ 6",
"special_price": null,
"special_price_with_currency": null,
"loyalty_price": null,
"loyalty_price_with_currency": null,
"discount_percentage": 0
},
"product_score": 70,
"id": 45,
"sku": "240-LV04",
"views": 0,
"image": "http://www.local.magento.com/media/catalog/product/cache/e0b1/l/t/lt01.jpg",
"meta_title": null,
"product_type_id": "downloadable",
"meta_description": null,
"name": "Beginner's Yoga",
"total_reviews": 2,
"type": "product",
"category_ids": [
9,
10
]
},
…
],
"amounts": {
"current_page": 1,
"last_page": 6,
"from": 1,
"to": 10,
"per_page": 10,
"next_page": 2,
"prev_page": null,
"total": 57
},
"active_filters": [],
"filters": [
{
"title": "Color",
"type": "color",
"array": [
{
"option_value": "50",
"option_id": "50",
"option_key": "color",
"option_label": "Blue",
"attribute_id": 93,
"selected": false,
"count": 21,
"type_id": "1",
"hax_code": "#1857f7",
"url": "http://localhost:3000/athena/?q=yoga&color=50",
"url_path": "/?q=yoga&color=50",
"url_params": {
"q": "yoga",
"color": "50"
}
}
]
}
],
"sorters": [
{
"option_key": "product_list_order",
"option_value": "price_desc",
"option_label": "PRICE ASC",
"url": "http://localhost:3000/athena/?q=yoga&product_list_order=price_desc",
"url_path": "/?q=yoga&product_list_order=price_desc",
"url_params": {
"q": "yoga",
"product_list_order": "price_desc"
},
"selected": false
},
{
"option_key": "product_list_order",
"option_value": 30,
"option_label": "30",
"url": "http://localhost:3000/athena/?q=yoga&product_list_limit=30",
"url_path": "/?q=yoga&product_list_limit=30",
"url_params": {
"q": "yoga",
"product_list_order": "relevance"
},
"selected": true
}
],
"orders": [
{
"option_key": "product_list_limit",
"option_value": "relevance",
"option_label": "RELEVANCE",
"url": "http://localhost:3000/athena/?q=yoga&product_list_order=relevance",
"url_path": /?q=yoga&product_list_order=relevance",
"url_params": {
"q": "yoga",
"product_list_limit": "10"
},
"selected": true
},
{
"option_key": "product_list_limit",
"option_value": 30,
"option_label": "30",
"url": "http://localhost:3000/athena/?q=yoga&product_list_limit=30",
"url_path": "/?q=yoga&product_list_limit=30",
"url_params": {
"q": "yoga",
"product_list_limit": "30"
},
"selected": false
}
],
"pager": [
{
"option_key": "page",
"option_value": 1,
"option_label": "1",
"selected": true
},
{
"option_key": "page",
"option_value": 2,
"option_label": "2",
"url": "http://localhost:3000/athena/?q=yoga&page=2",
"url_path": "/?q=yoga&page=2",
"url_params": {
"q": "yoga",
"page": "2"
},
"selected": false,
"type": "2"
},
],
"collection_price": {
"lowest_price_with_filters": 0,
"highest_price_with_filters": 92,
"lowest_price": 0,
"highest_price": 92,
},
"visual_filter": []
},
"modes": [
{
"name": "Grid",
"type": "grid",
"option_key": "product_list_mode",
"option_value": "grid",
"option_label": "Grid",
"url": "http://localhost:3000/athena/?q=yoga&product_list_mode=grid",
"url_path": "/?q=yoga&product_list_mode=grid",
"url_params": {
"q": "yoga",
"product_list_mode": "grid"
},
"selected": true
},
{
"name": "List",
"type": "list",
"option_key": "product_list_mode",
"option_value": "list",
"option_label": "List",
"url": "http://localhost:3000/athena/?q=yoga&product_list_mode=list",
"url_path": "/?q=yoga&product_list_mode=list",
"url_params": {
"q": "yoga",
"product_list_mode": "list"
}
}
],
"query": "yoga",
"suggested_text": null,
"used_suggestions": false,
"blog": {
},
"banners": [
{
"html": "banner"
}
],
"current_url": "http://localhost:3000/athena/?q=yoga",
"current_path": ""
}
}
}