|
1 | | -// By default, the classic theme does not provide any SearchBar implementation |
2 | | -// If you swizzled this, it is your responsibility to provide an implementation |
3 | | -// Tip: swizzle the SearchBar from the Algolia theme for inspiration: |
4 | | -// npm run swizzle @docusaurus/theme-search-algolia SearchBar |
5 | | -export {default} from '@docusaurus/Noop'; |
6 | | -import 'instantsearch.css/themes/satellite.css'; |
| 1 | +import React from 'react'; |
| 2 | +import SearchBar from '@theme-original/SearchBar'; |
7 | 3 |
|
8 | | -import algoliasearch from 'algoliasearch/lite'; |
9 | | -import { |
10 | | - InstantSearch, |
11 | | - SearchBox, |
12 | | - Hits, |
13 | | - Highlight, |
14 | | - RefinementList, |
15 | | -} from 'react-instantsearch-hooks-web'; |
16 | | - |
17 | | -const searchClient = algoliasearch('2SJPGMLW1Q', 'fb2f4e1fb40f962900631121cb365549'); |
18 | | - |
19 | | -// ... |
20 | | - |
21 | | -function App() { |
22 | | - return ( |
23 | | - <InstantSearch searchClient={searchClient} indexName="crawler_sumodocs"> |
24 | | - <SearchBox /> |
25 | | - <RefinementList attribute="tags" /> |
26 | | - <Hits hitComponent={Hit} /> |
27 | | - </InstantSearch> |
28 | | - ); |
29 | | -} |
30 | | - |
31 | | -import { Configure } from 'react-instantsearch'; |
32 | | - |
33 | | -<Configure |
34 | | - clickAnalytics={true} |
35 | | - userToken={'user-1'} |
36 | | -/> |
37 | | - |
38 | | -import { Hits } from 'react-instantsearch'; |
39 | | - |
40 | | -const indexName = crawler_sumodocs; |
41 | | - |
42 | | -function Hit({ hit }) { |
| 4 | +export default function SearchBarWrapper(props) { |
43 | 5 | return ( |
44 | | - <div |
45 | | - data-insights-object-id={hit.objectID} |
46 | | - data-insights-position={hit.__position} |
47 | | - data-insights-query-id={hit.__queryID} |
48 | | - > |
49 | | - {/* ... */} |
50 | | - </div> |
| 6 | + <> |
| 7 | + <SearchBar {...props} /> |
| 8 | + </> |
51 | 9 | ); |
52 | 10 | } |
53 | | - |
54 | | -// ... |
55 | | - |
56 | | -<div data-insights-index={indexName}> |
57 | | - {/* ... */} |
58 | | - <Hits hitComponent={Hit} /> |
59 | | -</div> |
60 | | - |
61 | | - |
62 | | -window.dataLayer.push({ |
63 | | - algoliaUserToken: 'user-1', |
64 | | -}); |
65 | | - |
66 | | -aa('onUserTokenChange', (userToken) => { |
67 | | - window.dataLayer.push({ |
68 | | - algoliaUserToken: userToken, |
69 | | - }); |
70 | | -}, { immediate: true }); |
71 | | - |
72 | | -<InstantSearch |
73 | | - insights={{ |
74 | | - onEvent(event) { |
75 | | - const { widgetType, eventType, payload, hits } = event; |
76 | | - |
77 | | - if (widgetType === 'ais.hits' && eventType === 'view') { |
78 | | - dataLayer.push({ event: 'Hits Viewed' }); |
79 | | - } |
80 | | - } |
81 | | - }} |
82 | | -/> |
0 commit comments