1.0.5 • Published 6 years ago
unbxd-reactsearch v1.0.5
react-search-sdk
Unbxd react-search component
Add unbxd react component to your project
npm install unbxd-reactsearch
Or
yarn add unbxd-reactsearch
Import the required components
import UnbxdSearch, ProductList, AutoSuggest, Facets from 'unbxd-reactsearch';
UnbxdSearch
is the parent component which accepts these props
<UnbxdSearch
apiKey={apiKey}
siteKey={siteKey}
currentSearch={{
q: 'shirt', // accepts initial search argument, default *
start: 0, // accepts offset for search, default 0
rows: 20, // number of products to be displayed
variants: false // whether to enable variants, default false
}}
>
.....
</UnbxdSearch>
UnbxdSearch Props | Definition |
---|---|
apiKey | Search APIKey |
siteKey | Search siteKey |
currentSearch | Argument object related to search configuration |
AutoSuggest
component will provide the input box where the user can type in the query and has 3 states
const keywordMapping = {
name: 'title', // title is the field in your catalog
originalPrice: 'price',
originalPriceIndex: false,
discountPrice: 'selling_price',
discountPriceIndex: false,
image: 'imageUrl',
imageArrayIndex: 0,
url: 'productUrl',
id: 'uniqueId',
promoMessage: 'promoMessage',
};
const App = () => (
<UnbxdSearch
apiKey={apiKey}
siteKey={siteKey}
currentSearch={{
q: 'shirt',
}}
>
<AutoSuggest
keywordMapping={keywordMapping}
limit={10}
/>
</UnbxdSearch>
)
Autosuggest Props | Definition |
---|---|
dropdown | whether to show results as a dropdown default true |
showThumbPreview | whether to show product thumbnail preview in the dropdown default false |
updateSearch | default false if true updates products in ProductList component and doesnt show dropdown |
placeholder | Autosuggest inout box placeholder. default What are you looking for ? |
keywordMapping | keywordmapping object the component uses default fields like name, image, price, url, id etc. Map these to fields in your catalog |
Facet
is Facet component, which will render the facet view.
When a facet is selected / deselected a new search call happens and updates the current search results. No additional props are supported by this component
<UnbxdSearch
apiKey={apiKey}
siteKey={siteKey}
currentSearch={{
q: 'shirt',
}}
>
<Facets />
</UnbxdSearch>
ProductList
This component renders the resulting product cards for the current search query, and updates when Facets
are selected or when Autosuggest
input changes with updateSearch
true
const keywordMapping = {
name: 'title', // title is the field in your catalog
originalPrice: 'price',
originalPriceIndex: false,
discountPrice: 'selling_price',
discountPriceIndex: false,
image: 'imageUrl',
imageArrayIndex: 0,
url: 'productUrl',
id: 'uniqueId',
promoMessage: 'promoMessage',
};
const App = () => (
<UnbxdSearch
apiKey={apiKey}
siteKey={siteKey}
currentSearch={{
q: 'shirt',
}}
>
<ProductList
currency="$"
keywordMapping={keywordMapping}
limit={20}
/>
</UnbxdSearch>
)
ProductList Props | Definition |
---|---|
ProductCard | This props is React component, if provided renders this component for each product, default uses Unbxd Component to display products |
InfiniteScroll | To have infinitescroll for the products, default true |
limit | how many products to be displayed per page, default 20 |
currency | currency symbol to display price, default $ |