RefinementList with multipal facets attributeName

I have multipal facets object, like; attribute1,attribute2,attribute3. Now i have a question refinement list has option to pass attributeName in string at the one time for one attribute. How to get for all attribute in single refinement widget.

Please find the code below

search.addWidget(
refinmentConnector({
containerNode: $(’#facetContainer’),
attributeName: “attribute1”
})
);

Hi @nimesh.mehra, a single refinementList can only be used for a single attribute. What would you like to achieve visually? How would a refinementList on 3 attributes look like?

@vvo First of all thanks for your reply.

I have number of facets. I want run a loop and place the attribute value dynamically. So that i’ll not use refinement widget multiple times See the below code as algolia e-commerce example:-

search.addWidget(
instantsearch.widgets.refinementList({
container: ‘#types’,
attributeName: ‘type’
})
);

search.addWidget(
instantsearch.widgets.refinementList({
container: ‘#brands’,
attributeName: ‘brand’
})
);

In this example i have 2 attributeName, so that i need to write refinementList widget 2 times, if i have more than 10 facets, so according to this example i need to write 10 times refinementList widget with 10 containers.

I want a solution where i can to define the refinementlist widget only once, and all set.

@nimesh.mehra what you want to achieve is totally doable, with a simple for loop in JavaScript you could iterate on all the attributes and then add a refinement list for it.

Here’s some pseudo code:

var attributes = ['type', 'brand'];
attributes.forEach(attributeName => {
  search.addWidget(
    instantsearch.widgets.refinementList({
      attributeName
    })
  );
})

Make sure you use the latest version of InstantSearch.js as adding dynamic widgets is only doable using the latest version.

Thanks

Many thanks for reply.

after adding via loop its going in infinite loop. :frowning:

See below the code.

function _createWidget(widgetKey, isPrice) {
var genericConnector = null;
if (isPrice) {
// TODO
}
genericConnector = instantsearch.connectors.connectRefinementList(_renderFacetsSearch, function () {
// TODO: I will do my own cleanup here
});
_cache.widgets[widgetKey] = genericConnector({
attributeName: widgetKey,
containerNode: $(’.facet-container’)
});
return _cache.widgets[widgetKey];
}

function _bindFacetingEvents() {
    var args = _toArray(arguments).slice(1);
    var facets = args[0].facets;
    delete facets.Price;
    _cache.widgets = _cache.widgets || {};
    var toDelete = Object.keys(_cache.widgets);
    // Remove existing widgets
    if (toDelete.length) {
        var widgetRefs = toDelete.map(function (widgetKey) {
            return _cache.widgets[widgetKey];
        });
        _cache.search.removeWidgets(widgetRefs);
        toDelete.forEach(function (widgetKey) {
            delete _cache.widgets[widgetKey];
        });
    }
    // Add widgets
    var widgetList = Object.keys(facets).map(function (facetKey) {
        return _createWidget(facetKey, facetKey === 'Price');
    });
    _cache.search.addWidgets(widgetList);
}