commerce-integrations v0.0.1-preview.1

The Integration Manager is an API abstraction layer for ecommerce backends.

What does it include?

1. A well-defined interface for ecommerce API Connectors.
2. Salesforce and Hybris Connectors that you can use or extend right away.
3. The Merlins Connector - a demo implementation of the interface using a screen-scraping backend.

Our Merlins connector shows how to build a data layer for ecommerce backends that do not provide an API. By isolating browser dependencies like this, we can open up opportunities for reuse in other contexts - AMP, Desktop, etc.

Getting started

A crash course, with React/Redux:

import {SalesforceConnector} from 'commerce-integrations/dist/sfcc'
import {createStore, applyMiddleware, combineReducers} from 'redux'
import thunk from 'redux-thunk'


// 1. Import and extend a Connector
class CustomSalesforceConnector extends SalesforceConnector {

    searchProducts(searchParams, opts = {}) {
        // Customize the built-in method to add logging, as an example.
        console.log('Before call')
        return Promise.resolve()
            .then(() => super.searchProducts(searchParams, opts)
            .then((result) => {
                console.log('After call')
                return result
            }))
    }
}

const connector = CustomSalesforceConnector.fromConfig({
    basePath: 'https://mobify-tech-prtnr-na03-dw.demandware.net/s/2017refresh/dw/shop/v17_8',
    defaultHeaders: {
        'x-dw-client-id': '5640cc6b-f5e9-466e-9134-9853e9f9db93'
    }
})


// 2. Write Redux reducers
const products = (state = null, action) => {
  switch (action.type) {
    case 'PRODUCTS_RECEIVED':
      return action.products
    default:
      return state
  }
}

const reducer = combineReducers({products})


// 3. Initialize the Redux store and make the connector available in
// all redux-thunk actions, using `withExtraArgument`.
const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument({connector: connector}))
)


// 4. Write Redux actions, as usual
export const productsReceived = (products) => {
    return {
      type: 'PRODUCTS_RECEIVED',
      products,
    }
}

export const searchProducts = (searchParams) => (dispatch, getState, {connector}) => {
    // Note: We can access the injected connector here
    return connector.searchProducts(searchParams)
        .then((products) => dispatch(productsReceived(products)))
}


// 5. To demo, log all state changes
store.subscribe((action) => {
    console.log('Action:')
    console.log(JSON.stringify(action, null, 4))
    console.log('State:')
    console.log(JSON.stringify(store.getState(), null, 4))
})

store.dispatch(searchProducts({filters: {categoryId: 'root'}}))