Implement more facet fields to Algolia app

[lkostrowski]

we need all fields, that are important for shop facets to be located in Algolia, as these parts of the page are created with algolia / search data. We want to have facets for "user review stars count", "price facet", "categories", "availability". Just as a feedback on that. These are the most important fields for us. Price facet is for example "above 10$, above 20$".. Price ranges is just a regular range filter, but for that we do need the actual, discounted price as well. Not only the gross price.

Originally posted by @JannikZed in https://github.com/saleor/apps/issues/836#issuecomment-1669676273

[lkostrowski]

@krzysztofwolski please verify

@JannikZed do you recognize any more fields you like to have?

[krzysztofwolski]

@JannikZed Besides stocks (which are in dev right now), is there something missing in the app data which prevents configuring faceting in the Algolia index configuration?

[JannikZed]

I'm giving you some context on the price facet. Here is the design, that we need to implement:

The designer wants to enable a selection of priceranges, so that customers can select multiple ranges. This is hard to build "generic", as every shop might have different price categories and you will need to define the ranges manually. So I don't know, if you have some ideas on that. I can't think of any more facets for the moment, but I will let you know.

[lkostrowski]

I can imagine 2 solutions right now:

1. Save price range as a metadata. This will require you to have an app that will react on price changes and set them to metadata field. I think its a good case for metadata to allow interop between services
2. We add this to App Configuration. Can be hardcoded field (price range) - but ranges should be configurable. App will read this config on webhook and send them to Algolia. Next step can be making some abstracted "field builder"

@krzysztofwolski WDYT?

[krzysztofwolski]

Price ranges as metadata: not a fan. It's going to add additional responsibility for the app, generate additional traffic (price change will trigger additional update event). Don't think that's the right choice for this issue.

UI for the configuration: Theres a lot of options and approaches. Not sure if we have resources to create robust solution right now - even the Algolia dashboard gives basic configuration and suggest using the API directly for detailed configuration ;). As an improvement we could do right now is to add button for non-configurable example filters. It would solve basic needs and give a good starting point for further customization with the API.

@JannikZed Have you seen Algolia examples docs? Customized price buckets can be implemented with the API https://www.algolia.com/doc/guides/managing-results/refine-results/filtering/how-to/filter-by-numeric-value/#filtering-by-price-range

[tilman]

Hey @krzysztofwolski, thanks for the docs. Actually I haven't seen the range feature number: X to Y. I played a bit arround with it and together with an undocumented algolia feature I was able to create a numericFilter with multiple price ranges active. Therefore we can also implement the price range filter without any hardcoded facets. Initially I tried out number>X & number < Y wich was only working for one price range because it was not possible to combine multiple ranges with the >X/<Y filtering.

I think the priceRange facet is therefore not needed anymore because It is better when the configuration of the ranges can be done dynamically and is configured in the frontend. Only thing wich is missing now is that we only have the grossPrice but would need the discountedGrossPrice. But I guess this is on another issue?

[tilman]

Combined as and: numericFilters: ["grossPrice: 10 to 12", "grossPrice: 50 to 60"]

Combined as or (and therefore possible to filter multiple ranges as needed): numericFilters: [["grossPrice: 10 to 12", "grossPrice: 50 to 60"]]

[krzysztofwolski]

@JannikZed @tilman Latest version of the Search app has added a feature to apply facet configuration to the indices automatically (https://github.com/saleor/apps/pull/932). It should be a good starting point which can be later fine-tuned in the Algolia Dashboard, or on the frontend part (as Tilman mentioned, thanks for the examples!). If any of the facets should not be displayed, it can be modified in the index settings too (Facet display tab)

@tilman Thank you for reporting, indeed, the naming is confusing. Created a separate ticket fir this request #945

[lkostrowski]

@JannikZed please play with the latest app and feel free to open new issues if you have more ideas