Integrating the Motive Commerce Search Engine

In order to finish setting up Motive Commerce Search, you need to integrate Motive's search layer into your eCommerce site. This page provides you with the necessary instruction to load MotiveX's JavaScript resource and initialise it.

Prerequisites

MotiveX uses polyfills to support most available browsers. These polyfills are loaded dynamically only when necessary, allowing the most efficient runs for those using modern browsers.

Among the supported browsers are the following ones:

Browser	Version(s)	Notes
Chrome	Latest 5	Includes Chrome for Android
Firefox	Latest 5	Includes Firefox for Android
Opera	Latest 5	Includes Opera Mobile
Safari	9+	Includes iOS Safari
Edge	All
Android Browser	4+

Configuring MotiveX

The first step is to configure MotiveX, prior to its loading. Here's a snippet of the window.initXcallback function:

window.initX = () => ({
  xEngineId: '00000000-0000-0000-0000-000000000000',
  lang: 'en',
  currency: 'USD',
  currencyFeed: 'EUR',
  currencyExchangeRates: {
    EUR: 1,
    USD: 1.21072
  },
  triggerSelector: '.search-input',
  cartUrl: '/cart',
  callbacks: {
    UserClickedResultAddToCart: result =>
      new Promise(resolve => {
        setTimeout(() => {
          console.log('Result added to the cart:', result);
          resolve();
        }, 1000);
      }),
    CartHandlerGettingCartInfo: () =>
    ({ productsCount: Math.floor(Math.random() * 20) + 1 })
  }
});

Dynamic Configurations Details

These are the dynamic parameters and their details.

Mandatory Parameters

Parameter	default	return	Description
xEngineId string	none	-	Unique identifier of your Search API engine. Example: 00000000-0000-0000-0000-000000000000

Optional Parameters

Parameter: lang

Type: string

Default: en

Return:  - 

Description: Language to be used by Motive for internationalizing messages (i.e. language of the search interface). Examples: es, en_UK

Parameter: currency

Type: string

Default: EUR

Return:  - 

Description: Currency code (ISO 4217) to be used by Motive for price exchanging and formatting, both for products and the price filter. Examples: USD, CAD

Parameter: currencyFeed

Type: string

Default: EUR

Return:  - 

Description: Feed currency code (ISO 4217) to define the source currency for price exchanging and formatting. Examples: USD, CAD

Parameter: currencyExchangeRates

Type: object

Default: -

Return:  - 

Description: Currency exchange rates. If you define it, at least the currency exchanges rates for the currency and currencyFeed should be defined, if not, MotiveX will manage it by you. Examples: {EUR: 1, USD: 1.21072}

Parameter: triggerSelector

Type: string

Default: #search_Widget

Return:  - 

Description: DOM selector which triggers the MotiveX Layer on its focus. Examples: .search-input , #search_widget form

Parameter: cartUrl

Type: string

Default: -

Return:  - 

Description: The URL to redirect on click in the cart button. Examples: /cart ,  https://my.awesome.site.com/cart

Parameter: callbacks.UserClickedResultAddToCartcallbacks.add2cart

Type: function

Default: -

Return: Promise<void>

Description: Callback function with the result data as a parameter for appending the result to the cart of the customer site. It must return a Promise. Examples: result => new Promise(resolve => { console.log(results); resolve(); })

Parameter: callbacks.CartHandlerGettingCartInfocallbacks.getCartInfo

Type: function

Default: -

Return: { productsCount: number | string, [extra: string]: any; }

Description: Callback function for getting the cart information of the customer site. This function must return an object with at least a key productsCount with the number of products.
Examples: () => ({ productsCount: 5 })

Loading the JavaScript Resource

The first step to integrate MotiveX layer is to load the JavaScript resource. In order to do it, include the following tag in your HTML structure:

<script src="https://assets.motive.co/motive-x/v2/app.js" type="module"></script>

The defer Attribute

    The deferattribute is used to speed up the process by loading the resource

    asynchronously, preventing the blocking of the page load.

Once the tag has been included and the script is up and running, Motive will automatically call the global window.initX function.

Changing Dynamic Configurations

Some situations, like changes in the language and currency, may result in the initialized MotiveX configuration not being valid anymore. If changes like this trigger a page reload on your site, MotiveX will initialize again with the correct values.

However, when a manual configuration change is needed, use the InterfaceX.setSnippetConfig function, which receives an object that can contain all the aforementioned configurations. 

Once executed, the InterfaceX.setSnippetConfig function:

1. Updates the internal configuration.
2. Reflects the changes in the interface.

Here's an example of this function used to change the currency parameter:

MotiveX.setConfig({
  currency: 'USD'
});

The recommended way to load the JavaScript resource is by using the following tag in your HTML structure:

<script src="https://assets.motive.co/motive-x/v2/app.js" type="module"></script>

The defer attribute helps to keep it blazing fast by loading the resource asynchronously and without blocking the page load. Once the script is ready, Motive will automatically call the global window.initX function (see the Initializing MotiveX section).