Search
Overview
The SCAYLE Search functionality provides users with a fast and efficient way to locate categories, products, or navigation items. Designed with both performance and usability in mind, SCAYLE Search aims to deliver relevant and intuitive results through several key features.
Key Features
Search Suggestions
As users type in the search bar, the system dynamically generates suggestions after at least three characters are entered. These suggestions are categorized into the following groups:
- Categories: Relevant shop categories with optional filters displayed.\
-(2).png)
Search Suggestions for Categories with Filters
- Products: Specific product matches by their unique ids (reference keys, EANs or internal ids).
\-(2).png)
Search Suggestion for a Product
- Navigation Items: Informational or navigational pages included in search results.\
-(2).png)
Search Suggestion for a Page
- "See All Results" Option: Always displayed, allowing users to view a complete list of results for their query.
Search Flow in the Storefront application
The search functionality follows a structured flow to provide relevant suggestions and navigation paths based on user input. Below is a breakdown of how search queries are processed.
Step 1: User Input – Initiating the Search
The user begins by typing a search term with a minimum of 3 characters.
Step 2: Search Suggestions – Retrieving Relevant Results
A request is sent to /v2/search/suggestions, which returns relevant suggestions based on the input:
- Category (without filters) – e.g., typing "shirt" suggests the
Shirtcategory. - Category (with filters) – e.g., typing "shirt black M" suggests the
Shirtcategory withColor: BlackandSize: Mfilters applied. - Product – e.g., typing a product ID like "205668" suggests the corresponding product.
- Navigation Item – e.g., typing "FAQ" suggests the FAQ page.
- Show All Results – Always displayed (not returned by
/v2/search/suggestions).
Step 3.1: Clicking on a Suggestion – Navigating to the Right Page
When a user selects a suggestion, they are directed to the appropriate page:
- Category (without filters) → Navigates to the Category PLP.
- Category (with filters) → Navigates to the Category PLP with filters applied.
- Product → Navigates to the Product Detail Page (PDP).
- Navigation Item → Navigates to the corresponding navigation item page.
- Show All Results → Navigates to the search results page with a term filter applied (e.g.,
search?filters[term]=shirt).
Step 3.2: Pressing Enter (Resolving the Search) – Finalizing the Query
If the user presses Enter, a request is sent to /v2/search/resolve, which determines the final navigation:
- Category (without filters) → Navigates to the Category PLP.
- Category (with filters) → Navigates to the Category PLP with filters applied.
- Product → Navigates to the Product Detail Page (PDP).
- Navigation Item → Navigates to the corresponding navigation item page.
- Not Resolved → Navigates to the search page with a with a term filter applied.
Step 4: Handling Search Results – Displaying Relevant Content
After clicking "Show All Results" or handling a not resolved search query:
- If products are found → The search results page displays relevant products.
- If no products are found → An empty search results page is shown.
.svg)
Search Flow
For more details on how the /v2/search/suggestions and /v2/search/resolve endpoints work, refer to the SCAYLE Search API documentation.
Category Prioritization
SCAYLE Search emphasizes category matches, ensuring users are directed to the most relevant category pages when applicable.
- If a shop category matches the search term, it is displayed along with relevant filterable attribute groups. For example, searching for "shirt black M" will direct users to the
Shirtcategory page with the filtersColor: BlackandSize: Mautomatically applied.\.png)
Search Results for a "Shirts" Category with Applied Filters (Color & Size)
- If no exact match is found, a search result page is displayed, featuring a range of products related to the term.\
.png)
Search Results for a "adicolor" Query Search
Centralized Search Data Management
To improve maintainability and simplify search-related operations, SCAYLE Search employs a centralized composable called useSearch. This composable acts as a proxy for the getSearchSuggestions and resolveSearch RPC, centralizing all logic and data handling.
Benefits of useSearch:
- Efficient Search Query Management: Manages the
searchQuerystate centrally. - Reusable Computations: Provides access to essential computations, including suggestions and resolved routes.
- Reduced Redundancy: Streamlines the codebase, making it easier to maintain and extend.
Search Suggestions
SCAYLE Search offers three main types of suggestions, retrieved using the getSearchSuggestion method from the useSearch composable:
Category Suggestions
- These suggestions are the primary focus of SCAYLE Search, emphasizing category matches.
- If the search term includes filters (e.g., "Shoes - Red"), the category suggestions will indicate the applicable filters.
- Clicking on a suggestion redirects users to the category page with the selected filters applied.
Product Suggestions
- Product matches are displayed when a user enters a product ID or a term associated with the
productIdorreferenceKeyof a product variant.
Navigation Items Suggestions
- Navigation Items are included in search suggestions if they have the “Include to Search” property enabled in SCAYLE Navigation. For detailed instructions on adding a navigation item to search, refer to the Search User Guide.
Search Resolve
SCAYLE Search resolves user queries into single actionable results using the resolveSearch method in the useSearch composable.
- Resolved Search Term: Refers to a specific category (with or without filters) or product.
- Action Trigger: When a user presses "Enter" on the search interface, the
resolveSearchmethod determines the result. - Fallback Behavior: If no direct match is found, users are redirected to a search results page displaying all relevant products for the entered term.
Search Filters
Search filters enhance category search functionality by associating user queries with specific filters.
Example Filters JSON Structure:
[
{
"type": "attribute",
"attributeFilter": {
"group": {
"id": 1000,
"key": "color",
"label": "Color",
"type": "",
"multiSelect": true
},
"values": [
{
"id": 32,
"value": "schwarz",
"label": "Black"
}
]
}
},
{
"type": "attribute",
"attributeFilter": {
"group": {
"id": 1001,
"key": "size",
"label": "Size",
"type": "size",
"multiSelect": false
},
"values": [
{
"id": 36,
"value": "m",
"label": "M"
},
{
"id": 2305,
"value": "sm",
"label": "S/M"
},
{
"id": 2367,
"value": "ml",
"label": "M/L"
}
]
}
}
]
Search data
SCAYLE Search relies on structured data responses to deliver precise and meaningful results.
Category search response
When users type a category term alongside additional filters, the search response includes a filters array detailing the filters.
{
"type": "category",
"categorySuggestion": {
"category": {
"id": 50346,
"path": "/women/clothing/shirts-tops",
"name": "Shirts & Tops",
"slug": "shirts-tops",
"parentId": 50338,
"rootlineIds": [
50337,
50338,
50346
],
"childrenIds": [],
"properties": [],
"isHidden": false,
"depth": 3,
"supportedFilter": [
"size",
"material",
"pattern",
"style",
"fit",
"necklineStyle",
"sleeveLength"
],
"parent": {
"id": 50338,
"path": "/women/clothing",
"name": "Clothing",
"slug": "clothing",
"parentId": 50337,
"rootlineIds": [
50337,
50338
],
"childrenIds": [
50341,
50346,
50351,
50355,
50358
],
"properties": [],
"isHidden": false,
"depth": 2,
"supportedFilter": [
"size",
"material",
"pattern"
],
"parent": {
"id": 50337,
"path": "/women",
"name": "Women",
"slug": "women",
"parentId": 0,
"rootlineIds": [
50337
],
"childrenIds": [
50338,
50342,
50359
],
"properties": [],
"isHidden": false,
"depth": 1,
"supportedFilter": [],
"shopLevelCustomData": {},
"countryLevelCustomData": {}
},
"shopLevelCustomData": {},
"countryLevelCustomData": {}
},
"shopLevelCustomData": {},
"countryLevelCustomData": {},
"children": []
},
"filters": [
{
"type": "attribute",
"attributeFilter": {
"group": {
"id": 1000,
"key": "color",
"label": "Color",
"type": "",
"multiSelect": true
},
"values": [
{
"id": 32,
"value": "schwarz",
"label": "Black"
}
]
}
},
{
"type": "attribute",
"attributeFilter": {
"group": {
"id": 1001,
"key": "size",
"label": "Size",
"type": "size",
"multiSelect": false
},
"values": [
{
"id": 36,
"value": "m",
"label": "M"
},
{
"id": 2305,
"value": "sm",
"label": "S/M"
},
{
"id": 2367,
"value": "ml",
"label": "M/L"
}
]
}
}
]
}
}
Product search response
This JSON structure represents a typical response for a product search:
{
"type": "product",
"productSuggestion": {
"product": {
"id": 205668,
"isActive": true,
"isSoldOut": false,
"isNew": false,
"createdAt": "2024-07-12T23:13:34+00:00",
"updatedAt": "2025-01-28T10:05:39+00:00",
"indexedAt": "2025-01-28T12:31:36+00:00",
"firstLiveAt": "2024-09-18T09:14:39+00:00",
"masterKey": "ADT8495-130",
"referenceKey": "ADT8495001",
"attributes": {
"color": {
"id": 1000,
"key": "color",
"label": "Color",
"type": "",
"multiSelect": true,
"values": [
{
"id": 13,
"label": "Blue",
"value": "blau"
}
]
},
"brand": {
"id": 550,
"key": "brand",
"label": "Brand",
"type": "",
"multiSelect": false,
"values": {
"id": 2259,
"label": "ADIDAS ORIGINALS",
"value": "adidas_originals"
}
},
"name": {
"id": 20005,
"key": "name",
"label": "Name",
"type": "",
"multiSelect": false,
"values": {
"id": 20005,
"label": "Between-Season Jacket '3 STRIPE'",
"value": "name"
}
}
},
"images": [
{
"hash": "images/f456e2de32948df8dd9c4aadac624bb0.png",
"attributes": {
"primaryImage": {
"id": 7061,
"key": "primaryImage",
"label": "Primary Image",
"type": "",
"multiSelect": false,
"values": {
"id": 2433,
"label": "true",
"value": "true"
}
}
}
},
{
"hash": "images/a08582b1efcde42f7a46918526e36f9d.jpg",
"attributes": {
"primaryImage": {
"id": 7061,
"key": "primaryImage",
"label": "Primary Image",
"type": "",
"multiSelect": false,
"values": {
"id": 2433,
"label": "true",
"value": "true"
}
}
}
},
{
"hash": "images/5d70e9ac60fc39fa5bae57f83b2dc461.jpg",
"attributes": {}
},
{
"hash": "images/c7730b0aaf095952eeb04bdab1fadc39.jpg",
"attributes": {}
},
{
"hash": "images/aa2ffae7607503c03cc9605807adbaf1.jpg",
"attributes": {}
}
],
"priceRange": {
"min": {
"currencyCode": "USD",
"withTax": 6990,
"withoutTax": 6990,
"recommendedRetailPrice": null,
"tax": {
"vat": {
"amount": 0,
"rate": 0
}
},
"appliedReductions": [
{
"category": "sale",
"type": "relative",
"amount": {
"relative": 0.41,
"absoluteWithTax": 4910
}
}
]
},
"max": {
"currencyCode": "USD",
"withTax": 6990,
"withoutTax": 6990,
"recommendedRetailPrice": null,
"tax": {
"vat": {
"amount": 0,
"rate": 0
}
},
"appliedReductions": [
{
"category": "sale",
"type": "relative",
"amount": {
"relative": 0.41,
"absoluteWithTax": 4910
}
}
]
}
},
"lowestPriorPrice": {
"withTax": null,
"relativeDifferenceToPrice": null
},
"siblings": [],
"categories": [
[
{
"categoryId": 50337,
"categoryName": "Women",
"categorySlug": "women",
"categoryUrl": "/women",
"categoryHidden": false,
"categoryProperties": []
}
]
],
"customData": {}
}
}
}
Page search response
This JSON structure represents a typical response for a page search:
{
"type": "navigationItem",
"navigationItemSuggestion": {
"navigationItem": {
"id": 5860,
"assets": {},
"name": "FAQ",
"visibleFrom": null,
"visibleTo": null,
"children": [],
"customData": {
"mandatory-nav-string": "default text"
},
"type": "individual-link",
"options": {
"url": "/s/faq",
"isOpenInNewWindow": false
},
"filters": []
}
}
}
For more information on the SCAYLE Search API and its configuration, see the Developer Guide.
