Centra for DatoCMS

Select Centra products, exact product variants, and buyable SKU/size items directly from DatoCMS records.

Centra remains the source of truth for catalog data. The plugin stores only stable reference IDs in DatoCMS and loads names, media, prices, availability, stock, SKU values, and other product details live from Centra.

• Product picker restricted to each display's primary variant
• Exact product-variant picker
• SKU/size picker backed by Centra Item IDs
• Single and ordered multiple selections
• Product-first search with SKU, size, product-number, variant, and GTIN discovery
• Live product cards with unresolved and availability states
• Light and dark mode support through DatoCMS UI tokens

Configuration

Open the plugin settings and enter:

1. Storefront API URL — the complete Centra no-session GraphQL URL.
2. API token — a read-only token for that endpoint.

Select Save and connect. The plugin validates the credentials by loading one catalog page before saving. The same Centra connection is used in every DatoCMS environment.

Adding a Centra field

1. Create a DatoCMS JSON field.
2. In the field's Presentation settings, choose Centra.
3. Choose the reference kind:
   • Product (primary variant) — browse one primary DisplayItem per product display.
   • Exact variant — browse every DisplayItem/product variant.
   • SKU / size — choose a nested Centra Item.
4. Choose Single or Multiple cardinality.

Changing a populated field to an incompatible kind or changing a multi-value field with several references to single cardinality does not discard or reinterpret data. The editor asks for an explicit clear or replacement.

Editor workflow

Choose what editors can select

Configure the JSON field for products, exact product variants, or individual SKU/size items.

Search and select exact variants

Search the live Centra catalog, compare image-backed variants, and stage one or more selections before applying them.

Select a specific SKU or size

Expand a product variant and select the exact Centra Item. Repeated SKU strings remain separate rows with their own size and Item ID.

Work with hydrated references

Saved references are rendered with current Centra images, variant details, and availability while the JSON value keeps only stable IDs.

Stored value contract

The JSON field contains a versioned document. null is the only empty value.

One product

1
{
2
  "version": 1,
3
  "kind": "primaryProduct",
4
  "references": [{ "displayItemId": 2752 }]
5
}

Ordered product variants

1
{
2
  "version": 1,
3
  "kind": "variant",
4
  "references": [
5
    { "displayItemId": 2752 },
6
    { "displayItemId": 2810 }
7
  ]
8
}

One SKU/size item

1
{
2
  "version": 1,
3
  "kind": "item",
4
  "references": [
5
    {
6
      "displayItemId": 2752,
7
      "itemId": "opaque-centra-item-id"
8
    }
9
  ]
10
}

The plugin intentionally does not store product names, URIs, images, prices, stock, SKU strings, GTINs, or full product snapshots. Those values can change in Centra and are loaded live.

Resolving references in a frontend

Query the JSON field from DatoCMS using its API key. The Content Delivery API returns the field as a JSON-encoded string, or null when the field is empty. Replace centraProducts below with your field's API key.

1
query ProductPage {
2
  product {
3
    centraProducts
4
  }
5
}

The response contains a string rather than a parsed reference document:

1
{
2
  "data": {
3
    "product": {
4
      "centraProducts": "{\"version\":1,\"kind\":\"variant\",\"references\":[{\"displayItemId\":2752}]}"
5
    }
6
  }
7
}

Parse the field before reading its references:

1
type CentraReferenceDocument =
2
  | {
3
      version: 1;
4
      kind: 'primaryProduct' | 'variant';
5
      references: { displayItemId: number }[];
6
    }
7
  | {
8
      version: 1;
9
      kind: 'item';
10
      references: {
11
        displayItemId: number;
12
        itemId: string;
13
      }[];
14
    };
15

16
function parseCentraField(
17
  rawValue: string | null,
18
): CentraReferenceDocument | null {
19
  if (rawValue === null) return null;
20

21
  // Add runtime validation for the version, kind, and reference shape
22
  // before using this data in production.
23
  return JSON.parse(rawValue) as CentraReferenceDocument;
24
}
25

26
const document = parseCentraField(data.product.centraProducts);
27
const displayItemIds = [
28
  ...new Set(
29
    document?.references.map(({ displayItemId }) => displayItemId) ?? [],
30
  ),
31
];

After parsing the DatoCMS value, fetch the referenced DisplayItems from Centra using those numeric IDs:

1
query ResolveCentraReferences(
2
  $displayItemIds: [Int!]
3
  $market: [Int!]
4
  $pricelist: [Int!]
5
  $languageCode: [String!]
6
) {
7
  displayItems(
8
    where: { id: $displayItemIds }
9
    limit: 100
10
    market: $market
11
    pricelist: $pricelist
12
    languageCode: $languageCode
13
  ) {
14
    list {
15
      id
16
      name
17
      productNumber
18
      isPrimaryVariant
19
      available
20
      hasStock
21
      productVariant {
22
        id
23
        name
24
        number
25
      }
26
      items {
27
        id
28
        name
29
        sku
30
        GTIN
31
        preorder
32
        stock {
33
          available
34
        }
35
      }
36
    }
37
  }
38
}

Centra may return DisplayItems in a different order. Reorder them using the parsed references array, and keep a placeholder for any missing DisplayItem instead of silently dropping the saved reference.

SKU behavior

For a field configured for SKUs/sizes, parsing the DatoCMS JSON string produces a document with kind: 'item'. Each reference contains the parent DisplayItem ID and the exact nested Centra Item ID:

1
const document = parseCentraField(data.product.centraSkus);
2

3
if (document?.kind === 'item') {
4
  const displayItemsById = new Map(
5
    displayItems.map((displayItem) => [displayItem.id, displayItem]),
6
  );
7

8
  const resolvedSkus = document.references.map((reference) => {
9
    const displayItem = displayItemsById.get(reference.displayItemId);
10
    const item =
11
      displayItem?.items.find(({ id }) => id === reference.itemId) ?? null;
12

13
    return { reference, displayItem, item };
14
  });
15
}

In this example, displayItems is the list returned by the Centra query above. Mapping over the parsed references array preserves the editor-defined order. Keep entries with a missing displayItem or item visible in your application rather than silently dropping them.

SKU and GTIN values are searchable display metadata, not identity. Centra catalogs can contain duplicate SKU values, even within the same DisplayItem, so frontend code must not resolve a selection by SKU or GTIN. The stable identity is the stored displayItemId and itemId pair.

Availability and stock

Market, pricelist, language, and Centra allocation rules can change what is visible or available. Product and item stock shown in DatoCMS is the current Storefront API response, not a guarantee that checkout will succeed later.

Missing or inactive references remain visible in the field editor with their stored IDs so editors can remove or replace them deliberately.

Troubleshooting

Connection test fails

• Confirm the URL is the complete no-session GraphQL endpoint.
• Confirm the bearer token belongs to the same Storefront API plugin.
• Avoid using the AMS URL as the API endpoint.
• Inspect the HTTP or GraphQL error shown by the plugin; credentials are redacted from messages.

Prices or translations differ from the Centra backoffice

The plugin uses the market, pricelist, and language defaults exposed by the configured no-session endpoint. Adjust those defaults in Centra if the catalog response is not the one editors should browse.

A primary product now shows a warning

The selected DisplayItem is pinned. If Centra later assigns another primary variant, the plugin warns and leaves the existing reference untouched. Replace it explicitly if the content should follow the new primary choice.