Basic Step-by-Step Instructions

Thank you for the quick reply.

We are basically looking to keep our search interface on the front end the same, if possible, as that’s what most people are used to when it comes to a vehicle part search.

However, we hooked up with Algolia because it is a faster system for searches and updates than having it housed on our servers.

We would like to keep the search parameters to:
– Year
– Make
– Model
– Engine

The results would display the single or few results available. It would show the battery photo and model name. We also have a column in our db for remarks about the battery. We want that to display on the results as well.

What would be the best way to create that?

Yes, we use WPCE and it’s awful.

My understanding is that if we hosted our data on Algolia, we should be able to create an interface to the data from our website. Now, I’m not a programmer, so I don’t know how that part goes… but that’s what I was led to believe when having meetings with companies like Algolia, Elastic, etc.

If possible, we would like it to work the same as what we currently have because that’s kind of the industry standard for vehicle parts search:

https://www.batterysystems.net/battery-finder

https://www.battfinder.com/

https://www.autobatteries.com/en-us/car-battery-finder

https://www.interstatebatteries.com/

However, we don’t HAVE TO use that format if it’s not something that is easily deployable. I don’t mind hiring you to build the dropdown-style interface… as long as it’s not a runaway project that takes weeks and costs tens of thousands of dollars.

I don’t mind having a filterable menu on the left with parts on the right. This seems to be the way Algolia LIKES to work out of the box. If that’s what we are stuck with, I’m OK with that. I just have issues with it not working properly and have hit a wall.

I created a video of what I made via Algolia and sent it to support. Here is the video in case you would like to see it.

https://api.vadoo.tv/landing_page?vid=AB7q05WgaqeALZtGRDviQHgkO52XluGn

This is their response via email, which led me to seek additional help as programming is not my forte.

————————————–

Hi Erik,
 
For implementing Algolia Search with WordPress the best place to start is our WordPress guide. This guide walks you through the process of building your own Algolia WordPress integration using the PHP API client.
 
From the video you shared I see that you're viewing the dashboard UI demo. At this time UI demo is just for proof of concept and design planning and does not provide an export of Code to plug into your site. That being said building your InstantSearch experience will allow you to customize it to your specifications with the behavior you would like to see.
 
To build your search UI with InstantSearch and this Search UI guide will help you get started with a basic implementation. We recommend reading through our InstantSearch guide to learn the basics of what InstantSearch can do for you. InstantSearch has many different widgets which you can pick and choose from, our widget showcase is a great place to start to see which widgets you want in your UI.
 
From your video I saw a few things you mentioned that are addressed by some of our widgets. The currentRefinement widget will allow you to show your users what refinements are currently active. The clearRefinements widget will allow your users to remove all active refinements. You had also mentioned that you would like your refinementLists to be collapsable after a user made a selection. This behavior can be controlled with panel widget.
 
Lastly to allow the results of your InstantSearch to link to pages on your site or anywhere else you first need to ensure that the records all have an attribute that contains the URL you want the user to be directed too. We have a full guide on how to Format and Structure your Data, but an example record might look something like this.
 

{
“name”: “Mercedes S Series”
“url”: “https://yourwebsite.com/mercedes/S-series”
}

 
Once a record has the URL as an attribute you can access it in the hits widget item template. Here's a CodeSandBox where you can see this in action. The URL links will not redirect in CodeSandBox but the item template code is correct. The url attribute of every hit is passed to the href of the anchor tag.
 

templates: {
item: `
<article>
<a href={{url}}>
<h1>{{#helpers.highlight}}{ “attribute”: “name” }{{/helpers.highlight}}</h1>
<p>{{#helpers.highlight}}{ “attribute”: “description” }{{/helpers.highlight}}</p>
</a>
</article>

,
    },

If you have any questions please don’t hesitate to ask.
Thank you
Best Regards,
Sean
Algolia Support`

——————————

I hope that helps.