Get price data from external service during instantsearch query

Hi All,

I have been playing around with Algolia and have struck an roadblock I was hoping someone might be able to shed some light on.

I have many different price rules for different customers and am attempting to get the customer price displayed within the search results from my local data and not from Algolia. I’ve been playing around with the custom widget and have the following code returning the results from Algolia and from the Ajax request to my pricing API.

search.addWidget({
    render: function(opts) {
      const results = opts.results;
      document.querySelector('#hits-div').innerHTML = results.hits.map(function(h) {  
        
        {% assign productCode = '_highlightResult.CODE.value' %}
        {% assign productBrand = '_highlightResult.BRAND.value' %}
        {% assign productDescription = '_highlightResult.DESCRIPTION.value' %}
        

          $.ajax({
                          async: 'true',
                          crossDomain: 'true',
                          url: 'http://myurl' + h. {{productCode}}  + '',
                          headers: {
                              'Authorization':'Basic XXX',
                              'Content-Type':'application/json'
                          },
                          method: 'GET',
                          data: { get_param: 'value' },
                          dataType: 'json',
                          success: function (data) { 
                              $.each(data, function(index, element) {
                                  $('#price').append($('<div>', {
                                      text: element.user_price_inc_tax
                                  }));
                              });
                          }
                      }); 
         
         return '<div id="price">' + h. {{productCode}} + h. {{productBrand}}  + h. {{productDescription}} + '</div>';

        }).join('');
    }
  });

I can call the related product price element from my data using {{productCode}} in the url endpoint but am struggling to join this with the returned data from Algolia.

Has anyone a solution to this I’d love to hear your input. Thanks.

Hi @KraftyPixel,

I looked at your example but I struggle a bit to understand where the issue came from. I reproduced a small example that emulates pretty much the same use case. The main difference is that in the example I didn’t use a template engine like you do. You can find the example on CodeSandbox.

The function getPriceForProduct simulates a network request that return a fake price. Once the value is fetched we get the correct element with the help of the objectID and set the price on it. Be careful with this solution because the number of requests can quickly explode. Each time the widget will render multiple requests will be sent to your server (each render * number of hits).

An alternative approach would be to use Algolia from your backend and use InstantSearch to target your backend rather than Algolia directly. By doing this you can enrich your data more easily directly from your server rather than doing it on the client side. We have a guide in our documentation where you can learn how to implement your own client to query your backend.

Hope that helps, let me know if you have questions!

1 Like

Hi @samuel.vaillant,

Thanks so much for you advice. I’ve continued to play around with the function and got it working.
I am very mindful of your point on watching the number of requests being sent and was unaware Algolia could be run from the backend. I’ll be reading the documentation you’ve linked me too later today.

Again thanks so much for your help Samuel. I’ll let you know how I go.

@KraftyPixel I have the same need but I’m using react-instantsearch. Do you have any example?