unbxd-reactsearch

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 $