Skip to main content Link Search Menu Expand Document (external link)

Spell Check

Table of contents

  1. Definition
  2. Behavior
  3. Configurations
    1. enabled
    2. el
    3. template
    4. selectorClass
      1. Scenarios
    5. tagName
    6. htmlAttributes
  4. Data-actions
  5. Usecases
    1. Usecase 1: Default example
  6. FAQs

Definition

In an e-commerce platform, ‘spell check’ feature refers to a functionality that helps users to find products even if they have made a spelling mistake when searching for them.

This feature utilizes natural language processing (NLP) and machine learning algorithms to automatically detect and correct spelling errors in the user’s search query. When a user enters a search term that contains a spelling mistake, the system will automatically check the spelling of the term against a dictionary of correctly spelled words. If the system detects a spelling mistake, it will try to suggest the correct spelling and show the search results based on that correction.

For example, if a user types in “iphone11” instead of “iPhone 11”, the system will recognize the mistake and correct the spelling, displaying the search results for “iPhone 11”.

This feature can help to improve the user experience by reducing the chances of users entering search terms that do not match any products in the online store’s catalog and also increase the accuracy of search results.

Additionally, by using machine learning models, the spell check feature can improve its performance over time, becoming better at recognizing and correcting spelling errors. This can help to increase the chances of users finding the products they are looking for, even if they make a spelling mistake.

Behavior

The spell check feature provides spelling suggestions or spell-checks for misspelled search queries.

In such cases, the context-aware algorithm of Unbxd understands your visitor’s intent and sends a “Did You Mean” response along with a search result set for the query, if any.

Configurations

You can configure the spellcheck feature by updating the required configs under the “spellCheck” config object.

spellCheck: {
      // the below spellcheck configurations goes here.
}

enabled

Boolean

Required

“Enabled” is a flag or switch that allows developers to turn on or off a specific feature in an e-commerce website. In this context, the “spellcheck feature” refers to the ability to display spellcheck on the website.

When the “enabled” flag is turned on, the spellcheck feature will be active,This can be used to help result even when you write incorrect query. When the “enabled” flag is turned off, the spellcheck feature will be disabled.

Default Value 

enabled: true

Scenarios

  1. true - Spellcheck feature will be enabled.
  2. false - Spellcheck feature will be disabled.

el

Element

Required

“el” is an HTML element in an e-commerce page that is designated to display spellcheck component. This allows developers to control the placement of the spellcheck component on the webpage and to ensure that they are displayed in a prominent and visible location. The “el” can be set by providing the id or class of the element in the code.

Element in which to render the spellcheck component.

Default Value 

el: null

Scenarios

There are several HTML selectors that can be used to locate the banner element in an e-commerce page. For ex: getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll, getElementsByName, etc.

template

Function

The “template” function here refers to the ability to change the appearance of the spellcheck feature on the e-commerce website. It allows developers to control the appearance of the spellcheck component by providing custom HTML.

This function takes three params:

  1. query - the search query , which generally refers to a request made by a user to search for specific products or information within the app.
  2. suggestion - the suggested query text.
  3. pages - It is a config object with product count details ({start, productsLn, numberOfProducts}).

Expected return value: a string of HTML that will be used to render the spellcheck component on the webpage

Default Value 

template: function(query,suggestion,pages) {
    const {
        start,
        productsLn,
        numberOfProducts
    } = pages;
    const {
        selectorClass,
        enabled
    } = this.options.spellCheck;
    const {
        productType
    } = this.options;
    let newQuery = query;
    if(productType !=="SEARCH" ) {
        const catId = this.getCategoryId() || "";
        const cId = decodeURIComponent(catId).split(">");
        newQuery = cId[cId.length-1] || cId[0] ;
    }
    const {
        UNX_spellCheck
    } = this.testIds
    const noUi = (suggestion) ? `<p class="UNX-no-result"> Your search "<strong>${suggestion}</strong>" did not match any products. Did you mean <button data-test-id="${UNX_spellCheck}" data-action="getSuggestion" class="${selectorClass}">${query}</button>? </p>` :``;
    let qUi = ``;
    let countUi = ``;
    if(numberOfProducts > 0) {
        countUi = `<span class="UNX-result-info">  -  ${start+1} to ${productsLn+start} of ${numberOfProducts} products</span>`;
    }
    if(pages && newQuery){
        if(!enabled) {
            newQuery = suggestion || query
        }
        qUi = `<p class="UNX-suggestion-p">Showing results for <strong>${newQuery}</strong> ${countUi}</p>`;
    }
    return  [`<div class="UNX-spellcheck-block">`,
            noUi,
            qUi,
        `</div>`].join('');
}

Scenarios

For additional information on custom scenarios, please refer to the use cases section located below.

selectorClass

String

Additional CSS class name for the spell check component,a selector class is typically a specific class or group of classes that are used to select spellcheck component.

Default Value 

selectorClass:"UNX-suggestion"

Scenarios

Any valid class name can passed here.

tagName

String

“tagName” refers to the name of an HTML tag used to wrap or structure the content (spellcheck) on a webpage.

Default Value 

tagName: 'DIV'

Scenarios

Any valid html tag such as div, span, p, h1, h2, etc in which you like the spellcheck code to be wrapped in.

htmlAttributes

Object

“htmlAttributes” refers to a set of key-value pairs that provide additional information or properties for an HTML element. By default it contains classes for the wrapper. You can add more classes or any valid attributes.

Default Value 

htmlAttributes: { class:"UNX-spellcheck-wrapper" }

Scenarios

Any valid html attribute can be passed as key : value pairs inside an object.

Data-actions

  1. getSuggestion -

Usecases

Usecase 1: Default example

Sample “spellCheck” config

spellCheck:{
    enabled:true,
    el:document.getElementById("didYouMeanWrapper"),
    selectorClass: "UNX-suggestion",
    template: function(query,suggestion,pages) {
    const {
        start,
        productsLn,
        numberOfProducts
    } = pages;
    const {
        selectorClass
    } = this.options.spellCheck;
    const {
        productType
    } = this.options;
    let newQuery = query;
    if(productType !=="SEARCH" ) {
        const catId = this.getCategoryId() || "";
        const cId = decodeURIComponent(catId).split(">");
        newQuery = cId[cId.length-1] || cId[0] ;
    }
    const {
        UNX_spellCheck
    } = this.testIds
    const noUi = (suggestion) ? `<p class="UNX-no-result"> Your search "<strong>${suggestion}</strong>" did not match any products. Did you mean <button data-test-id="${UNX_spellCheck}" data-action="getSuggestion" class="${selectorClass}">${query}</button>? </p>` :``;
    let qUi = ``;
    let countUi = ``;
    if(numberOfProducts > 0) {
        countUi = `<span class="UNX-result-info">  -  ${start+1} to ${productsLn+start} of ${numberOfProducts} products</span>`;
    }
    if(pages && newQuery){
        qUi = `<p class="UNX-suggestion-p">Showing results for <strong>${newQuery}</strong> ${countUi}</p>`;
    }
    return  [`<div class="UNX-spellcheck-block">`,
            noUi,
            qUi,
        `</div>`].join('');
    },
}

FAQs

  1. Does Unbxd provide spell-checking functionality?
  2. Can I customize the spell-checking functionality in the Unbxd Search SDK?