{"id":118,"date":"2019-09-25T07:29:22","date_gmt":"2019-09-25T07:29:22","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=118"},"modified":"2019-11-13T07:24:01","modified_gmt":"2019-11-13T07:24:01","slug":"instant-search-with-algolia","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/instant-search-with-algolia\/","title":{"rendered":"Instant Search With Algolia"},"content":{"rendered":"\n

We have used shop page example to integrate instant search. There is a lot of other pre-made demo examples on the official doc<\/a>. In Reactify you can see the demo on this url https:\/\/reactify.theironnetwork.org\/app\/ecommerce\/shop<\/a>.<\/p>\n\n\n\n

Getting Started:<\/strong><\/p>\n\n\n\n

Step 1:<\/strong> Create an account on Algolia<\/a>. <\/p>\n\n\n\n

Step 2:<\/strong> After Signup you will get the 14 days trial and you will update the plan according to your requirements. Reference Link : <\/strong>https:\/\/www.algolia.com\/pricing<\/a><\/p>\n\n\n\n

Step 3:<\/strong> Create an Index on Algolia Dashboard by clicking on the indices tab from the left menu and then clicking on create index button. Please check the screenshot below for reference:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Step 4:<\/strong> Add your products fields with values under the newly created Index.\n\n<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Step 5: <\/strong>You need to change your app name in the manage applications page. Just open the given url, edit the app and give your app a name. This app name is used in the template. <\/p>\n\n\n\n

\n\t\n\t\t
\n\t\t\t
Sign in<\/h6>\n\t\t\t

Algolia’s Search API makes it easy to deliver a great search experience in your apps & websites. Algolia Search provides hosted full-text, numerical, faceted and geolocalized search.<\/p>\n\t\t\twww.algolia.com<\/small>\n\t\t<\/div>\n\t\t

<\/div>\n\t<\/a>\n<\/div>\n\n\n\n

Step 6:<\/strong> Now open the API keys tab from the left menu and copy the Search-Only API Key<\/code> , now open the src->routes->ecommerce->shop->index.js<\/code>file from the template and paste the credentials in the apiKey<\/code>, indexName<\/code> with the index you have created & appId<\/code> with the app name you have given to your app in step 5.<\/p>\n\n\n\n

<InstantSearch
   appId=\"<app name>\" \/\/ created in step 5
   apiKey=\"<api key>\" \/\/ copied in step 6
   indexName=\"<index name>\" \/\/ created in step 3
>
<\/InstantSearch> <\/pre>\n\n\n\n
To get more information about algolia instant search check the official document<\/a>.<\/p>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n    1    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
We have used shop page example to integrate instant search. There is a lot of other pre-made demo examples on the official doc. In Reactify you can see the demo on this url https:\/\/reactify.theironnetwork.org\/app\/ecommerce\/shop. Getting Started: Step 1: Create an account on Algolia. Step 2: After Signup you will get the 14 days trial and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":37,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/118"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":13,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/118\/revisions"}],"predecessor-version":[{"id":714,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/118\/revisions\/714"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}