Infoplay 2.0

Infoplay is an item-based integration of your data. Here’s an example of how this could look like: Infoplay for instance allows you to link item numbers in catalogs, descriptions and galleries to products in your shop system. Therefore, users can add items to their basket by clicking the purchase-button shown in the Infoplay dialog. That way, users don’t have to go through the hassle of searching your entire shop system for a specific item.

But the basket transfer is just one of many options you can use here. You can also effortlessly create hyperlink connections to product detail pages and more.

Example: Infoplay 2.0 dialog

Infoplay 2.0 Dialog

To use Infoplay, you’ll need two things:

  • OXOMI JavaScript component
  • The upgrade “Infoplay” in your service package


Customize Infoplay

You can customize Infoplay during the initialization process by passing the required functions with the help of oxomi.init().

Overview: Customizable functions

Property Functionality
infoplayItemLookup Allows inquiries regarding price, availability and other product data via your merchandise management system or your shop system.

For more details, go to the section how to integrate your item information.

infoplayEmptyResultHandler Will be called if the infoplayItemLookup’s search and OXOMI’s internal search don’t provide data on the chosen item number. Can be used to create a generic placeholder item for inquiries. The retrieval signature is the same as for infoplayItemLookup. Should this feature be omitted, the user sees an appropriate message.
infoplayBasketHandler Is used to place the chosen item into the shop system’s basket.

For more details, go to the section basket transfer.

infoplayItemHandler Can be used for the integration of a completely personalized Infoplay functionality.

For more details, go to the section personalized Infoplay functionality.

Example: How you adjust Infoplay functionality

    "portal": "demo",
    "infoplayItemLookup": function(infoplayObj, nextFunc) {},
    "infoplayBasketHandler": function(infoplayObj, nextFunc) {}

Please note: Feel free to test Infoplay 2.0 functionality with our sample data available at our “DEMO” portal. To do so, please use the item number “ST.001.A”.

Infoplay data structure

All data relevant to Infoplay is provided in the following data structure. The corresponding JavaScript-object can be accessed by all Infoplay functions. The data of the objects first layerwill be filled by OXOMI’s JavaScript component.

