Right guys - I’ve finally done it. I’ve built an instant search for my site that I can stylize on my own and is also free! Quick note, rushing through this guide. No idea how to share some of the code properly (amateur hour) - if someone can help with formatting, I’ll make the changes.
You might have come across Algolia before - here’s a quick guide.
Disclaimer - I have a very very basic knowledge of Java Script. There will be better ways to do this - so please add to this guide.
The key Algolia guide you’ll need is here and the other relevant docs for adding more widgets can be found here.
As some background, Algolia provides insanely fast search results and provides users with the ability to stylise results easily and use other prebuilt ‘widgets’ like hierarchical categories, pagination, sliders etc to refine results. You can upload results in CSV (that’s what I did) or use other tools like Python to upload the date.
You can find a live version of the website here and the preview link here
Process:
-
I downloaded my sitemap (had about 3k records to search) and just created categories, headings, descriptions and relevant links in excel.
-
Login to Algolia, fairly straightforward - do the walkthrough and upload your data or use their own if you CBA and everything you need will be in the “Indices” tab. In the “Browse” tab you can see an overview of your data, you can search through the data and you can see what the JSON looks like when you click the “<> Raw” button
-
Go to the “Ranking” tab and put in the relevant attributes that you want to search (like Product Name, Description etc), change ranking formula accordingly then little to no change on this page.
-
“Display” is the vital tab. For attributes for faceting put in all the different attributes that you want to create anything like categories for. Under atttributes to retrieve - put in everything that you’d like to use in some way in the end search results - even URLs etc.
-
Let’s build!
-
Headover to Webflow to the page where you’d like to include search. Click the Cog icon/ edit page details. Under the custom code section, you’re going to stick the Javascript content from my codepen here into the “Before /Body Tag” section of the page (Review the Algolia guide too which should help explain further)
-
Go back to Algolia and go into the “API Keys” section on the left. This is where you need to grab your “Application ID” and “Search Only Key” (make sure you change from mine) and then put in the relevant name of whatever you’ve called your Index/ Indices.
-
Click into the main page, create an HTML embed element, now take the code in the HTML section of my codepen here. Each of the items in {{{ }}} are the relevant items I want to show from Algolia - go back to your Indices in Algolia and click the button to see how the items are configured.
-
Change the defined heading and div classes in my code to the relevant versions you’d like to use from your classes for the search results (I basically created a div block that I styled to the format that I wanted search results to look)
-
For each of the widgets that you’ve added - 4 in total - “hits3”, “search-input3”, “pagination3” and “categories” - create a new HTML embed element for each of these widgets and under the settings tab for each of them, change object ID to the relevant tag above. Then for hits3, pagination3 and categories, within the embed element use the below.
<div id="hits"> </div> <div>
You should hopefully be up and running I think - let me know if I’ve missed something.
Big shoutout to @samliew who helped me with the first part of this and also all the great webflow staff for all their responses to my queries - you can find my original post here
