Preview mockup slider
- Last updated on December 29, 2023
- •
- 1 minute to read
This widget shows the personalization result of products configured in the PIM module. You can use this widget at the Approval step for products with or without mockups.
{
"name": "preview-slider",
"type": "preview-mockup-slider",
"params": {...}
}
The preview-mockup-slider
widget only uses mockups of the preview type. To provide the personalization result, define the following properties:
The
productId
property - an ID of a PIM product defined in BackOffice.The
stateId
property - an ID of a state file with the personalized design obtained from the Design Editor or asset folder.The
previewSize
property - an object containingwidth
andheight
.
{
"name": "preview-slider",
"type": "preview-mockup-slider",
"params": {
"productId": "{{ $['design-selector']._.productId }}",
"stateId": "{{ $['editor'].stateId }}",
"previewSize": {
"width": 1200,
"height": 1200
}
}
}
Methods
You can use the createPreviewResource()
method if you need to save the personalization result and pass it to another widget. This method returns a link to the preview saved in Asset Storage.
Params
Name | Type | Description | Default value |
---|---|---|---|
productId |
number|string | ID of a PIM product in BackOffice | |
productVersionId |
number|string | (Optional). ID of a PIM product version | undefined |
productVariantId |
number|string | (Optional). ID of the selected product variant | undefined |
stateId |
string | ID of the personalized design | |
previewSize |
object | Defines the width and height of preview images | |
previewSize.width |
number | The preview width, in pixels | 800 |
previewSize.height |
number | The preview height, in pixels | 800 |