DEV Community

Betty Kamanthe
Betty Kamanthe

Posted on • Updated on

Improve UX in E-commerce sites using Typesense

Improve UX in E-commerce sites

Introduction

Have you ever been searching for an item but you don’t know how it's supposed to be spelled?

Most eCommerce sites are not typo-tolerant. Ease of use is a great plus in the user experience . This is why ux is important for building search engines.

In this tutorial I will use the typesense API to demonstrate how typesense handles typo errors made by users. I will use data that I scraped from jumia .
The data is stored in .csv format and you can download it from here.

STEP 1: Convert our CSV data to JSONL

The documents to import need to be formatted as a newline delimited JSON string,aka JSONLines format.

sudo apt install miller
mlr --c2j cat deodorants.csv > deodorants.jsonl
Enter fullscreen mode Exit fullscreen mode

STEP 2: Install typesense cloud

The easiest way to run typesense is using typesense cloud

  • Go to Typesense

  • Sign-in with Github

  • Pick a configuration and click on Launch. You'll have a ready-to-use cluster in a few minutes.

  • Then click on "Generate API Key", which will give you the hostnames and API keys to use in your code.

STEP 3: Install client

pip install typesense
Enter fullscreen mode Exit fullscreen mode

STEP 4: Initialising the client

Configuring the typesense client by pointing it to the typesense node.
Since we are using Typesense Cloud, click on the "Generate API key" button on the cluster page. This will give you a set of hostnames and API keys to use.

import typesense

client = typesense.Client({
  'nodes': [{
    'host': '51owicq83p97fb0xp-1.a1.typesense.net', 
    'port': '443',      
    'protocol': 'https'   
  }],
  'api_key': 'gQZZpXyeoubYaQoz4UrrHuN2uKHFPVYn',
  'connection_timeout_seconds': 2
})
Enter fullscreen mode Exit fullscreen mode

STEP 5: Creating a collection

Collection - a group of related documents. sort of like relational tables

When we create a collection, we give it a name and describe the fields that will be indexed when a document is added to the collection.

In Typesense, every record you index is called a Document

#creating a schema

deodorants_schema={
    'name':'deodorants', #The name of our collection
    'fields':[
              {'name':'Name','type':'string', 'facet':True}, # Name field with a string fieldtype
              {'name':'Price','type':'float'}# price field with a float fieldtype
    ],
    'default_sort':'price' #determines how the results must be sorted when no sort_by clause is provided.
}

client.collections.create(deodorants_schema)
Enter fullscreen mode Exit fullscreen mode

A facet field allows us to cluster the search results into categories and lets us drill into each of those categories

STEP 6: Add documents to the collection

There are two ways of doing this.
1. Using Python

with open('deodorants.jsonl') as jsonl_file:
  client.collections['deodorants'].documents.import_(jsonl_file.read().encode('utf-8'), {'action': 'create'})
Enter fullscreen mode Exit fullscreen mode

2. Using Typesense Cloud
This also very simple if you have very few documents.

Typesense Cloud
Click add document and in simply enter the documents inside the curly braces

Check the number of records by clicking schema and check "num_documents"
Typesense Cloud

STEP 7: Search for items from deodorants collection

#search for a deodorant
search_parameters ={
    'q':'NIVEA',
    'query_by':'Name',

}

client.collections['deodorants'].documents.search(search_parameters)
Enter fullscreen mode Exit fullscreen mode
Sample Response
{'facet_counts': [],
 'found': 14,
 'hits': [{'document': {'Name': 'NIVEA Fresh Cherry Anti-Perspirant Spray For Women - 150ml',
    'Price': 365,
    'id': '61'},
   'highlights': [{'field': 'Name',
     'matched_tokens': ['NIVEA'],
     'snippet': '<mark>NIVEA</mark> Fresh Cherry Anti-Perspirant Spray For Women - 150ml'}],
   'text_match': 33514496},
  {'document': {'Name': 'NIVEA MEN Cool Kick Anti-Perspirant Spray For Men, 48h - 150ml',
    'Price': 375,
    'id': '60'},
   'highlights': [{'field': 'Name',
     'matched_tokens': ['NIVEA'],
     'snippet': '<mark>NIVEA</mark> MEN Cool Kick Anti-Perspirant Spray For Men, 48h - 150ml'}],
   'text_match': 33514496},
  {'document': {'Name': 'NIVEA MEN Black & White Invisible Original, 48h - 150ml (Pack Of 2)',
    'Price': 800,
    'id': '59'},
   'highlights': [{'field': 'Name',
     'matched_tokens': ['NIVEA'],
     'snippet': '<mark>NIVEA</mark> MEN Black & White 
 'out_of': 14,
 'page': 1,
 'request_params': {'collection_name': 'deodorants',
  'per_page': 10,
  'q': 'NIVEA'},
 'search_cutoff': False,
 'search_time_ms': 0}
Enter fullscreen mode Exit fullscreen mode

STEP 8: Filtering results

In this I will search for the item nivea but type it as Nyvea. Then filter the reults for nivea products that cost less than 500 and sort the prices in ascending order

#Filtering results
search_parameters ={
    'q':'nyvea',
    'query_by':'Name',
    'filter_by':'Price:<500',
    'sort_by':'Price:asc'
}

client.collections['deodorants'].documents.search(search_parameters)
Enter fullscreen mode Exit fullscreen mode
Sample response
{'facet_counts': [],
 'found': 26,
 'hits': [{'document': {'Name': 'NIVEA Pearl & Beauty Anti-Perspirant Rollon For Women, 48h - 50ml',
    'Price': 270,
    'id': '94'},
   'highlights': [{'field': 'Name',
     'matched_tokens': ['NIVEA'],
     'snippet': '<mark>NIVEA</mark> Pearl & Beauty Anti-Perspirant Rollon For Women, 48h - 50ml'}],
   'text_match': 33317888},
  {'document': {'Name': 'NIVEA Fresh Cherry Anti-Perspirant Rollon For Women - 50ml',
    'Price': 330,
    'id': '93'},
   'highlights': [{'field': 'Name',
     'matched_tokens': ['NIVEA'],
     'snippet': '<mark>NIVEA</mark> Fresh Cherry Anti-Perspirant Rollon For Women - 50ml'}],
   'text_match': 33317888},

  {'document': {'Name': 'NIVEA MEN Black & White Invisible Fresh Anti-Perspirant Rollon - 50ml',
    'Price': 355,
    'id': '89'},
Enter fullscreen mode Exit fullscreen mode

You can see that Typesense is typo-tolerant from the response.

Conclusion

That is how simple it is to build a search application with Typesense API. There is a lot that can be done with Typesense, like creating Search UI. To get more functionalities check the API reference. To add to all of these, it is Open Source!

Top comments (8)

Collapse
 
lisapowellll profile image
Lisa Powell

Always knowledgeable....

Collapse
 
betty1999kamanthe profile image
Betty Kamanthe

Thanks

Collapse
 
sikukudancan profile image
DANCAN SIKUKU

awesome work

Collapse
 
betty1999kamanthe profile image
Betty Kamanthe

Thank you

Collapse
 
nashipai98 profile image
Nashipai98

Wow, brilliant work!

Collapse
 
betty1999kamanthe profile image
Betty Kamanthe

Thanks

Collapse
 
johnxmas profile image
Johnxmas

UX on websites is really important

Collapse
 
betty1999kamanthe profile image
Betty Kamanthe

I agree