Menu Sheet Overlay
Search Sheet


    The Integration Manager provides an abstraction layer between your progressive web app and the source of its ecommerce data. This data can come from a dedicated ecommerce platform, a desktop website, or a custom API.

    To give you a head start on building your app, we’ve included ready-made connectors for Integration Manager that already know how to fetch and update data using popular ecommerce platforms. We also make it easy to create your own custom connector for any data source.

    The Integration Manager handles fetching and updating ecommerce data in a standard way without forming any dependencies on any particular ecommerce platform. This gives you the flexibility to connect your app to a new platform in the future without making extensive changes to your code.

    Design goals #

    We designed the Integration Manager with two goals in mind:

    1. Eliminate repetitive work: Building a progressive web app against an ecommerce platform shouldn’t mean you have to start from zero every time. You just have to select one of the included connectors to add real ecommerce data to your app.
    2. Support extensibility and customization: Because we can’t anticipate the needs of every project, we’ve designed the Integration Manager to be extensible and customizable without requiring updates to Mobify’s Progressive Web SDK. For more information, read the Extending a Connector guide.

    How does it work? #

    The Integration Manager introduces a small “detour” into the standard data flow for Redux actions. It all starts when a React component in your application dispatches a Redux action that is local to the component. After handling user-interface tasks like starting a spinner or opening a modal, the action can dispatch an Integration Manager command. (Integration Manager commands are also Redux actions.) The Integration Manager delegates the execution of the command to the currently configured connector. The connector executes the command in a way that is compatible with the ecommerce data source that it is built for. That means that the same command will be interpreted differently by different connectors. When the command has completed, it dispatches another type of Redux action called a result. The data returned by the result is merged into the Redux store by reducers that are provided by the Integration Manager. At this point, the standard data flow for Redux actions resumes, and the application’s components are notified about any changes to the Redux store that may require them to re-render.

    The diagram below shows how the Integration Manager fits into the architecture of your progressive web application.

    Integration Manager architecture

    (Click the image for a larger version.)