react-instantsearch-dom#InfiniteHits JavaScript Examples
The following examples show how to use
react-instantsearch-dom#InfiniteHits.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From plataforma-sabia with MIT License | 5 votes |
|
ListItems = ({
title,
searchPlaceholder,
indexName,
searchState,
resultsState,
onSearchStateChange,
createURL,
onSearchParameters,
widgetsCollector,
searchComponents: { sortBy, hits },
}) => {
return (
<AlgoliaSearchProvider
indexName={indexName}
searchState={searchState}
resultsState={resultsState}
onSearchStateChange={onSearchStateChange}
createURL={createURL}
onSearchParameters={onSearchParameters}
widgetsCollector={widgetsCollector}
>
<ThemeProvider>
<S.Wrapper>
<S.Container>
<S.Top>
<S.Title>{title}</S.Title>
<DebouncedSearchBox placeholder={searchPlaceholder} secondary />
<S.SortWrapper>
<FiFilter />
<span>Ordenar por:</span>
<SortBy
defaultRefinement={sortBy.defaultRefinement}
items={sortBy.items}
/>
<HitsPerPage
items={[
{
label: '4 resultados por página',
value: 4,
},
]}
defaultRefinement={4}
/>
</S.SortWrapper>
</S.Top>
<S.Content>
<InfiniteHits
hitComponent={hits.component}
translations={{
loadMore: hits.loadMore,
}}
/>
</S.Content>
</S.Container>
</S.Wrapper>
</ThemeProvider>
</AlgoliaSearchProvider>
);
}
Example #2
| Source File: AlgoliaProductList.jsx From emprezzo with MIT License | 4 votes |
|
AlgoliaProductList = ({ defaultFilter, defaultSearchTerm, itemsPerPage, hideLeftPanel, hideCTAButton, showClearFilter, facetsToShow, showSearchBox, showSearchSuggestions, searchIndexName, enableShopProductSwitch, enableCart, noResultMessage }) => {
const [currentIndexName, setCurrentIndexName] = React.useState(searchIndexName || `empProducts`)
const changeCurrentIndexName = (e) => { setCurrentIndexName(e.target.value); setCurrentSuggestionIndexName(getSuggestionIndex(e.target.value)); setSuggestionQuery(''); }
const getSuggestionIndex = (mainIndexName) => {
if (mainIndexName == 'empProducts') return ('empProducts_query_suggestions');
if (mainIndexName == 'uncommonry') return ('uncommonry_query_suggestions')
}
const [currentSuggestionIndexName, setCurrentSuggestionIndexName] = React.useState(getSuggestionIndex(currentIndexName))
const [suggestionQuery, setSuggestionQuery] = React.useState();
const algoliaClient = algoliasearch(
process.env.GATSBY_ALGOLIA_APP_ID,
process.env.GATSBY_ALGOLIA_SEARCH_KEY
);
const searchClient = {
search(requests) {
if (requests.length > 0 && defaultSearchTerm) requests[0].params.query = defaultSearchTerm
return algoliaClient.search(requests);
},
};
noResultMessage = noResultMessage || `No result found`;
enableCart = enableCart || false;
itemsPerPage = itemsPerPage || 12;
aa('init', {
appId: process.env.GATSBY_ALGOLIA_APP_ID,
apiKey: process.env.GATSBY_ALGOLIA_SEARCH_KEY
});
const [currentHitComponent, setCurrentHitComponent] = React.useState();
React.useEffect(() => {
if (currentIndexName == 'empProducts') setCurrentHitComponent(() => connectHitInsights(aa)(AlgoliaProductItem));
if (currentIndexName == 'uncommonry') setCurrentHitComponent(() => connectHitInsights(aa)(AlgoliaUncommonryItem));
if (currentIndexName == 'emails') setCurrentHitComponent(() => connectHitInsights(aa)(AlgoliaEmailsItem));
}, [currentIndexName]);
const AlgoliaSuggestions = ({ hit }) => {
return (
<a href="javascript:" onClick={() => setSuggestionQuery(hit.query)}>{hit.query}</a>
);
}
return (
<SearchWrapper>
{!enableCart &&
<Global
styles={css`
.cart-section {
display: none;
}
`}
/>
}
<InstantSearch indexName={currentIndexName} searchClient={searchClient}>
<VirtualSearchBox defaultRefinement={suggestionQuery} />
{!hideLeftPanel &&
<LeftPanel>
{showClearFilter &&
<ClearRefinements />
}
{facetsToShow && facetsToShow.indexOf("category") >= 0 &&
<>
<FilterHeading>Category</FilterHeading>
<RefinementList attribute="shopCategory" showMore='true' limit='5' />
</>
}
{facetsToShow && facetsToShow.indexOf("brands") >= 0 && currentIndexName != 'uncommonry' &&
<>
<FilterHeading>Brands</FilterHeading>
<RefinementList attribute="shopName" showMore='true' limit='5' />
</>
}
{facetsToShow && facetsToShow.indexOf("payments") >= 0 && currentIndexName == 'uncommonry' &&
<>
<FilterHeading>Payments</FilterHeading>
<RefinementList
attribute="shopifyPay"
transformItems={items =>
items.filter(item => (item.label == '1')).map(item => ({
...item,
label: "Shop Pay",
}))
}
/>
<RefinementList
attribute="paypal"
transformItems={items =>
items.filter(item => (item.label == '1')).map(item => ({
...item,
label: "Paypal",
}))
}
/>
<RefinementList
attribute="applePay"
transformItems={items =>
items.filter(item => (item.label == '1')).map(item => ({
...item,
label: "Apple Pay",
}))
}
/>
<RefinementList
attribute="amazonPay"
transformItems={items =>
items.filter(item => (item.label == '1')).map(item => ({
...item,
label: "Amazon Pay",
}))
}
/>
</>
}
{facetsToShow && facetsToShow.indexOf("pricerangeslider") >= 0 && currentIndexName == 'uncommonry' &&
<>
<FilterHeading>Average Price</FilterHeading>
<AlgoliaRangeSlider attribute="price" />
</>
}
{facetsToShow && facetsToShow.indexOf("prices") >= 0 && currentIndexName == 'empProducts' &&
<>
<FilterHeading>Prices</FilterHeading>
<NumericMenu
attribute="price"
items={[
{ label: 'All' },
{ label: 'Under $50', end: 50 },
{ label: '$50 - $100', start: 50, end: 100 },
{ label: '$100 - $200', start: 100, end: 200 },
{ label: '$200+', start: 200 },
]}
/>
</>
}
{/*
{facetsToShow && facetsToShow.indexOf("giftcard") >= 0 && currentIndexName == 'empProducts' &&
<>
<FilterHeading>Gift Card</FilterHeading>
<RefinementList
attribute="name"
transformItems={items =>
items.filter(item => (item.label.toLowerCase().indexOf('gift') >= 0))
}
/>
</>
}
{facetsToShow && facetsToShow.indexOf("gifimage") >= 0 && currentIndexName == 'empProducts' &&
<>
<FilterHeading>GIF</FilterHeading>
<RefinementList
attribute="imageURL"
transformItems={items =>
items.filter(item => (item.label.indexOf('.gif') >= 0)).map(item => ({
...item,
label: "GIF",
}))
}
/>
</>
}
*/}
{facetsToShow && facetsToShow.indexOf("storeoffers") >= 0 &&
<>
<FilterHeading>Store Offers</FilterHeading>
<RefinementList
attribute="freeShipMin"
transformItems={items =>
items.filter(item => (item.label == 0)).map(item => ({
...item,
label: "Free Shipping",
}))
}
/>
<RefinementList
attribute="returnShipFree"
transformItems={items =>
items.filter(item => (item.label == 'Yes')).map(item => ({
...item,
label: "Free Returns",
}))
}
/>
</>
}
</LeftPanel>
}
<RightPanel>
<Configure clickAnalytics={true} hitsPerPage={itemsPerPage} filters={defaultFilter} />
<div class="searchline">
<div class="indexSelect">
{enableShopProductSwitch &&
<div style={{ paddingBottom: '0.75rem' }}>
<select value={currentIndexName} onChange={changeCurrentIndexName}>
<option value="uncommonry">Shops</option>
<option value="empProducts">Products</option>
</select>
</div>
}
</div>
{facetsToShow && facetsToShow.indexOf("onsale") >= 0 &&
<div class="saleFacet">
<RefinementList
attribute="onSale"
transformItems={items =>
items.filter(item => (item.label == '1')).map(item => ({
...item,
label: "On Sale",
}))
}
/>
</div>
}
<div class="searchContainer">
{showSearchBox &&
<>
<SearchBox defaultRefinement={suggestionQuery} />
</>
}<br style={{ clear: 'both' }} />
{showSearchSuggestions && currentSuggestionIndexName &&
<span style={{ 'font-weight': 'bold', 'padding': '0 1em 1em 0' }}>Trending </span>
}
{showSearchSuggestions && currentSuggestionIndexName &&
<div className="suggestions">
<InstantSearch
searchClient={searchClient}
indexName={currentSuggestionIndexName}
>
<Configure hitsPerPage={5} />
<InfiniteHits hitComponent={AlgoliaSuggestions} />
</InstantSearch>
</div>
}
</div>
{!hideCTAButton &&
<div class="giftCard">
<BuyGiftCard />
</div>
}
</div>
<AlgoliaStateResults noResultMessage={noResultMessage} />
<Hits hitComponent={currentHitComponent} />
<Pagination />
</RightPanel>
</InstantSearch>
</SearchWrapper>
);
}
