Docs

Deploying browse Javascript using AJAX

We help you optimize your category pages by integrating custom browse Javascript (JS) scripts using Asynchronous JavaScript And XML (AJAX).

To integrate Unbxd browse JS using AJAX, your developers need to replace <div> tag of the browse results page (excluding the Header and Footer) with the custom <div> tag from the Unbxd search JS library ( works for the browse as well). 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/browse 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:

  • Category page templates: We will generate browse page templates and make corresponding changes to the JS-SDK configuration to render the appropriate HTML responses. The browse page click event needs to be replaced with Unbxd event. For sample code and description of parameters, refer to the page titled Unbxd JavaScript Search library.

Once you have modified the category result page with our <div> tag, your category result 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 category 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 category page versus the Unbxd category page.

To perform A/B Testing:

  1. Create a new category page for Unbxd, for instance: site.com/usearch?.
  2. Within the category page, change the Form Submit action from /category to /usearch.
  3. Change the search form ID to unbxd-category.
  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="category-container"></div> after the breadcrumbs.
  5. We provide one JS and CSS script each for category page.
    within the 'category page', insert the CSS script within the <head> tag of the category page that displays our category page results. Insert the JS script either within the header or footer of the pages you require.

The Unbxd category page is now ready to display optimized results.

You now have two category pages ready:

  • Your existing category page with the /categorytag (for example, site.com/category?p=sofa).
  • The Unbxd category page with the /usearch tag (for example, site.com/usearch?p=sofa).

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

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