Documentation

Preview

Elevate, May 20-22-2025, Miami Beach, Florida

Preview represents the page structure and data to render a specific page preview.

Get page structure and data for a preview

Response Representation: PagePreviewDataResponse. It returns the page structure and data for a specific Preview by its previewId.' Fetched using the getPreview method in the frontend SDK.

GET
https://PROJECT_NAME-COMPANY_NAME.frontastic.TLD/frontastic/preview

Returns the page structure and data for a specific preview by its previewId.

Path parameters:
PROJECT_NAME
​
String
​

Project Name

COMPANY_NAME
​
String
​

Company Name

TLD
​
String
​

The top-level domain for the environment, which includes .live, .io, and .rocks. For more information, see Hosts.

Query parameters:
locale
​
Locale
​

Locale

previewId
​
String
​

Preview ID

Request headers:

Accept
​
String
​

application/json

Commercetools-Frontend-Extension-Version
​
String
​

Extension version

Response:
200

PagePreviewDataResponse

asapplication/json

Request headers:

Accept
​
String
​

application/json

Commercetools-Frontend-Extension-Version
​
String
​

Extension version

Request Example:cURL
curl --get https://PROJECT_NAME-COMPANY_NAME.frontastic.TLD/frontastic/preview?locale={locale}&previewId={previewId} -i \
--header 'Accept: ${ACCEPT}'\
--header 'Commercetools-Frontend-Extension-Version: ${COMMERCETOOLS_FRONTEND_EXTENSION_VERSION}'
200 Response Example: PagePreviewDataResponsejson
{
  "previewId": "4c2dc7eo",
  "previewContext": {
    "customerName": "demo"
  },
  "page": {
    "pageId": "4e530bb93d40a78d11a26e2b04271rk3",
    "sections": {
      "footer": {
        "sectionId": "footer",
        "layoutElements": []
      },
      "head": {
        "sectionId": "head",
        "layoutElements": []
      },
      "main": {
        "sectionId": "main",
        "layoutElements": [
          {
            "layoutElementId": "bfe4d755-e641-4791-9c57-d1010eacec84",
            "configuration": {
              "size": 12,
              "mobile": true,
              "tablet": true,
              "desktop": true
            },
            "tastics": [
              {
                "tasticId": "48185ef7-2cd2-4593-ac82-1909d0f64731",
                "tasticType": "example/star-wars/character-search",
                "configuration": {
                  "mobile": true,
                  "tablet": true,
                  "desktop": true,
                  "data": null
                }
              }
            ]
          }
        ]
      }
    },
    "state": "default"
  },
  "pageFolder": {
    "pageFolderId": "4e830bb93d40a78011a26e2f04223532",
    "isDynamic": false,
    "pageFolderType": "landingpage",
    "configuration": {
      "path": "star-wars",
      "pathTranslations": []
    },
    "dataSourceConfigurations": [],
    "name": "star-wars",
    "ancestorIdsMaterializedPath": "/4e530bb9fd40a78011a26e7b041e8cc3",
    "depth": 1,
    "sort": 0
  },
  "data": {
    "dataSources": {

    }
  }
}