Back to Website
Show / Hide Table of Contents

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.

Preview mockup slider.

{
    "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
Was this page helpful?
Thanks for your feedback!
Back to top Copyright © 2001–2024 Aurigma, Inc. All rights reserved.
Loading...
    Thank for your vote
    Your opinion is important to us. To provide details, send feedback.
    Send feedback