Adding Text Search to Your E-commerce Store

The Text Search feature is easy to integrate using the Lykdat API. This article shows the steps that are required for adding it to your website.

Adding Text Search to Your E-commerce Store
Photo by Mick Haupt / Unsplash
  • Introduction
  • Creating a Business account
  • Creating your catalog
  • Getting your API key
  • Using Lykdat SDK for text search

Introduction

In a world that's full of information, people are always searching for specificity. A text search function that allows people to find exactly what they are looking for and related items are a very good functionality that should be on your site.

It is easy to integrate such functionality with the Lykdat API. This article shows the steps that are required for creating and adding it to the website.

Creating a business account

Head to Lykdat sign-up page to create a business account

Following successful account creation, the home page would look like this:

Creating a Product Catalog

Lykdat requires you to upload catalogs of your products in CSV format following the Lykdat standard product data specification.  A sample of your CSV would look like this preview:

Proceed to the search page and click on the New Catalog on the top right corner

Upload your product catalog CSV and set the catalog name

Clicking the create catalog button starts a background process that uploads your product data to the Lykdat system and notifies you via email when the process is done.

On the dashboard, you can see the upload progress by refreshing the page

Getting your API keys

Proceed to the settings under the general tab on the left-hand side. There are two keys under the API Keys section:‌‌

  • Publishable API Key
  • Admin API Key

Copy the Publishable API Keys to use it with the SDK

Installing the Lykdat JavaScript SDK

The Lykdat SDK requires a web browser environment to get it to work instead of just a node environment as in other scenarios.

‌‌To install the SDK:

npm install lykdat

Using the text search with Lykdat SDK

import * as lykdat from 'lykdat'

const config = {
    publishableApiKey: 'YOUR_API_KEY_HERE',
    catalogName: 'YOUR_CATALOG_NAME',
}

const options = {
    genders: ['male', 'unisex'],
    colors: ['red', 'blue', 'navy']
}

lykdat.searchText('furry shorts', config, options).then((result) => {
    console.log(result.products)
    console.log(result.pagination)
    console.log(result.facets)
}).catch((err) => {
    // handle error
})

This returns a JSON containing the search results for the query passed from your catalog products

[
  {
    brand_name: '',
    colors: [ 'navy' ],
    currency: 'USD',
    description: 'null',
    gender: 'male',
    id: '151758370',
    images: [
      'https://img.shopstyle-cdn.com/pim/f9/d7/f9d716f1508a6a74bbf1773f8b2c04c0_best.jpg'
    ],
    in_stock: true,
    name: 'Peruvian Pima Cotton Shorts',
    price: '59',
    reduced_price: '59',
    url: 'https://www.shopstyle.com/g/men/daniel-buchler/peruvian-pima-cotton-shorts'
  },
  {
    brand_name: '',
    colors: [ 'navy' ],
    currency: 'USD',
    description: 'null',
    gender: 'male',
    id: '14820122',
    images: [
      'https://img.shopstyle-cdn.com/pim/35/80/3580262ca35fe121eff44635374053f7_best.jpg'
    ],
    in_stock: true,
    name: "Men's Champion Mesh Shorts",
    price: '25',
    reduced_price: '0',
    url: 'https://www.shopstyle.com/action/loadRetailerProductPage?id=14820122'
  }
]
{ total_items: 2, total_pages: 1 }
[
  { field_name: 'brand_name', value_counts: [ [Object] ] },
  { field_name: 'colors', value_counts: [ [Object] ] },
  { field_name: 'material', value_counts: [] },
  { field_name: 'pattern', value_counts: [] }
]

The steps for adding text search to your website using the Lykdat SDK have been covered in this post. A fast and robust search solution is crucial for providing an enjoyable user experience on your website, and Lykdat's SDK offers a simple and efficient way to integrate text search functionality.