Creating a custom refinementList component based on two facets

Open Q&A
,
#1

Hello everyone

Let’s suppose we have these two facets:

“manufacturer.url”: [“/url1”, “/url2”, “/url3”]
AND
“manufacturer.name”: [“manufacturer1”, “manufacturer2”, “manufacturer3”];

I’d like to create a custom refinmentList component which show all available facets for my hits based on manufacturers.

I used connectRefinementList(MyCustomComponent); and I set manufactuer.url to attribute property.

      <CustomManufacturerFilterRefinementList
          attribute="manufacturer.url"
          currentCategory={currentCategory}
          limit={10}
          locale={locale}
          showMore={showMore}
          searchable={searchable}
          showMoreLimit={showMoreLimit}
          translations={translations}
        />

Now users can see available manufacturers and can filter them or click on them to go to the manufacturer page, but since I fetch the manufacturer.url, I could only able to show the URL in the list, but I’d like to show manufacture’s name in the list and having URL to generate links.

Problem: how can I create a custom refinementList component which fetches data from two facets at the same time and combine them to generate a list of links?

PS: I tried to use searchForFacetValues function inside my custom component to retrvie manufacturer’s name with below query but I couldn’t map each url with name because there is no logical relation between them:

{
    "requests": [
        {
            "indexName": "stg_lots",
            "params": {
                "facetName": [
                    "manufacturer.name" 
                ],
                "filters": "manufacturer.url:\"froemag\" OR manufacturer.url:\"volvo\" OR manufacturer.url:\"fendt\" ",
                "maxFacetHits": 100

            }
        }
    ]
}

Thanks