JS SDK documentation

Config Name

Data type

Description

Sample values

siteName

String

Site name assigned from unbxd (unique identifier for each customer/site)

demo-com809841570123270

(for customers with multiple website, there may be different sitename or same depending on product set)

APIKey

String

Unique key assigned from unbxd

7689867nbh868u4j3b4u998

inputSelector

String

Css selector of the search input box

#search_mini_form input

searchButtonSelector

String

CSS selector of the search submit button/icon. For customers without a search button this can  be left empty and the search form will be submitted on click of enter key.

#search_mini_form button.searchicon

type

String

Used to indicate whether search or category page. 

Possible values: search (or) category

“search” -> the search term in the url is used by library

“Category”->  the getCategoryID function will be invoked to identify the category which needs to be displayed for the given url.

searchQueryParam

string

Search query parameter name which contains the searched keyword

“q”

getCategoryId

function

Javascript function used to evaluate the category id (or) path for the page to be loaded.This function is applicable only when the “type” attribute in search options is “category”

if (“page_type” in window.UnbxdAnalyticsConf && window.UnbxdAnalyticsConf.page_type == ‘CATEGORY’) {

                    if (“page_id” in window.UnbxdAnalyticsConf) {

                        return ‘categoryPathId:”‘ + window.UnbxdAnalyticsConf[“page_id”] + ‘”‘;

                    } else {

                        return ‘categoryPath:”‘ + window.UnbxdAnalyticsConf[“page”] + ‘”‘;

                    }

                }

deferInitRender

array

spellCheck

string

css selector to identify the did you mention section on the page

#did_you_mean

spellCheckTemp

string

String representing the html scheme for did you mean section using handlebars template syntax

*input data -> {

suggestion: “shoes”

numberOfProducts: 0

}

                  <span class=”base” data-ui-id=”page-title-wrapper”>Did you mean <span class=”bold”>{{suggestion}}</span> ?</span> </h1>

searchQueryDisplay

string

Css selector to identify the search results message section on the page

#search_result_display

searchQueryDisplayTemp

string

String representing the html scheme for search message section using handle template syntax

*input data ->

 {

numberOfProducts: 79816

start: 1

end: 48

query: “*”

}

