priceRanges Widget attributeName Name Switch

Hello Everyone!

I’ve been working with instantsearch.js and just started to use Secure API Keys. I’m using this because depending on our customer level of login they will see different prices. I’ve been successful in sending ‘attributesToRetrieve’ (Correct price for login level) as part of my Secure API Key so far, but have run into a problem with the ‘priceRanges’ widget. Using the example provided by the documentation I’ll show you what I’m attempting/wanting to do:

First I have two prices coming in from two different Secure API Keys ‘price_retail’ and ‘price_list’.

    container: '#price-ranges',
    attributeName: 'price_list',
    labels: {
      currency: '$',
      separator: 'to',
      button: 'Go'
    templates: {
      header: 'Price'

In my code ‘attributeName’ is set to ‘price_list’ by default, but I want that to change when I switch over to the Secure API Key that uses ‘price_retail’. So far I have not been able to figure out a solution to this problem.


What you could do is instantiate both sliders and then hide/show one or another based on the user login state.

That’s what we generally recommend since there are currently no ways to dynamically add/remove widgets or update the configuration of them.

1 Like

I wanted to let everyone know how I ended up solving this problem. Since we’re using PHP I decided to use an If statement that would check the different login level of the users from out database table. From there I had PHP choose the appropriate JS file. This way I don’t have to hide any information and it always picks the right price for the user account level.

1 Like