Results
The Results
component is used to display results response from a search query.
Usage
Additional imports used in the examples:
Editable Example
Loading...
Grid display
Editable Example
Loading...
Product status
Currently three statuses are being supported, they are "out of stock", "sale" and "new arrival", they are hidden by default, to show them pass the showStatus
prop,
See below list for implementation logic, the product will be:
- Out of stock if the
quantity
is 0. - On sale if the
price
is lower thanoriginalPrice
. - A new arrival if its
createdAt
is within 30 days to the current date.
Editable Example
Loading...
Custom templating
You can opt-out of Search.io's default result design and go with your own, simply pass an object containing a html
and css
property via the template
prop. Use the {{ expression }}
syntax to embed your result's value. We're using Tempura as the template engine, learn more about the syntax here.
Editable Example
Loading...
Helpers
When using custom templating, a number of helpers are available to help you in writing the template, they are:
join
- join an list of stringsdate
- format the ISO date string into human-readable string (UTC only)
Editable Example
Loading...
Props
Name | Type | Default | Description |
---|---|---|---|
appearance | list | grid | The controlled value, passing this means you're ignoring the value in context. | |
defaultAppearance | list | grid | list | The uncontrolled value, will override the context value on mount. |
showImage | boolean | true | Sets to show images |
showVariantImage | boolean | false | Sets to show variant images |
showStatus | boolean | false | Sets to show statuses |
imageAspectRatio | number | { list: number, grid: number} | 1 | The aspect ratio to force images to render to. |
imageObjectFit | string | { list: string, grid: string } | contain | The aspect ratio to force images to render to. Valid objectFit values can be found in image props. |
resultTemplate | {html: string, css: string} | The template code use to render a single result item. | |
resultContainerTemplateElement | "div" \| "p" \| ... | "div" | The html element which will wrap each resultTemplate . |
onResetTemplate | () => void | () => {} | The callback for when the reset button was clicked. |
openNewTab | boolean | false | If true , open the result link in a new window tab. |
allowBanners | boolean | true | If true , display banners along with results. |