Example: Infoplay data structure

    // This data will be filled by the JavaScript component
    'itemNumber': '1234.56 78',         // String
    'compactSelection': '1234.5678',    // String
    'supplierNumber': '1111',           // String
    'supplierNumbers':['1111', '1112'], // List
    'direct': null,                     // Boolean
    'catalogId': 'ABC123',              // String
    'catalogName': 'Catalog',           // String
    'pageNum': 1,                       // Number
    'visiblePageNum': 'COVER',          // String

    // This array needs to be filled by your system during the item lookup
    'items': [                          // Array
        // ...

The field items needs to be filled during the item lookup. To do so, simply fill in the required item information (in form of a JavaScript object). This property value is an array, since multiple item versions can sometimes carry the same item number.

Example: Items Objects in Infoplay data structure

    // ...

    // This array gets filled by your system during the item lookup
    'items': [                                  // Array
        {'itemNumber': '1234.5678',             // String
        'supplierName': 'ACME Ltd.'             // String
        'shortText': 'Description text',        // String
        'previewImageUrl': '/thumbnail.jpg',    // String
        'itemUrl': '/item/1234',                // String
        'features': [                           // Array
            {'title': 'Availability',           // String
             'fields': [                        // Array
                {'name': 'Main location',       // String
                 'span': false,                 // Boolean
                 'value': '50 pieces'}          // String
        'sections': [],                         // Array
        'open': function() { ... },             // Function
        'select': function() { ... }            // Function

Overview: Item object properties

Property Type Description
itemNumber String Item number of the chosen item
supplierName String Name of the supplier
shortText String Description text of the chosen item
shortTextHTML String

Alternative descriptive text of the selected article as HTML. If filled, this replaces shortText when displayed.

Use this object property if your item lookup outputs special characters as encoded HTML entities (e.g. ü instead of ü).

quantity String Initial order quantity. After click on the purchase button it contains the the current order quantity from the Infoplay dialog.
previewImageUrl String Web address of a thumbnail
itemUrl String Web address of the item (e.g. in an online store)
features Array

This is where you get to personalize a dynamic section of the Infoplay dialog. Each component is a JavaScript object that consists of the attributes title and fields. Where fields can consist of the attributes name, span, and value.

  • Use name to define the value’s term (type: String).
  • Use span to determine if the segment should (or shouldn’t) cover the entire dialog (type: Boolean).
  • Use value to define this field’s value (type: String).

Pro tip: You can also use value to add your own HTML or jQuery object with joint event listeners. The latter can be used to integrate additional buttons into the dialog.

sections Array

Define your own dialog sections here (analog to the features). These sections defined here overwrite the default appearance of the Infoplay dialog.

This allows you to customize the entire Infoplay dialog. If you don’t wish to use this, go ahead and use the property features instead.

open Function This is optional and defines the function that is executed via the “go to item” function. Alternatively, a link to the value of itemUrl is incorporated.
select Function Defines the function that is called once an item is chosen from a range of multiple item variants.
reresolve boolean This value can be used if multiple item versions appear in the search results. To find a suitable alternative, the infoplayItem function can be recalled via the matching item number and isSelectedAlternative=true. This can also be applied to load additional data for a particular item.

This parameter is false by default. Should an alternative (which doesn’t come with a select() or open function) be requested, the located item will be displayed.

Infoplay code sequence

Overview: The primary functions

Function Description
infoplayItem Controls the execution of the entire Infoplay code.
infoplayItemHandler Replaces (if existent) the entire integration of the Infoplay component with its own functionality.
infoplayItemLookup Searches your system for information regarding an item.
Rendering A multitude of functions that issue the output of the Infoplay dialog.
infoplayBasketHandler Defines the course of action when the user clicks on the dialog’s order button.
Customizable functions are emphasized.

How to integrate your item information

Infoplay incorporates your item’s information into OXOMI’s Portal Viewer and galleries. The incorporated item information is retrieved from your systems.

To do so, assign a function to the property value infoplayItemLookup. The value items (of the Infoplay object) needs to be filled with your item information.

Example: Your item lookup

    "portal": "demo",
    "infoplayItemLookup": function(infoplayObj, nextStep) {

        // Search own web service for item information
        $.getJSON(''+ infoplayObj.itemNumber,
            function(data) {

                // Incorporate your item data into
                    'itemNumber': data.itemNumber,
                    'supplierName': data.supplierName,
                    // ...

                // Call up the following function via Infoplay’s code

In general, you’ll retrieve information regarding your items through a web service interface. Make sure that your data comes in the required Infoplay-object data structure.

Please note: If you recorded several item numbers within a link (green dot) of a gallery, they are passed on in form of an array in infoplayObj.itemNumbers. As always, the first of these item numbers will appear here: infoplayObj.itemNumber. If you’d like to use the item list feature in galleries, please make sure that your (own) web service then searches for all of the item numbers in infoplayObj.itemNumbers. If you aren’t using this feature, feel free to ignore this suggestion.

Example: Infoplay object with individual data

    // ...
    'items': [
        {'itemNumber': '1234.5678',
        'supplierName': 'ACME Ltd.'
        'shortText': 'Description text',
        'previewImageUrl': '/thumbnail.jpg',
        'itemUrl': '/item/1234',
        'features': [
            {'fields': [{
                  'name': 'Sales price',
                  'value': '134 EUR'
                }, {
                  'name': 'Minimum order quantity',
                  'value': '1 piece'
                }, {
                  'name': 'Ordering step',
                  'value': '1 piece'

Please note: Don’t forget to call the function for the subsequent processing step at the end of the function you programmed. You’ll receive this callback function as a second parameter of the function call. The Infoplay object, which you processed, then needs to be passed to the subsequent function.

Example: How to call up the subsequent function

    "portal": "demo",
    "infoplayItemLookup": function(infoplayObj, nextStep) {

        // This is where I process the item’s information
        // ...

        // ...and call up the subsequent function at the end

Basket transfer

You can customize Infoplay so that desired items can be added to your online store’s basket via one click on the Infoplay dialog’s purchase button. To do so, you’ll have to define your specific function and assign it to the property value infoplayBasketHandler.

Example: Code for basket transfer

    "portal": "demo",
    "infoplayBasketHandler": function(infoplayObj, nextStep) {

        // z.B.: e.g.: Redirection to add to basket
        // ...with item number and order quantity
        location.href = '/basket/add?item='+ infoplayObj.itemNumber +'&quantity=' + infoplayObj.quantity;

Additional adjustments

Change menu title

The user accesses the Infoplay dialog via a context menu in the Portal Viewer. The link’s title can be changed via the parameter infoplayMenuTitle.

Portal-Viewer Artikel-Kontextmenü Standardfall

Should you chose to forego the configuration of the menu title, the default text “search data for ***...” will show up. “***” represents the selected item number and is dynamically embedded into the title via the placeholder __text__.

Example: How to adjust the menu title

    // ...
    "infoplayMenuTitle" : "Add to basket..."

Example: How to adjust the menu title with a selected item number

    // ...
    "infoplayMenuTitle" : "I want __text__ in basket..."