Vue-storefront: Integrate Algolia search instead of current Search Component

[filrak]

https://community.algolia.com/vue-instantsearch/getting-started/getting-started.html it comes with Vue components out of the box so it shouldnt take much time

• [ ] Remove current search component
• [ ] Add Algolia search as an extension ( here are the instructions how to do it)
• [ ] repalce current searches in catalog and default theme to new one

[RIanDeLaCruz]

Hi! I've seen the project. I haven't really been able to use it in a project of my own. but I'm interested in working on this.

[filrak]

@RIanDeLaCruz great. Feel free to assign yourself :)

[RIanDeLaCruz]

@filrak I think I have to be a contributor to assign myself?

[HRR1337]

Algolia search can also be used for the categories (filtering, sorting and search inside categorie) see a demo here: https://magento2.algolia.com/women/tops-women/hoodies-and-sweatshirts-women.html
And here is the magento 2 extension: https://github.com/algolia/algoliasearch-magento-2

Maybe it is possible that we can choose what we want in categories? (default / Algolia)

[pkarw]

Could you please draft in bullet points the solution you like to implement here (which classes to modify etc) to get the approval?

This is serious enhancement and should be done right :)

I mean - I think for starter we need to just override the Search components not the whole catalog. This should be implemented as an extension

[RIanDeLaCruz]

Alright. I'll work on that plan @pkarw

[filrak]

@RIanDeLaCruz how the things are going, do you need any help?

[RIanDeLaCruz]

@pkarw @filrak Sorry for the delay.

Looking over the project, we could definitely implement it as an extension.

Users would have to do the following, when using this extension:
1) Have their own Algolia account
2) Install the Algolia extension for their platform, ie Magento

• This is necessary for Algolia to be able to index the site
  3) Configure the keys for the extension and in the configuration json in the project

As for implementation, complexity would depend on SSR
If there is no SSR, it would be pretty straightforward to use the vue component by Algolia
If there is SSR, work would need to be done to create a store

Also, I was wondering why this would be a feature if we already have Elasticsearch within the entire architecture? Algolia would be redundant

[pkarw]

Rlan it would be very hard to replace the whole ES feature by Algolia - this make no sense as we're using ES as a database.

I see Algolia as a replacement for text search feature of VS (This Sidebar that's opened while you do search). Just like that. So you need to create an extension exposing this Search component probably. I think you don't have to worry about SSR at this point

It still make sense - because depending on the site many conversions came from Search - and Algolia works much better than plain Elastic

[RIanDeLaCruz]

To clarify, we just need the Algolia UI? @pkarw

[pkarw]

I thought that we'll use Algolia API to get the results and display them in one of the Vue.js components

[RIanDeLaCruz]

I was asking my question because of
"it would be very hard to replace the whole ES feature by Algolia - this make no sense as we're using ES as a database"

What did you mean?

[moksahero]

hi I have been researching on this issue. I think I can work on those steps.

1. Installing VS and Magento on a server
   https://divanteltd.github.io/vue-storefront/guide/installation/magento.html#integrating-magento2-with-your-local-instance

2. Add Algolia for Magento2 extension
   https://community.algolia.com/magento/doc/m2/getting-started/

3. Setup index queue cron job to sync data between Magento and Algolia every five mins.
   https://community.algolia.com/magento/doc/m1/indexing-queue/

4. Modify search module of VS to reference Algolia instead of ES.

Can anybody confirm this is a good steps to implement?

[pkarw]

I think it's a good approach. What I would suggest is that probably You need to create a new VS Module like "algolia-search" - and create a UI for search there (kind of https://github.com/DivanteLtd/vue-storefront/blob/master/core/modules/catalog/components/Search.ts). This new UI should call Algolia API methods thru Vuex datastore provided by this new module. Then You'd be able to use these UI components in the theme

@filrak would You like to add something in here?

[dimasch]

@filrak @pkarw Ready the first version of module for Algolia https://github.com/Interactivated/vsf-algolia-search
Pls, add feedback.
Thanks.

[dimasch]

PS: I will improve documentation and implement load more feature.

[pkarw]

Great job Dima! Thanks!