Menu
Menu Sheet Overlay
Search
Search Sheet

Integration Manager 0.4

    This guide is for projects upgrading from version 0.24.1 of the Progressive Web SDK, which did not have a separate Integration Manager module

    In the January 2018 release, the Integration Manager v0.4 is released with several breaking changes that improve the extensibility and usability. We have also made changes to improve command visibility and the debugging experience.

    New NPM Package

    Integration Manager is now available as a separate NPM package: mobify-integration-manager. Previously, it was a part of Mobify’s Progressive Web SDK. By extracting the Integration Manager into a separate module, we can provide developers with a clear upgrade path without worrying about Progressive Web SDK breaking changes.

    Installation

    To start using Integration Manager v0.4, you will need to install it in your project:

    npm install --save mobify-integration-manager
    

    Importing

    With Integration Manager v0.4, you will need to update the import paths in your project, for example:

    // Previous version
    import { getCart } from "progressive-web-sdk/dist/integration-manager/cart/commands"
    
    // New Integration Manager v0.4
    import {IntegrationManager} from "mobify-integration-manager/dist/"
    

    Note that you no longer need to import individual commands, import the Integration Manager object instance instead.

    Integration Manager Object Instance

    We’ve made significant changes to improve the accessibility of the Integration Manager API. The Integration Manager command tree is exposed by a JavaScript object instance. Integration Manager will construct the object by gathering available commands from your choice of ecommerce connector (Salesforce Commerce Cloud, SAP Hybris or custom connector) and your Integration Manager extension.

    Initialization

    To initialize the Integration Manager instance, use the Integration Manager’s initialize method. Here is an example of how to initialize with the Salesforce Commerce Cloud connector:

    import IntegrationManager from "mobify-integration-manager/dist";
    import {Connector} from "mobify-integration-manager/dist/connectors/sfcc";
    
    IntegrationManager.initialize(
      Connector({
        /* Salesforce Connector configuration */
      })
    );
    

    Usage

    To dispatch an Integration Manager command, you can access the commands through Integration Manager instance:

    // Previous version
    import { getCart } from "progressive-web-sdk/dist/integration-manager/cart/commands";
    dispatch(getCart());
    
    // New Integration Manager v0.4
    import IntegrationManager from "mobify-integration-manager/dist/";
    dispatch(IntegrationManager.cart.getCart());
    

    Integration Manager commands are organized into branches or “command sets”. The built-in command sets are listed below, for the complete API document, please go to API Reference.

    Override/Custom Commands

    To override an existing command or add a new custom commands, simply provide an extension object to the initialize method. If you want to override an specific command, use the same branch name and command name.

    import IntegrationManager from "mobify-integration-manager/dist/";
    import { Connector } from "mobify-integration-manager/dist/connectors/sfcc";
    
    const extension = {
      // Override the existing getCart command in cart branch
      cart: {
        getCart: () => (dispatch) { /* implementation */ }
      },
      // New custom commands
      customCommandSet1: { customCommand1, customCommand2 },
      customCommandSet2: { customCommand3, customCommand4 }
    };
    
    IntegrationManager.initialize(
      Connector({
        /* Salesforce Connector configuration */
      }),
      extension
    );
    

    To use override or custom commands, simply access the Integration Manager instance just like the way you use built-in commands.

    import IntegrationManager from "mobify-integration-manager/dist/";
    dispatch(IntegrationManager.cart.getCart());
    dispatch(IntegrationManager.customCommandSet1.customCommand1());
    dispatch(IntegrationManager.customCommandSet2.customCommand3());
    

    Debugging

    Integration Manager v0.4 provides a debugging option that will output console logs showing the entire command tree. Pass {debug: true} as the third parameter to initialize.

    import IntegrationManager from "mobify-integration-manager/dist/";
    import { Connector } from "mobify-integration-manager/dist/connectors/sfcc";
    
    IntegrationManager.initialize(
      Connector({
        /* Salesforce Connector configuration */
      }),
      extension,
      { debug: true }
    );
    

    Here is an example of what to expect in your console when the app starts up or when console.log(IntegrationManager):

    There are several “decorations” in the console output:

    Integration Manager API Update

    We are in the process of deprecating “page” related commands with pure eCommerce Network commands for easier customization. If you have custom implementations (overrides) of any of these init*Page commands (listed below), you should move the logic into the appropriate actions.js file in the container folders of the project. Only use Integration Manager commands to populate data that is retrieved from the back-end.

    Account

    Deprecated commands:

    New commands:

    Categories

    Deprecated commands:

    New commands: