Search

SCAYLE Search prioritizes category pages. When a user initiates a search, the system attempts to match the search term to a specific shop category with relevant filterable attribute groups. If no exact category match is found, a search result page is generated displaying various products. Additionally, category suggestions are presented to the user as they begin typing their search term.

Centralized Search Data Management

To simplify search functionality and improve maintainability, we use a centralized composable called useSearchData. This composable acts as a proxy for the useStorefrontSearch composable, centralizing all search-related data and logic. The key benefit of useSearchData is its management of the searchQuery. Additionally, useSearchData provides access to various search computations, debounced suggestions, and resolved routes, promoting code reusability and reducing redundancy.

Search Suggestions

Search suggestions are retrieved using the getSearchSuggestion the method provided by the centralized useStorefrontSearch composable from the storefront-nuxt package. There are two main suggestion types:

Product Suggestions

These suggestions appear when a user enters a product ID in the search bar. This ID should correspond to either the productId or referenceKey of a product variant.

Category Suggestions

These suggestions are the primary focus of the new search engine. As the user types in a category-like term, category suggestions are displayed on the user interface. If the term includes filters, each category suggestion will visually indicate which filters are applicable. Clicking on a suggestion redirects the user to the category page with the chosen filters applied.

Search Resolve

A resolved search term is a single product or category (with or without filters). This term is retrieved using the resolveSearch method and available in the useStorefrontSearch composable. The method is triggered when the user presses "enter" on the search interface. If resolveSearch returns no results, the user is redirected to a search page that displays results matching the entire entered term.
\

Category page with filters applied after on enter hit

Search filters are a new feature associated with category search entities. When a user types in a category term along with additional filters, a filters array containing filter information is retrieved within the search response.

Here's an example of the JSON structure of the filters array:

[
  {
    "type": "attribute",
    "attributeFilter": {
      "group": {
        "id": 1001,
        "key": "color",
        "label": "Detail Color",
        "type": "",
        "multiSelect": false
      },
      "values": [
        {
          "id": 10,
          "value": "blau",
          "label": "Blau"
        }
      ]
    }
  }
]

The groupSearchCategoryFiltersByKey utility (provided by our current Storefront Boilerplate implementation) simplifies parsing this data. Once parsed, the data is serialized and applied when redirecting the user to the relevant category route. We also offer the getSearchFilterLabels utility, which extracts all applicable filter labels displayed for each category suggestion item.

Flow Diagram

Search data

Category search response

This JSON structure represents a typical response for a category search:

{
  "type": "category",
  "categorySuggestion": {
    "category": {
      "id": 2049,
      "path": "/women/shoes",
      "name": "Shoes",
      "slug": "shoes",
      "parentId": 2045,
      "rootlineIds": [
        2045,
        2049
      ],
      "childrenIds": [],
      "properties": [],
      "isHidden": false,
      "depth": 2,
      "supportedFilter": [
        "color",
        "size",
        "brand"
      ],
      "shopLevelCustomData": {},
      "countryLevelCustomData": {},
      "children": []
    },
    "filters": [
      {
        "type": "attribute",
        "attributeFilter": {
          "group": {
            "id": 1001,
            "key": "color",
            "label": "Detail Color",
            "type": "",
            "multiSelect": false
          },
          "values": [
            {
              "id": 10,
              "value": "blau",
              "label": "Blau"
            }
          ]
        }
      }
    ]
  }
}

Product search response

This JSON structure represents a typical response for a product search:

{
  "type": "product",
  "productSuggestion": {
    "product": {
      "id": 1,
      "isActive": true,
      "isSoldOut": false,
      "isNew": false,
      "createdAt": "2022-03-24T10:47:18+00:00",
      "updatedAt": "2024-02-07T08:19:23+00:00",
      "indexedAt": "2024-04-16T08:37:02+00:00",
      "firstLiveAt": "2022-04-04T09:39:33+00:00",
      "masterKey": "CAK1069004000001",
      "referenceKey": "CAK1069004000001",
      "images": [
        {
          "hash": "images/cce0fde26236e20b7a7eae383f947ae7.png"
        },
        {
          "hash": "images/20b25319a9f4996f6716df883b5d10e5.png"
        },
        {
          "hash": "images/07f12f7108b266888f9a77318e1e7551.png"
        }
      ],
      "customData": {}
    }
  }
}