Docs

Deploying Search Javascript using AJAX

We help you optimise your search results and category pages by integrating custom search Javascript (JS) scripts using Asynchronous JavaScript And XML (AJAX).

To integrate Unbxd Search JS using AJAX, your developers need to replace <div> tag of the search results page (excluding the Header and Footer) with the custom <div> tag from the Unbxd Search JS library. This will load the optimized Product Listing Page (PLP) through Unbxd.

AJAX allows web pages to load faster by exchanging data with the web server, instead of reloading the entire web page each time a user makes a change.

How AJAX does this is by allowing the web server to update just the required sections on the web page with information that the user needs instead of updating the entire web page.

Broadly, AJAX is platform and browser agnostic and is based on the following open language platforms:

  • Javascript
  • eXtensible Markup Language (XML)
  • HyperText Markup Language (HTML)
  • Cascading Style Sheets (CSS)

Implementing AJAX

Our Search JS library contains the <div> tag that allows you to render a custom search page template.
To create the content of the custom <div> using existing templates from your site, your developers can add script tags in the HTML templates to load our JS-Software Development Kit (SDK).
You will need to integrate the JS script in the following two templates:

  • Search page templates: We will generate search page templates and make corresponding changes to the JS-SDK configuration to render the appropriate HTML responses. The search text box event needs to be replaced with Unbxd event. For sample code and description of parameters, refer to the page titled Unbxd JavaScript Search library.
  • Autosuggest templates: We provide custom autosuggest templates to help your visitors find the product they want faster, besides discovering new products. When necessary, you can customize our autosuggest template to your page layout. Once you have modified the search page when our <div> tag, your search page will render the customized PLP.

We will integrate and resolve conflicts with user actions like ‘Add to Cart’ to each product listing in the search results page.

Performing A/B Testing

Before you go live with the Unbxd solution, you can perform A/B testing to compare the efficiency of your existing search page versus the Unbxd search page.

To perform A/B Testing:

  1. Create a new search page for Unbxd, for instance: site.com/usearch?.
  2. Within the search page, change the Form Submit action from /search to /usearch.
  3. Change the search form ID to unbxd-search.
  4. Insert the empty <div> tag inside the body between the header and footer of the Unbxd search results page. For instance, append <div class="search-container"></div> after the breadcrumbs.
  5. We provide one JS and CSS script each for Autosuggest/Typeahead and Search page.
    Within the 'Autosuggest/Typeahead' page, insert the CSS script within the <head> tag of every page that displays a typeahead. Insert the JS script either within the header or footer of the pages you require.
    Similarly, within the 'Search' page, insert the CSS script within the <head> tag of the search page that displays our search results. Insert the JS script either within the header or footer of the pages you require.

The Unbxd search page is now ready to display optimized autosuggest and search results.

You now have two search pages ready:

  • Your existing search page with the /searchtag (for example, site.com/search?query=sofa).
  • The Unbxd search page with the /usearch tag (for example, site.com/usearch?query=sofa).

Lastly, you can split site traffic between your existing search page and Unbxd search page.

Once satisfied with the results of the test, you can go live and direct all traffic to the Unbxd search page.