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 $ |