#important-announcements

Typesense Ecommerce Storefront Showcase Discussion

TLDR Mica discussed enhancements and filters for an ecommerce storefront using Typesense. Jason offered resources on filters and handling facets count issues reported by Claudiu. Jason also implemented a solution to fix the problem.

Powered by Struct AI
+13
1001
heart1
raised_hands1
white_check_mark1
13
26mo
Solved
Join the chat
Jun 18, 2021 (27 months ago)
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
02:49 AM
New showcase alert: here's how to build an ecommerce storefront (product listing pages) with Typesense: https://ecommerce-store.typesense.org/
+12
1001
Mica
Photo of md5-a9a351e11d64f05b41fec183816a0cda
Mica
08:58 AM
I can't see any global search bar (just one for the brands) is that normal?
09:00
Mica
09:00 AM
It's awesome, I'm currently building an e-commerce website using Algolia + InstantSearch, it's great to have an example with Typesense I really felt like it was missing.
raised_hands1
09:04
Mica
09:04 AM
Would it be easy to add filters that appear only for the relevant items? For example if there were phones and speakers, both would have a battery capacity but only phones would have a screen size. And would it be made with the front-end or could it be done using Typesense? I'm looking into implementing a classification system into the website for this kind of purpose.
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:58 PM
> I can't see any global search bar (just one for the brands) is that normal?
I wanted to emphasize the fact that you don't need a search bar per se to use Typesense, which is why I skipped adding it to the UI. I can may be add a small search bar on the top right so it doesn't steal attention
+11
06:02
Jason
06:02 PM
> Would it be easy to add filters that appear only for the relevant items? For example if there were phones and speakers, both would have a battery capacity but only phones would have a screen size. And would it be made with the front-end or could it be done using Typesense?
You can do this yes, but if you want to implement it without a page refresh or creating a new page (where you'd instantiate the required filters based on the page), then you'd have to create a new custom widget in Instantsearch, that looks at the results for a particular query and then based on the attributes returned in the results, the widget would have to issue a new call to Typesense this time with facet_by set to those fields and then render widgets for the facetted attributes returned.
06:03
Jason
06:03 PM
Looks like Algolia has put together a guide on how to do this with Instantsearch: https://github.com/algolia/dynamic-faceting-instant-search-guide
heart1
Jun 21, 2021 (27 months ago)
Mica
Photo of md5-a9a351e11d64f05b41fec183816a0cda
Mica
12:46 PM
Awesome, that looks like something that would help us. It theory it should work with Typesense without any change needed?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
03:36 PM
Yup it should, but let me know if you run into any issues
Jul 02, 2021 (26 months ago)
Claudiu
Photo of md5-d619094f9c50a3e0a4927dc0e63ba30d
Claudiu
08:56 AM
Hey guys, there is a problem in facets counting: https://ecommerce-store.typesense.org/?products%5Bquery%5D=16gb&products%5BrefinementList%5D%5Bbrand%5D%5B0%5D=AT%26T%20GoPhone&products%5BhierarchicalMenu%5D%5Bcategories.lvl0%5D%5B0%5D=Cell%20Phones
if you look in the left it is select AT&T with 3 products but in the page there are 5
Jul 03, 2021 (26 months ago)
Kishore Nallan
Photo of md5-4e872368b2b2668460205b409e95c2ea
Kishore Nallan
03:15 AM
Thanks for reporting this. It is a quirk because of the way multiple queries are assembled for the final UI. The demo is using the default typo_tokens_threshold value and that causes actual records fetched to vary slightly between the search query used to populate results vs the brand facet counts.

This has been a bit of a surprising behaviour in some cases, so we are going make the default value of typo_tokens_threshold to just 1 to address it.
Jul 05, 2021 (26 months ago)
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f