## Introduction
_This SDK is currently in open beta. Contact Bloomreach with feedback._
The Bloomreach Search, Merchandising, & Recommendations SDK provides simplified integration with the Bloomreach Discovery APIs. It returns API calls along with a template user interface that your team can customize for your specific commerce store.
This SDK is currently in Beta & is used primarily to provide a quickstart UI for customers implementing Bloomreach Discovery APIs. Future versions of this SDK will allow for developers to build & access the JSON output, whereas now the Discovery API call, JSON response, and sample UI are coupled together in a single process.
## Technical details
The SDK consists of 5 modules, each module can be used by including its script (and optional stylesheet) file in the page.
#### Commonly configurable variables in the SDK
Account ID
Domain key
Authentication key
Tracking cookie
Default search URL parameter name
URL of the search page
#### Example of common config variables in the Bloomreach Connector object:
#### Modules
[Autosuggest module](🔗)
[Product Search module](🔗)
[Category module](🔗)
[Recommendations & Pathways module](🔗)
[Product Events module](🔗)
## Autosuggest module
The **Autosuggest module** attaches a listener to the configured input field and shows the suggestion results under that field on every keystroke.
#### Installing Autosuggest module
The module can be used by including a direct link to the module files in your webpage:
You will then have access to the module under the _BloomreachModules.autosuggest_ object in the global scope (_window_).
The module loads itself automatically right after the page is fully loaded if it’s set to be enabled in the Bloomreach Connector config object.
If you need to load the module manually, you can call the load static method on it:
_BloomreachModules.autosuggest.load()_
#### What’s configurable in the Autosuggest module
Is it enabled or not
Number of term suggestions to display
Number of collection suggestions to display
Number of product suggestions to display
The CSS selector of the input field that the autosuggest panel will be attached to
When there are collection term suggestions, the [Category module](🔗) also needs to be loaded on the page and its configured selector needs to be in the DOM, so the category results can be loaded after clicking on the suggested term.
#### Example Autosuggest config variables in the Bloomreach Connector object:
## Product Search module
The **Product Search module** loads in the results for the given search term into the page, and optionally the related facets as well.
For every facet change, the module re-renders the page with the filtered results.
#### Installing Product Search module
The module can be used by including a direct link to the module files in your webpage
You will then have access to the module under the _BloomreachModules.search_ object in the global scope (_window_).
The module loads itself automatically right after the page is fully loaded if it’s set to be enabled in the Bloomreach Connector config object.
If you need to load the module manually, you can call the load static method on it:
_BloomreachModules.search.load()_
#### What’s configurable in the Product Search module
Is it enabled or not
Number of results to display in one page
Should facets be included on the page or not
Number of facet groups to show initially (hidden ones can be revealed with a “+ More” link)
Number of facet values to show initially in a facet group (hidden ones can be revealed with a “+ More” link)
Should infinite scroll be used on bigger screens or not
The CSS selector of the container that will hold the search results
Sorting options for the result set that can be selected on the page in a dropdown field
Should the variants be expanded into the result set or not
#### Example Product Search config variables in the Bloomreach Connector object:
## Category module
The **Category module** loads in the results for the current collection into the page, and optionally the related facets as well.
For every facet change, the module re-renders the page with the filtered results.
This module has the same feature set as the Product Search module.
#### Installing Category module
The module can be used by including a direct link to the module files in your webpage:
You will then have access to the module under the _BloomreachModules.category_ object in the global scope (_window_).
The module loads itself automatically right after the page is fully loaded if it’s set to be enabled in the Bloomreach Connector config object.
If you need to load the module manually, you can call the load static method on it:
_BloomreachModules.category.load()_
#### What’s configurable in the Category module
Is it enabled or not
Number of results to display in one page
Should facets be included on the page or not
Number of facet groups to show initially (hidden ones can be revealed with a “+ More” link)
Number of facet values to show initially in a facet group (hidden ones can be revealed with a “+ More” link)
Should infinite scroll be used on bigger screens or not
The CSS selector of the container that will hold the collection results
Sorting options for the result set that can be selected on the page in a dropdown field
Should the variants be expanded into the result set or not
#### Example Category config variables in the Bloomreach Connector object:
## Recommendations & Pathways module
The Recommendations & Pathways module loads the content of the different widgets into their containers on the page.
#### Widgets
The Bloomreach Recommendations & Pathways SDK supports 5 widget types:
[Item](🔗)
[Keyword](🔗)
[Category](🔗)
[Personalized](🔗)
[Global](🔗)
#### Installing Pathways & Recommendations module
The module can be used by including a direct link to the module files in your webpage:
You will then have access to the module under the _BloomreachModules.pathwaysRecommendations_ object in the global scope (_window_).
The module loads itself automatically right after the page is fully loaded.
If you need to load the module manually, you can call the load static method on it:
_BloomreachModules.pathwaysRecommendations.load()_
### What’s configurable in the Item type widget
The number of items to load into the widget
The number of items to show at a time in the widget
The item ID(s) related to load the related result set for
#### Example markup for placing an Item type widget in the DOM
### What’s configurable in the Keyword type widget
The number of items to load into the widget
The number of items to show at a time in the widget
The keyword to load the results for
#### Example markup for placing a Keyword type widget in the DOM
### What’s configurable in the Category type widget
The number of items to load into the widget
The number of items to show at a time in the widget
The category ID to load the items from
#### Example markup for placing a Category type widget in the DOM
### What’s configurable in the Personalized type widget
The number of items to load into the widget
The number of items to show at a time in the widget
The ID of the user who will see the personalized result set
#### Example markup for placing a Personalized type widget in the DOM
### What’s configurable in the Global type widget
The number of items to load into the widget
The number of items to show at a time in the widget
#### Example markup for placing a Global type widget in the DOM
## Product Events module
The **Product Events module** attaches listeners to Add to Cart and Quickview items for firing these pixel events.
There are no configurable variables for this module.
#### Installing Product Events module
The module can be used by including a direct link to the module files in your webpage:
You will then have access to the module under the _BloomreachModules.events_ object in the global scope (window).
The module loads itself automatically right after the page is fully loaded.
If you need to load the module manually, you can call the load static method on it:
_BloomreachModules.events.load()_
#### Example markup for placing an Add to Cart button in the DOM
#### Example markup for placing a Quickview button in the DOM
## UI features
The SDK comes with several template UI features to streamline your development.
#### Autosuggest
Under a given input field, the SDK can attach a panel for displaying the related suggestions for search terms, collections and products.
#### Facets
For a collection or keyword based search results, the SDK can include related facets for filtering the product list.
#### Search results
On a search results page, the SDK can load the product results for given search terms into the page, along with their related facets.
#### Recommendations
In supported widgets, the SDK can load up recommended products based on the ranking rules set within the Bloomreach dashboard.
#### Collections / Categories
On a collections page (also known as categories page), the SDK can load the product results for a given collection into the page, along with their related facets.
#### Pagination
When there are more results than the number that is configured to display in a page, pagination links can help the navigation across the result set.
#### Infinite scroll
On mobile screen sizes, the SDK loads more results automatically on scroll instead of using pagination links. On bigger screens, usage of infinite scroll or pagination links is configurable.
#### Spell correction
When there is a misspelling, Bloomreach still loads up the results for the corrected keyword automatically and the SDK informs the user about the correction.
#### Keyword redirection
When keyword redirection is configured, the SDK loads up the configured results set and lets the user know about the redirection.
#### Variant support
For products with more than one variant, the different variants can be expanded into the result set, so the variants will show up as distinct products.
#### Default currency
The default displayed currency is USD ($), but it can be customized by placing the following script tag into the <head> section of the document and changing the currency value. For example: