Enhancing your webshop's search functionality with dynamic suggestions can greatly improve the user experience. This guide will walk you through the steps to implement this feature, allowing users to see relevant suggestions in real-time as they type in the search bar.

Concepts and usage

The configuration you set up in the app dictates how you should request suggestions from the API.

Suggestions do not inherit configurations: if you target a suggestion for a specific category, we will not fall back on a parent category configuration. It is recommended to set up one configuration that works for your entire instance, or at least as few as possible configurations that work for most situations.

📘

Read our product guide How do I set up Suggestions? for more details.

Implementation

To get product suggestions, send additional request to Suggestion products (or Suggestion products (grouped) in case of grouped products). The result of the product suggestions are similar to the items in navigation requests:

<suggestions xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  <name>Product suggestions</name>
  <items>
    <item>
      <itemno>60010017891001</itemno>
      <title>Charm London South Bank Schoudertas zwart</title>
      <price>17.9</price>
      <brand>Charm</brand>
      <image>/product-square-320/342253/image.jpg</image>
      <url i:nil="true"/>
      <attributes/>
    </item>
    <item>
      <itemno>6001001843-20</itemno>
      <title>Travelite Meet Backpack navy</title>
      <price>55.9</price>
      <brand>Travelite</brand>
      <image>/product-square-320/427765/image.jpg</image>
      <url i:nil="true"/>
      <attributes/>      
    </item>
  </items>
</suggestions>

The items can be directly rendered using the available information. If more information is required, the data can be retrieved in the platform using the itemno: this is the item identifier known by Tweakwise.