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 containing width and height.

{
    "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