Nested Attributes for multiple refinement lists

Hello,

I am building an e-commerce catalogue where all products have multiple Option Types. Option Types are in our case clothing sizes such as Small, Medium or Large, or US9 US10 US11 for shoes.

As the list of facets would be come long and not user friendly, we want to group all Options by their type in the UI.

I’ve created the hash as below. This way I could create one refinement list for each option type manually. However, what if I want this to happen dynamically? For example, a new size scale is created in the backend, or what if no facets exists at all? For the latter, I could hide it on no results I suppose.

size_filter = {
    shoes: {
       name: "shoes",
       presentation: "Shoe Size US",
       values: ['US8', 'US9','US10','US11']
    },
    clothing: {
       name: "Size",
       presentation: "Clothing Standard",
       values: ['S', 'M','L','XL]
    }
}

Another solution I thought of was to save an attribute as an array with objects representing sizes including their type. Subsequently, loop over item item and conditionally group them in the refinement list. As, their position in the refinement list is pure presentational for the UI.

[
   {type: 'Clothing Standard', value: 'S'},
   {type: 'Clothing Standard', value: 'M'},
   {type: 'Clothing Standard', value: 'L'},
   {type: 'Clothing Standard', value: 'XL'}
]

How would I best approach this?

Hello victor,

If I’m not mistaken you want to adapt your list of facets in the UI, depending on the products that are displayed.

I would recommend 2 things:

  • do one empty search query before to load all possibles facets (so you don’t have to maintain the actual values in your frontend)
  • conditionally displays the refinement lists with js

Then when search happen you can say:
“my results has ‘shoes’ records, I can display my facets ‘shoe size’ and it has no clothes so hide ‘clothing standard’ facets”


This is usually better understood and achieved, if you use category filtering.
That means in the UI the user click on a tab or refinement list “shoes” so the whole context is aware that the user want shoes, so you can adapt all your refinement column easily.
(e.g: not displaying the clothing standard is do not apply for shoes)

You can see that here, in our demo shop:
When you click on book you have a complete different facet filtering than on gifts.
https://www.spencerandwilliams.com/search?q=&t=type%3Abook
https://www.spencerandwilliams.com/search?q=&t=type%3Agifts

Hope this helps
best regards