<span class=”base” data-ui-id=”page-title-wrapper”>Search results {{#isNotEmptySearch query}}for:

        {{query}} <span class=”product-count-holder”>({{start}} – {{end}} of {{numberOfProducts}} products)</span>{{/isNotEmptySearch}}</span> </h1> 

searchResultContainer

string

Css selector representing the product results container in the page

#results-container

searchResultSetTemp

string|function

String representing the html scheme for displaying the products in the results container

*input data -> {numberOfProducts: 5361

start: 0

products: [

{

productUrl: “/shop/prod/mens-spring-step-casual-shoes/423424.htm”

was_price_min: 69.95

title: “Mens Spring Step  Casual Shoes”

was_price_max: 69.95

uniqueId: “ZTZ47C”

price_max: 69.95

brand: [“Spring Step”]

price_min: 69.95

more_colors_available: “true”

imageUrl: [“/images/store/product/images/563794479patrick.jpg”]

variantTotal: 5

score: 0.4200723

relevantDocument: “parent”

variantCount: 5

unbxdprank: 1

}]

unbxdparam_requestId: null

}

Or a javascript function , where the data above will be passed as an input argument and the function should handle the dynamic binding of the html section

{{#products}}

<div class=”unbxd_product_tile”>

    <a href=”{{productUrl}}” class=”image-hover unbxd-product-image” title=”{{title}}” data-url=”{{productUrl}}”

        unbxdparam_title=”{{ItemName}}” unbxdattr=”product” unbxdparam_sku=”{{uniqueId}}”

        unbxdparam_prank=”{{unbxdprank}}”>

        <img alt=”{{title}}” src=”{{imageurl}}”>

    <div class=”prod_price assortment_price”>

        <div class=”clearfix subpend-1 price-display featured-pricing money” itemtype=”http://schema.org/Offer”

            itemscope=”” itemprop=”offers”>

            <span class=”bold”>Price: </span>

            <span class=”bold m-large” itemprop=”price”><span

                    class=”dollar”>$</span>{{price_min}}

                – ${{price_max}}</span>

        </div>

    </div>

    <div class=”suppend-1 prod_title”>

        {{title}}

    </div>

    <div class=”subpend-1 product-ratings”><img class=”sli_ratings_scaled ae-img”

            src/store/content/bazaarVoice/images/{{no_of_stars}}.gif”

            alt=”{{no_of_stars}} star rating”>

        ({{getReviewCount}}

        review)</div>

    <p class=”sli_grid_excerpt”>{{description}}</p>

     </a>

</div>

{{/products}}

isAutoScroll

boolean

Set it to true if you want autoscroll behaviour and no pagination on the site

True

*when set to true a value for attribute “heightDiffToTriggerNextPage” is mandatory

heightDiffToTriggerNextPage

number

Numeric representation of pixels from bottom of the page before which pagination should kick in

250

When set to 250 when the scroll position has reached less than 250 px to the bottom of the page, the next set of results will be loaded

isClickNScroll

boolean

Set this to true if you want to simulate a load more results behaviour instead of having autoscroll or paginated links

true

clickNScrollElementSelector

string

Css selector match the button or link which would trigger the load more action

#load-more-results

isPagination

boolean

Set it to true if you need a traditional paginated links for previous and next pages

True

* when autoscroll and pagination is set to true than autoscroll takes precedence

setPagination

function

Post results processing hook to extend custom behaviour. It is a function with three arguments.

Arguments to the function

1.Integer (total number of pages)

2. Integer (no of products per page)

3. Integer (current page number)

paginationContainerSelector

string

css selector used to match the pagination section on the page.

.page-nav-section

paginationTemp

string

String representing the htm scheme for pagination section on the page

*Input data ->

{

hasFirst: false

hasPrev: false

pages: (2) [{…}, {…}]

totalPages: 112

hasNext: true

hasLast: true

productResultCount: 5361

}

{{#if hasPrev}}

<a href=”javascript:;” class=”pagination-link unbxd_prev” unbxdaction=”prev”>Previous</a><span

    class=”seperator”>|</span>

{{/if}}

<span class=”pagination-label”>Page</span>

{{#pages}}

{{#if current}}

<span class=”pagination-link”>{{page}}</span>

{{else}}

{{#unbxdIf page ../startPage}}

{{#if ../hasFirst}}

<a href=”javascript:;” class=”pagination-link” unbxdaction=”{{page}}”>&lt;&lt; {{page}}</a>

{{else}}

<a href=”javascript:;” class=”pagination-link” unbxdaction=”{{page}}”>{{page}}</a>

{{/if}}

{{else}}

{{#unbxdIf page ../endPage}}

{{#if ../hasLast}}

<a href=”javascript:;” class=”pagination-link” unbxdaction=”{{page}}”>{{page}} &gt;&gt;</a>

{{else}}

<a href=”javascript:;” class=”pagination-link” unbxdaction=”{{page}}”>{{page}}</a>

{{/if}}

{{else}}

<a href=”javascript:;” class=”pagination-link” unbxdaction=”{{page}}”>{{page}}</a>

{{/unbxdIf}}

{{/unbxdIf}}

{{/if}}

{{/pages}}

<span class=”pagination-label”> of {{totalPages}}</span>

{{#if hasNext}}

<span class=”seperator”>|</span><a href=”javascript:;” class=”pagination-link unbxd_next” unbxdaction=”next”>Next</a>

{{/if}}

facetMultiSelect

boolean

Set to true if you facets which can be multi selected

true

facetContainerSelector

string

Css selector matching the section which should contain the facets for the search results

#facets_container

facetCheckBoxSelector

string

If there are checkboxes used to filter the facet values, then the css selector which would apply to all such checkbox input elements

#facets_container .facet_value input[type=checkbox]

selectedFacetTemp

string

String representation of the html schema to display the applied filters

*input data -> 

{

filters: [

 {fcode: “Collection”, value: “Sherpa”, fsysname: “collection_uFilter”}

 ],

 ranges:[]

}

<ol class=”unbxd_selected_facets”>

    <li class=”sli_facet_list_ele”>Your Selections:</li>

    {{#filters}}

    <li class=”sli_facet_list_ele”>

        {{value}}<a href=”#”><img src=”/images/icons/x.jpg” alt=”Close” role=”button” tabindex=”0″

            data-ae-blurbtype=”button” class=”ae-img unbxd-remove-item” unbxdParam_facetName=”{{fsysname}}” unbxdParam_facetValue=”{{value}}”></a></li>

    {{/filters}}

</ol>

selectedFacetContainerSelector

string

Css selector match the selected facet section on the page

#applied-filter-section

facetMultilevel

boolean

Set to true for multilevel facets

true

facetMultilevelName

string

The field name of the multi level facet field

CATEGORY

clearSelectedFacetsSelector

string

Css selector matching clear all link to remove all applied filters on the page

#clear-all-filters

removeSelectedFacetSelector

string

Css selector match the individual reset filters links in the selected facet section

.unbxd-remove-item

loaderSelector

string

Css selector used to find the loader gif/image to indicate async loading of results

#loader-icon

onFacetLoad

function

call back function which would be invoked after painting of facets on the page. This function can be used to scroll the page to top on completion of loading, bind additional event handlers if custom accordion implementation is required

Function with one argument of type object which carriers information about the facets displayed.

function (obj) {

                if (this.facetScrollTop) {

                    jQuery(“html, body”).animate({

                        scrollTop: 0

                    }, 300);

                    this.facetScrollTop = false;

                }

}

onIntialResultLoad

function

Call back function invoked when the unbxd page binding happens for the first time.

Function with one argument of type object which carriers the entire result set including products and facets

Can be used to trigger analytics event adjust product container height etc.

function (obj) {

var pids_list = [];

                for (var i = 0; i < obj[‘response’][‘products’].length; i++) {

                    var prd = obj[‘response’][‘products’][i];

                    var sku = prd[‘uniqueId’]

                    pids_list.push(sku.replace(/\./g, “”));

                }

                var impressionObj = { query: obj[‘searchMetaData’][‘queryParams’][‘q’], pids_list: pids_list };

                Unbxd.track(impressionObj, ‘search_impression’);

}

onPageLoad

function

Call back function invoked every time when the page content is refreshed after initial load (like applying sort options, changing page size, paginating through the results

Function with one argument of type object which carriers the entire result set including products and facets

Can be used to trigger analytics event adjust product container height etc.

function (obj) {

var pids_list = [];

                for (var i = 0; i < obj[‘response’][‘products’].length; i++) {

                    var prd = obj[‘response’][‘products’][i];

                    var sku = prd[‘uniqueId’]

                    pids_list.push(sku.replace(/\./g, “”));

                }

                var impressionObj = { query: obj[‘searchMetaData’][‘queryParams’][‘q’], pids_list: pids_list };

                Unbxd.track(impressionObj, ‘search_impression’);

}

sanitizeQueryString

function

Call back function used to sanitize the search query to handle special case as per customer requirement

Function with one argument of type string which would hold the value of the searched query term

function (q) {

            return q.trim();;

        }

getFacetStats

string

Representing the variable name in the stats object which will hold the min and max values for range facet

“facetstats”

processFacetStats

function

Function used to leverage the max and min values of range facets to implement slider behaviour

Function with one argument of type object which would hold all facet information

function (obj) {

               // any logic within

            },

setDefaultFilters

function

This function will be invoked on every data fetch call from unbxd search engine. Hence can be used to apply default filters like show only instock products.

function () {

this.addFilter(“stock_availability”,”In Stock”);

}

fields

array

List of product attribute name which should be fetched for matching products

• Note only include products fields which are to  be used to save bandwidth

[‘title’, ‘unbxd_title’, ‘price’, ‘image_url’, ‘productUrl’, ‘doctype’, ‘saleprice’, ‘desktop_url’, ‘mobile_url’, ‘average_rating’, ‘min_price’, ‘max_price’, ‘price’, ‘sash_css_class’, ‘v_image_url’, ‘brand’

]

onNoResult

function

This function is invoked when there are no matching products for the search term queried by the user

It is a function with one argument of type object which holds the result set including search term.

function(obj){

this.compiledNoResultsTemp = Handlebars.compile(this.options.onNoResultTemp);

                jQuery(“#no-results-section”).html(this.compiledNoResultsTemp({ query: obj.searchMetaData.queryParams.q }));

}

noEncoding

boolean

Set to true if you want to enable encoding of url params and subsequent decoding

customReset

function

This function is called when sorting the results, changing the view or resetting all filter options

No argument function used as a extension point for custom behaviour

function (){

}

bannerSelector

string

Css selector matching the merchandising banner slot on the page

#up-sell-banner-section

bannerTemp

string

String representation of the HTMl Schema used to apply promotional banner on the page

*input data ->

{

landingUrl:””,

imageUrl:””

}

<a href='{{{landingUrl}}}’><img src='{{imageUrl}}’/></a>

bannerCount

number

Integer representation of the number of banners which should be displayed on the page

2 

sortContainerSelector

string

Css selector matching the sort section on the page

#sort-section

sortOptions

array

Can configure the sort options to be displayed on the page

[{

                name: ‘Popularity’

            }, {

                name: ‘Low to High Price’,

                field: ‘price_min’,

                order: ‘asc’

            }, {

                name: ‘High to Low Price’,

                field: ‘price_max’,

                order: ‘desc’

            }

            }

]

sortContainerType

string

Used to indicate if the selecting a sort option are by click or selecting from dropdown

click (or) select

sortContainerTemp

string

String representation of the HTML schema on how the sort section to be rendered

*input data -> 

{             

 options: [{name: “Popularity”, selected: true}

{name: “Low to High Price”, field: “price_min”, friendlyUrlText: “price-low”, order: “asc”, selected: false}

{name: “High to Low Price”, field: “price_max”, friendlyUrlText: “price-high”, order: “desc”, selected: false}

{name: “Newest First”, field: “published_date”, friendlyUrlText: “newest”, order: “desc”, selected: false}

{name: “Top Rated”, field: “no_of_stars”, friendlyUrlText: “ratings”, order: “desc”, selected: false}

 ]

 }

<span class=”base” data-ui-id=”page-title-wrapper”>Search results {{#isNotEmptySearch query}}for:

        {{query}} <span class=”product-count-holder”>({{start}} – {{end}} of {{numberOfProducts}} products)</span>{{/isNotEmptySearch}}</span> </h1> 

<span class=”ae-label” id=”unbxd-sort-labelledby”>Sort By: </span>

<select aria-labelledby=”unbxd-sort-labelledby” data-ae-blurbtype=”select” data-ae-form-field=”true”>

        {{#options}}

        <option {{#if selected}}selected=”selected”{{/if}} unbxdsortField=”{{field}}” unbxdsortValue=”{{order}}”>

            {{name}}</option>

        {{/options}}

</select>

pageSize

number

Configure the number of products to be shown in a page

24

pageSizeContainerSelector

string

Css selector matching the page size section on the page

#results-pagesize

pageSizeOptions

array

The possible list of page view option to be shown on the web

*note unbxd has a maximum limit of 99 products per api call.

[

                {

                    name: ’48 item’,

                    value: ’48’

                }, {

                    name: ’72 items’,

                    value: ’72’

                }, {

                    name: ’96 items’,

                    value: ’96’

                }

            ]

pageSizeContainerType

string

Used to indicate if the selecting a page size option is by click or selecting from dropdown

click (or) select

pageSizeContainerTemp

string

String representation of the HTML schema on how the page size  section to be rendered

*inputdata -> 

{             

 options: [{name: “48 item”, value: “48”, selected: true}

 {name: “72 items”, value: “72”, selected: false}

 {name: “96 items”, value: “96”, selected: false}

 ]

 }

<span class=”ae-label” id=”unbxd-pageview-labelledby”>Show: </span>

<select aria-labelledby=”unbxd-pageview-labelledby” data-ae-blurbtype=”select”

        data-ae-form-field=”true”>

        {{#options}}

        <option {{#if selected}}selected=”selected” {{/if}} unbxdpagesize=”{{value}}”>

            {{name}}</option>

        {{/options}}

</select>

viewTypeContainerTemp

string

String representation of the HTML schema on how the page view  section to be rendered

*inputdata -> 

{             

 options: [{name: “Grid”, value: “grid”, selected: true}

 {name: “List”, value: “list”, selected: false}

  ]

 }

<span class=”title”>View:</span>

{{#options}}

<a class=”{{#if selected}}selected{{/if}}” unbxdviewtype=”{{value}}” href=”javascript:;” “>{{value}}</a>

{{/options}}

viewTypeContainerSelector

string

Css selector matching the page view section on the page

#results-pageview

viewTypes

array

Indicates all different views available on the page

*If the customer only have grid view then [‘grid’]

*If the customer only have list view then [‘list’]

*If customer has both views then [“list”,”grid”]

variants

boolean

Pass true to display variants

true

variantsCount

number

Pass the number of variants to be shown for a product

3

isSwatches

boolean

Pass true to display swatches

true

swatchesSelector

string

CSS selector of the swatches element

.swatch-box

mappedFields

object

Pass the field names for the important product attributes that you want to render

{

“imageUrl”: “imageUrl”,

“productUrl”: “productUrl”,

“title”: “title”,

“description”: “description”,

“price”: “price”,

“categoryPath”: “categoryPath”,

“variantFields”: {

“imageUrl”: “v_imageUrl”,

“productUrl”: “v_productUrl”,

“title”: “v_title”,

“price”: “v_price”,

“groupBy”: “variant_color”,

“swatchFields”: {

“swatch_background_image”: “variant_overhead_swatch”,

“swatch_background_color”: “variant_color”,

“swatch_click_image”: “variant_image_array”

}

}

}

retainbaseParam

boolean

baseParams

array

requestHeaders

object

Request headers if any to be sent on unbxd search response