Fragment Catalog
pxm
Presentation Experience Management's reusable fragments
Presentation Experience Fragments API documentation
These fragments are server-side rendered HTML components that fetch content from CMS and render standardized UI components. Each fragment supports localization through locale parameters (ru/lc) and integrates with Edge-Side Includes (ESI) for efficient caching. Fragments are designed to be embedded in larger pages and provide consistent, reusable UI patterns across IKEA digital experiences.
Standardised hero component with title, body text, and media (image or video). The component fetches content from CMS based on a content ID and displays it with optional commercial messaging. Supports localization and can include shoppable dots on the image. Only supports the 'story' content model.
Compliance Report
Validation of OpenAPI specifications against CWF fragment requirements.
Presentation Experience Fragments API documentation
{
"namespace": "pxm",
"description": "Presentation Experience Management's reusable fragments",
"specifications": [
{
"id": "v1",
"type": "openapi_v3",
"openapi": {
"openapi": "3.1.0",
"info": {
"title": "Presentation Experience Fragments API documentation",
"description": "These fragments are server-side rendered HTML components that fetch content from CMS and render standardized UI components. Each fragment supports localization through locale parameters (ru/lc) and integrates with Edge-Side Includes (ESI) for efficient caching. Fragments are designed to be embedded in larger pages and provide consistent, reusable UI patterns across IKEA digital experiences.",
"version": "v1"
},
"servers": [
{
"url": "https://www.cte.ikeadt.com",
"description": "CTE"
}
],
"paths": {
"/{ru}/{lc}/pxm-fragments/hero/": {
"get": {
"responses": {
"200": {
"description": "HTML fragment",
"content": {
"text/html": {
"schema": {
"type": "string"
}
}
}
},
"400": {
"description": "Bad request",
"content": {
"text/html": {
"schema": {
"type": "object",
"properties": {
"success": {
"type": "boolean",
"const": false
},
"error": {
"type": "object",
"properties": {
"name": {
"type": "string",
"const": "ZodError"
},
"issues": {
"type": "array",
"items": {
"type": "object",
"properties": {
"code": {
"type": "string"
},
"path": {
"type": "array",
"items": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
}
},
"message": {
"type": "string"
}
},
"required": [
"code",
"path",
"message"
],
"additionalProperties": {}
}
}
},
"required": [
"name",
"issues"
]
}
},
"required": [
"success",
"error"
]
}
}
}
},
"404": {
"description": "404 Not Found",
"content": {
"text/html": {
"schema": {
"type": "string",
"const": "404 Not Found"
}
}
}
}
},
"operationId": "getHero",
"tags": [
"Fragments"
],
"parameters": [
{
"in": "query",
"name": "inline",
"schema": {
"type": "string"
},
"required": false
},
{
"in": "query",
"name": "contentId",
"schema": {
"type": "string",
"minLength": 1
},
"required": true
},
{
"in": "query",
"name": "shoppable",
"schema": {
"type": "string",
"enum": [
"true",
"false"
],
"default": "false"
},
"required": false
},
{
"in": "path",
"name": "ru",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
},
{
"in": "path",
"name": "lc",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
}
],
"summary": "Hero fragment",
"description": "Standardised hero component with title, body text, and media (image or video). The component fetches content from CMS based on a content ID and displays it with optional commercial messaging. Supports localization and can include shoppable dots on the image. Only supports the 'story' content model."
}
},
"/{ru}/{lc}/pxm-fragments/quote/": {
"get": {
"responses": {
"200": {
"description": "HTML fragment",
"content": {
"text/html": {
"schema": {
"type": "string"
}
}
}
},
"400": {
"description": "Bad request",
"content": {
"text/html": {
"schema": {
"type": "object",
"properties": {
"success": {
"type": "boolean",
"const": false
},
"error": {
"type": "object",
"properties": {
"name": {
"type": "string",
"const": "ZodError"
},
"issues": {
"type": "array",
"items": {
"type": "object",
"properties": {
"code": {
"type": "string"
},
"path": {
"type": "array",
"items": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
}
},
"message": {
"type": "string"
}
},
"required": [
"code",
"path",
"message"
],
"additionalProperties": {}
}
}
},
"required": [
"name",
"issues"
]
}
},
"required": [
"success",
"error"
]
}
}
}
},
"404": {
"description": "404 Not Found",
"content": {
"text/html": {
"schema": {
"type": "string",
"const": "404 Not Found"
}
}
}
}
},
"operationId": "getQuote",
"tags": [
"Fragments"
],
"parameters": [
{
"in": "query",
"name": "inline",
"schema": {
"type": "string"
},
"required": false
},
{
"in": "query",
"name": "contentId",
"schema": {
"type": "string",
"minLength": 1
},
"required": true
},
{
"in": "path",
"name": "ru",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
},
{
"in": "path",
"name": "lc",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
}
],
"summary": "Quote fragment",
"description": "Standardised quote component with saying, quotee, role, and associated media with products. The component fetches content from CMS based on a content ID. Supports localization and can include shoppable dots on the media. Only supports the 'quote' content model."
}
},
"/{ru}/{lc}/pxm-fragments/gallery/": {
"get": {
"responses": {
"200": {
"description": "HTML fragment",
"content": {
"text/html": {
"schema": {
"type": "string"
}
}
}
},
"400": {
"description": "Bad request",
"content": {
"text/html": {
"schema": {
"type": "object",
"properties": {
"success": {
"type": "boolean",
"const": false
},
"error": {
"type": "object",
"properties": {
"name": {
"type": "string",
"const": "ZodError"
},
"issues": {
"type": "array",
"items": {
"type": "object",
"properties": {
"code": {
"type": "string"
},
"path": {
"type": "array",
"items": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
}
},
"message": {
"type": "string"
}
},
"required": [
"code",
"path",
"message"
],
"additionalProperties": {}
}
}
},
"required": [
"name",
"issues"
]
}
},
"required": [
"success",
"error"
]
}
}
}
},
"404": {
"description": "404 Not Found",
"content": {
"text/html": {
"schema": {
"type": "string",
"const": "404 Not Found"
}
}
}
}
},
"operationId": "getGallery",
"tags": [
"Fragments"
],
"parameters": [
{
"in": "query",
"name": "inline",
"schema": {
"type": "string"
},
"required": false
},
{
"in": "query",
"name": "contentId",
"schema": {
"type": "string",
"minLength": 1
},
"required": true
},
{
"in": "path",
"name": "ru",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
},
{
"in": "path",
"name": "lc",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
}
],
"summary": "Gallery fragment",
"description": "Standardised gallery component with title, description, and media items (images or videos). The component fetches content from CMS based on a content ID and displays it with optional shoppable dots on the media. Only supports the 'visualMessage' content model."
}
},
"/{ru}/{lc}/pxm-fragments/visual-pill-slider/": {
"get": {
"responses": {
"200": {
"description": "HTML fragment",
"content": {
"text/html": {
"schema": {
"type": "string"
}
}
}
},
"400": {
"description": "Bad request",
"content": {
"text/html": {
"schema": {
"type": "object",
"properties": {
"success": {
"type": "boolean",
"const": false
},
"error": {
"type": "object",
"properties": {
"name": {
"type": "string",
"const": "ZodError"
},
"issues": {
"type": "array",
"items": {
"type": "object",
"properties": {
"code": {
"type": "string"
},
"path": {
"type": "array",
"items": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
}
},
"message": {
"type": "string"
}
},
"required": [
"code",
"path",
"message"
],
"additionalProperties": {}
}
}
},
"required": [
"name",
"issues"
]
}
},
"required": [
"success",
"error"
]
}
}
}
},
"404": {
"description": "404 Not Found",
"content": {
"text/html": {
"schema": {
"type": "string",
"const": "404 Not Found"
}
}
}
}
},
"operationId": "getVisualPillSlider",
"tags": [
"Fragments"
],
"parameters": [
{
"in": "query",
"name": "inline",
"schema": {
"type": "string"
},
"required": false
},
{
"in": "query",
"name": "contentIds",
"schema": {
"type": "string",
"minLength": 1
},
"required": true
},
{
"in": "path",
"name": "ru",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
},
{
"in": "path",
"name": "lc",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
}
],
"summary": "Visual pill slider fragment",
"description": "Standardised Visual pill slider component with title, description, href and associated media. The component fetches content from CMS based on content ID's. Supports localization. Only supports the 'story' content model."
}
},
"/{ru}/{lc}/pxm-fragments/inspiration-card/": {
"get": {
"responses": {
"200": {
"description": "HTML fragment",
"content": {
"text/html": {
"schema": {
"type": "string"
}
}
}
},
"400": {
"description": "Bad request",
"content": {
"text/html": {
"schema": {
"type": "object",
"properties": {
"success": {
"type": "boolean",
"const": false
},
"error": {
"type": "object",
"properties": {
"name": {
"type": "string",
"const": "ZodError"
},
"issues": {
"type": "array",
"items": {
"type": "object",
"properties": {
"code": {
"type": "string"
},
"path": {
"type": "array",
"items": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
}
},
"message": {
"type": "string"
}
},
"required": [
"code",
"path",
"message"
],
"additionalProperties": {}
}
}
},
"required": [
"name",
"issues"
]
}
},
"required": [
"success",
"error"
]
}
}
}
},
"404": {
"description": "404 Not Found",
"content": {
"text/html": {
"schema": {
"type": "string",
"const": "404 Not Found"
}
}
}
}
},
"operationId": "getInspirationCard",
"tags": [
"Fragments"
],
"parameters": [
{
"in": "query",
"name": "inline",
"schema": {
"type": "string"
},
"required": false
},
{
"in": "query",
"name": "contentIds",
"schema": {
"type": "string",
"minLength": 1
},
"required": true
},
{
"in": "path",
"name": "ru",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
},
{
"in": "path",
"name": "lc",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
}
],
"summary": "Inspiration card fragment",
"description": "Standardised inspiration card component with title, body, href and associated media. The component fetches content from CMS based on a content ID. Supports localization. Only supports the 'story' content model."
}
},
"/{ru}/{lc}/pxm-fragments/text/": {
"get": {
"responses": {
"200": {
"description": "HTML fragment",
"content": {
"text/html": {
"schema": {
"type": "string"
}
}
}
},
"400": {
"description": "Bad request",
"content": {
"text/html": {
"schema": {
"type": "object",
"properties": {
"success": {
"type": "boolean",
"const": false
},
"error": {
"type": "object",
"properties": {
"name": {
"type": "string",
"const": "ZodError"
},
"issues": {
"type": "array",
"items": {
"type": "object",
"properties": {
"code": {
"type": "string"
},
"path": {
"type": "array",
"items": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
}
},
"message": {
"type": "string"
}
},
"required": [
"code",
"path",
"message"
],
"additionalProperties": {}
}
}
},
"required": [
"name",
"issues"
]
}
},
"required": [
"success",
"error"
]
}
}
}
},
"404": {
"description": "404 Not Found",
"content": {
"text/html": {
"schema": {
"type": "string",
"const": "404 Not Found"
}
}
}
}
},
"operationId": "getText",
"tags": [
"Fragments"
],
"parameters": [
{
"in": "query",
"name": "inline",
"schema": {
"type": "string"
},
"required": false
},
{
"in": "query",
"name": "contentId",
"schema": {
"type": "string",
"minLength": 1
},
"required": true
},
{
"in": "path",
"name": "ru",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
},
{
"in": "path",
"name": "lc",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
}
],
"summary": "Text fragment",
"description": "Standardised text component with title and body text. The component fetches content from CMS based on a content ID and displays it. Supports localization. Only the 'textBlock' content model is supported."
}
},
"/{ru}/{lc}/pxm-fragments/product-shelf/": {
"get": {
"responses": {
"200": {
"description": "HTML fragment",
"content": {
"text/html": {
"schema": {
"type": "string"
}
}
}
},
"400": {
"description": "Bad request",
"content": {
"text/html": {
"schema": {
"type": "object",
"properties": {
"success": {
"type": "boolean",
"const": false
},
"error": {
"type": "object",
"properties": {
"name": {
"type": "string",
"const": "ZodError"
},
"issues": {
"type": "array",
"items": {
"type": "object",
"properties": {
"code": {
"type": "string"
},
"path": {
"type": "array",
"items": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
}
},
"message": {
"type": "string"
}
},
"required": [
"code",
"path",
"message"
],
"additionalProperties": {}
}
}
},
"required": [
"name",
"issues"
]
}
},
"required": [
"success",
"error"
]
}
}
}
},
"404": {
"description": "404 Not Found",
"content": {
"text/html": {
"schema": {
"type": "string",
"const": "404 Not Found"
}
}
}
}
},
"operationId": "product-shelf",
"tags": [
"Fragments"
],
"parameters": [
{
"in": "query",
"name": "inline",
"schema": {
"type": "string"
},
"required": false
},
{
"in": "query",
"name": "contentId",
"schema": {
"type": "string",
"minLength": 1
},
"required": true
},
{
"in": "path",
"name": "ru",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
},
{
"in": "path",
"name": "lc",
"schema": {
"type": "string",
"minLength": 2,
"maxLength": 2
},
"required": true
}
],
"summary": "Product Shelf fragment",
"description": "Product shelf component with title, body, href and product cards. The component fetches content from CMS based on a content ID. Supports localization. Only supports the 'productListing' content model."
}
},
"/global/assets/dwf/pxm-fragments/head/": {
"get": {
"responses": {
"200": {
"description": "HTML fragment",
"content": {
"text/html": {
"schema": {
"type": "string"
}
}
}
},
"400": {
"description": "Bad request",
"content": {
"text/html": {
"schema": {
"type": "object",
"properties": {
"success": {
"type": "boolean",
"const": false
},
"error": {
"type": "object",
"properties": {
"name": {
"type": "string",
"const": "ZodError"
},
"issues": {
"type": "array",
"items": {
"type": "object",
"properties": {
"code": {
"type": "string"
},
"path": {
"type": "array",
"items": {
"anyOf": [
{
"type": "string"
},
{
"type": "number"
}
]
}
},
"message": {
"type": "string"
}
},
"required": [
"code",
"path",
"message"
],
"additionalProperties": {}
}
}
},
"required": [
"name",
"issues"
]
}
},
"required": [
"success",
"error"
]
}
}
}
}
},
"operationId": "head",
"tags": [
"Metadata"
],
"parameters": [
{
"in": "query",
"name": "fragments",
"schema": {
"type": "string",
"enum": [
"hero",
"quote",
"gallery",
"visual-pill-slider",
"inspiration-card",
"text"
]
},
"required": true
}
],
"summary": "Fragment metadata",
"description": "Returns HTML fragment metadata containing link tags for CSS stylesheets and script tags for JavaScript files required by the fragment. This metadata should be included in the page head section to properly load all fragment dependencies."
}
}
},
"components": {
"schemas": {}
}
}
}
]
}