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

To use Infoplay, you’ll need two things:

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

Principles

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

oxomi.init({
    "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

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

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

                // Incorporate your item data into
                infoplayObj.items.push({
                    'itemNumber': data.itemNumber,
                    'supplierName': data.supplierName,
                    // ...
                });

                // Call up the following function via Infoplay’s code
                nextStep(infoplayObj);
            });
    }
});

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

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

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

        // ...and call up the subsequent function at the end
        nextStep(infoplayObj);
    }
});

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

oxomi.init({
    "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

oxomi.init({
    // ...
    "infoplayMenuTitle" : "Add to basket..."
});

}

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

oxomi.init({
    // ...
    "infoplayMenuTitle" : "I want __text__ in basket..."
});

Back to overview