Product Search
The Product Search component renders an input field for searching in a store's products.
This component works in conjunction with Product List. Product Search presents a search field and redirects to a page on your site where a Product List is placed, while adding a ?search=xxx query parameter to the URL. Product List will see the parameter and automatically do the search.
Examples
- Adding a Product Search component to a page: Demo | Source Code
How to Embed
To embed this component on your website and display a search field, include the reflow library, and add the following tag somewhere in the <body> of your page:
<div data-reflow-type="product-search"></div>
Supported Attributes
You can configure the product search component via additional data-reflow-xxx attributes.
| Attribute | Possible Values | Description |
|---|---|---|
| data-reflow-type | product-search | Must always be set. |
| data-reflow-search-url | URL | (optional) Specifies the URL to redirect to after a search is made. A search parameter will be added to the url indicating the search phrase. If not set, will redirect to the current page. Add a [Product List](/docs/html-toolkit/1/product-list) component on the target page to automatically display the search results. Examples:
|
| data-reflow-show-button | boolean | (optional) Whether to show a search button next to the text field. By default it is hidden. Examples:
|
| data-reflow-button-text | string | (optional) The text of the search button. By default it is "Search". Examples:
|
| data-reflow-placeholder | string | (optional) The placeholder text for the input field. Defaults to "Search Products". Examples:
|