Sanity Custom Input Plugin: Nacelle PIM Linker

Nacelle indexes data from your PIM (e.g. Shopify, Magento) and CMS to power headless eCommerce projects. This plugin provides a custom input component for Sanity Studio that helps you reference product & collection data stored in Nacelle indices.

Expand to see the custom input component in action!

Installation & Setup

Install Peer Dependencies

npm i @sanity/ui styled-components

Install the plugin

sanity install @nacelle/sanity-plugin-pim-linker

Credentials

You'll need to provide the ID and Token associated with your Nacelle space. These credentials can be found in the Nacelle Dashboard.

For a single space you can add these credentials in one of two ways:

in ./config/@nacelle/sanity-plugin-pim-linker.json

{
  "nacelleSpaceId": "your-nacelle-space-id",
  "nacelleSpaceToken": "your-nacelle-graphql-token"
}

in .env.development / .env.production

SANITY_STUDIO_NACELLE_SPACE_ID=your-nacelle-space-id
SANITY_STUDIO_NACELLE_SPACE_TOKEN=your-nacelle-graphql-token

For multiple spaces you can add these credentials like this:

in ./config/@nacelle/sanity-plugin-pim-linker.json

"nacelleSpaces": [
    {
      "spaceName": "Space 1",
      "spaceId": "your-nacelle-space-id",
      "spaceToken": "your-nacelle-graphql-token"
    },
    {
      "spaceName": "Space 2",
      "spaceId": "clever-owl-jr0WwlZv7L",
      "spaceToken": "2a74743f-7a00-4274-9cb6-2dfe15e89d47"
    }
  ]

Use in Schema Documents

Set the type field to nacelleData to use the custom input component:

{
  name: 'handle',
  title: 'Handle',
  type: 'nacelleData',
}

Options

By default, the custom input component allows you to choose a handle from either products or collections.

Realistically, you probably want to restrict the component to either products or collections. To do that, provide either ['products'] or ['collections'] to options.dataType:

// example: collections ONLY
{
  name: 'collectionHandle',
  title: 'Collection',
  type: 'nacelleData',
  options: {
    dataType: ['collections']
  }
}

// example: products ONLY
{
  name: 'productHandle',
  title: 'Product',
  type: 'nacelleData',
  options: {
    dataType: ['products']
  }
}

Using This Data in Your Frontend Project

Since this custom input component just stores the handle of a particular product or collection, you'll use the Nacelle Client JS SDK to fetch the associated product or collection object.

Product

const product = await client.data.product({
  handle: 'handle-from-my-sanity-entry'
})

Collection

const collection = await client.data.collection({
  handle: 'handle-from-my-sanity-entry'
})

const productHandles = collection.productLists[0].handles

const collectionProducts = await client.data.products({
  handles: productHandles
})