README

Nacelle Compatibility Connector

Connects @nacelle/client-js-sdk to Nacelle's v2 back end, and transforms data to match the Nacelle v1 data shapes used in existing Nacelle projects.

Installation

If your @nacelle/client-js-sdk version is below 3.7.1, please install the @latest version:

npm i @nacelle/client-js-sdk@latest

Once you have @nacelle/client-js-sdk@3.7.1 or above installed, install both @nacelle/compatibilty-connector and @nacelle/storefront-sdk:

npm i @nacelle/compatibility-connector @nacelle/storefront-sdk

Usage

Setting Up The Connector

Provide the connector with Storefront API credentials available from the Nacelle Dashboard. Then initialize the NacelleClient SDK with the compatibility connector.

import NacelleClient from '@nacelle/client-js-sdk';
import createCompatibilityConnector from '@nacelle/compatibility-connector';

// Initialize the Compatibility Connector
const compatibilityConnector = new createCompatibilityConnector({
  endpoint: 'nacelle-storefront-endpoint',
  token: 'nacelle-storefront-token',
  locale: 'en-US'
});

// Initialize the SDK client
const client = new NacelleClient({
  connector: compatibilityConnector
});

Fetching Data

Once the connector has been initialized and the client updated, you can fetch data using any of the @nacelle/client-js-sdk methods. Below is an example of fetching a product.

const product = await client.data.product({
  handle: 'handle-1'
});

Using with `@nacelle/nacelle-nuxt-module`

When using @nacelle/nacelle-nuxt-module, additional steps are required in order to use the Compatibility Connector.

First, please ensure that your version version of @nacelle/nacelle-nuxt-module is 5.0.0 or higher. If it's below 5.0.0, install the latest version of @nacelle/nacelle-nuxt-module:

npm i @nacelle/nacelle-nuxt-module@latest

In nuxt.config.js, initialize @nacelle/compatibility-connector by providing the Nacelle v2 Storefront API credentials. Next, initialize @nacelle/client-js-sdk with the compatibility connector. Then pass the SDK client to buildClient in the nacelle options. See below for an example:

import NacelleClient from '@nacelle/client-js-sdk';
import createCompatibilityConnector from '@nacelle/compatibility-connector';

// Initialize the Compatibility Connector
const compatibilityConnector = new createCompatibilityConnector({
  endpoint: 'nacelle-storefront-endpoint',
  token: 'nacelle-storefront-token',
  locale: 'en-US'
});

// Initialize the SDK client
const client = new NacelleClient({
  connector: compatibilityConnector
});

export default {
  // ...
  // Rest of nuxt.config.js settings
  // ...

  nacelle: {
    buildClient: client // The client that was initialized and updated above.
  }
};

Now whenever $nacelle is used, data will be fetched from Nacelle's v2 back end.

const product = await this.$nacelle.data.product({
  handle: 'handle-1'
});

Limitations

General

Media with the type external_video will now return as video.

Products & Collections

The fields pimSyncSource and pimSyncSourceDomain will return an empty string.

Content

The field cmsSyncSourceDomain will return an empty string.

Space

The name and domain returned with client.data.space() will be an empty string.

For link lists returned with client.data.space(), absolute URLs (e.g. https://nacelle.com/some/page) will have their type set to External, while relative URLs (e.g. /path/to/some/page) will have their type set to Page.

Usage no npm install needed!