Add the ability for users to favourite items in InstantSearch Js

Hi,

I’m using Laravel & InstantSearch Js for my search.

I want to add the ability for users to “Favourite” or “Remove from Favourites” items in my search.

I achieved this previously when I was using VueInstantSearch.

I’d set my previous search up so that the favouritng aspect did these things

  • Allowed users to add items to their favourites
  • Allowed users to remove items form their favourites
  • Checked if a users was loged in, if not when clicked would simply link them to the login page
  • The search would automatically check which items the user had favourited and indicated this on the items while the search updated

An example for that last point is, a filled heart would appear on an item if it was favourited and a non filled heart would appear if not and this would update everytime the search did i.e. if the user moved from page one of the search to page two and then back to page one if they’d favourited an item on page one the search would indicate that.

I was just hoping for if there is a simple way to achieve this with InstantSearch Js because I beilve the way I did it with Vue was not ideal.

I’ve noticed in the documention “Insights” might be the way to go.

I apperacticate the length of this post so thanks a lot in advance for any help.

Alex

Hi @alex8,

This is not something that comes out of the box with our instantsearch. You would need to customize the ui to handle this and then store the favorites in your database.

The attributes sent to your Algolia index should be only those that help with the search or the display, but it should not be used as a database. You could store the favorites in your index, but you would need to keep up with which users had marked them as favorites and only show it as a favorite to that specific user. This might require considerable customization to instantsearch and may work better coming from your data source.

It sounds like your Vue solution might be the best way to do this.

Hi @cindy.cullen,

Thanks for your reply.

I’m going to attempt to redo my Vue component using vanilla js or jQuery for my use of InstantSearch js.

I’m using PHP to check if I have an authenticated user and if they have favourited items these will be loaded from the database and converted to JSON for my js to work with.

I’m then conditionally checking for each result if that result is included in that list of favourited items.

If the item is not on the user’s favourite list I’m displaying a button with a js on click function which is below allowing the user to add the item to their favourites.

function shortlistProfile(slug) {

    axios.post('/shortlist/'+slug)
    .then(response => this.isShortlisted = true)
    .catch(response => console.log(response.data));

    search.refresh();
  
}

This works but I want to refresh the search so that the newly favourited result loads the template I’m using for already favourited items.

It appears the function search.refresh(); isn’t working I think this is a scope issue.

I was wondering if you have any advise on how to use that function correctly inside of another custom function like I’m trying to do?

Thanks in advance for any help.

Hi @alex8,

I think this documentation may help, if I’ve understood your use case correctly.

Hi @cindy.cullen,

Thanks for your reply.

FYI I’m using InstantSearch Js, not Vue InstantSearch (you linked me to the Vue docs).

My search variable is a const but when I try to trigger search.refresh(); in a function it does nothing, could you think why this is the case?

This is the button in the search that onclick triggers the function.

<button onclick="shortlistProfile('${ data.slug }')">Add to shortlist</button>

This is the function that onclick event triggers.

 function shortlistProfile(slug) {

    axios.post('/shortlist/'+slug).then(function () {
      search.refresh();
    });
  
}

Thank you very much for your continued help.