Workflow with options

  • Last updated on April 27, 2024
  • •
  • 6 minutes to read

Let's imagine that your product is a wedding invitation, where you have the same design but different trim options. Customers will use this design and select different edge trimming options.

For such a workflow, you need to create a two-step workflow. At the first step, you will select a variant, edit it in the Design Editor, and then check the personalization result.

Let's consider some ideas where you may use such a workflow:

  • Your product may contain only one option and differences are in the values.
  • You may prepare only one design, but add minor differences to each variant.

Workflow with options.

Planning

Let's plan your future workflow:

  • The quantity of steps.

  • The widgets you need.

Steps

This workflow consists of two steps:

  • Editor for selecting a product variant and editing it.

  • Approval for checking the personalization result and approving it.

"steps": [
  {
    "name": "Editor"
  },
  {
    "name": "Approval"
  }
]

Widgets

Let's define what widgets you need for this workflow:

  • pim-ajax to get data from a server.
  • pim-option to represent options.
  • design-selector to select a design
  • design-editor to customize a design.
  • preview-mockup-slider to show the result.
  • finish-group to define the Add to cart button and the confirmation checkbox.
  • steps to hide the Finish button in the Navigation panel.
  • order to create an order.
"widgets": [
{
    "name": "my-pim-ajax",
    "type": "pim-ajax",
    "params": {...}
  },
 {
    "name": "my-pim-options",
    "type": "pim-options",
    "params": {...}
  },
  {
      "name": "my-pim-design-selector",
      "type": "pim-design-selector",
      "params": {...}
  },
  {
      "name": "my-editor",
      "type": "design-editor",
      "params": {...}
  },
    {
      "name": "preview-slider",
      "type": "preview-mockup-slider",
      "params": {...}
    },

  {
      "name": "my-finish-group",
      "type": "finish-group",
      "params": {...}
  },
  {
    "name": "steps",
    "type": "steps",
    "params": {...}
  },
  {
      "name": "my-order",
      "type": "order",
      "params": {...}
  }

]

Getting data from a server

To get options and SKU from your server, use the pim-ajax widget. This widget retrieves options and designs, defines SKU and an option value.

{
  "name": "my-pim-ajax",
  "type": "pim-ajax",
  "params": {
    "choices": "{{ $['my-pim-options']._ }}",
    "currentSku": "{{ $['my-pim-design-selector']._}}",
    "settings": {
      "designs": {
          "enabled": true
      }
    }
  }
}

Getting designs from a server

The pim-design-selector allows you to select a design variant for the design-editor widget. Since we have only one design, we won't display this widget in the user interface.

{
  "name": "my-pim-design-selector",
  "type": "pim-design-selector",
  "params": {
      "designs": "{{ $['my-pim-ajax'].designs }}"
  }
}

Defining steps

Editor

The editor step represents:

  • Options by the pim-option widget. This widget allows you to select a value you need.
  • Design Editor by the design-editor widget. In design-editor, you can customize a design.

The Editor step.

"steps": [
  {
    "name": "Editor",
    "toolPanel": {
        "name": "my-option-group"
    },
    "mainPanel": {
        "name": "my-editor"
    }
  }
]

PIM option selector

This widget represents options and option values. Define this widget in the group widget for embedding in the toolPanel.

{
  "name": "my-option-group",
  "type": "group",
  "params": {
    "type": "noncollapsible",
    "scrollable": true,
    "unifySelection": false,
    "tabs": [
      {
        "widgets": [
          {
            "name": "my-pim-options",
            "type": "pim-options",
            "params": {
                "options": "{{ $['my-pim-ajax'].options }}"
            }
          }
        ]
      }
    ]
  }
}

Design Editor

The design-editor widget allows you to customize designs. It loads the design selected in the pim-design-selector widget.


{
  "name": "my-editor",
  "type": "design-editor",
  "params": {
    "changeDesignVariant": {
      "designVariant": "{{ $['my-pim-design-selector']._ ?? undefined }}"
    },
    "initial": {
      "productDefinition": {
      "surfaces": [
        {
          "width": "1",
          "height": "1"
        }
      ]
    },
    "showPreloader": true,
    "editorConfig": {
        "initialMode": "Advanced",
        "canvas": {
          "shadowEnabled": true,
        }
      }
    }
  }
}

Approval

At the Approval step, you will see the personalization result and approve it.

The Approval step.

Preview mockup slider

The preview-mockup-slider shows the personalization result from the design-editor and pim-design-selector widgets.

{
  "name": "my-preview-mockup-slider",
  "type": "preview-mockup-slider",
  "params": {
    "autoCompile": false,
    "productId": "{{ $['my-pim-design-selector']._.productId }}",
    "productVersionId": "{{ $['my-pim-design-selector']._.productVersionId }}",
    "productVariantId": "{{ $['my-pim-design-selector']._.productVariantId }}",
    "stateId": "{{ $['my-editor'].stateId }}",
    "previewSize": {
        "width": 1200,
        "height": 1200
    }
  }
}

Steps widget

The steps widget allows you to hide the Finish button in the Navigation panel, which appears by default.

{
  "name": "steps",
  "type": "steps",
  "params": {
    "finishButton": {
      "visible": "false"
    }
  }
}

Finish group

The finish-group widget represents the Add to cart button and the confirmation checkbox. When the user clicks this button, the widget will render hi-res images.

{
  "name": "my-finish-group",
  "type": "finish-group",
  "params": {
    "checkboxPrompt": "I have reviewed and approve my design.",
    "value": false,
    "checkboxEnabled": true,
    "checkboxVisible": true,
    "buttonText": "Add to cart",
    "buttonClassStyle": "primary",
    "onClick": [
      "{{#function main.showPreloader(true, 'Creating print files...')}}",
      "{{#function $['my-editor'].getHiResImages(1000,1000) }}",
      "{{#function $['my-preview-mockup-slider'].createPreviewResource()}}",
      "{{#function new Promise((res) => setTimeout(res, 2500)) }}",
      "{{#function main.showPreloader(false)}}"
    ]
  }
}

Connecting steps

Here, you need to connect the Editor step and the Approval step. Once you switch to Approval, the personalized design will be saved.

"steps": [
  {
    "name": "Editor",
    "toolPanel": {
        "name": "option-group"
    },
    "mainPanel": {
        "name": "my-editor"
    }
  },
  {
    "name": "Approval",
    "mainPanel": {
        "name": "preview-slider"
    },
    "onActivate": [
        "{{ #function main.showPreloader(true, 'Saving product...') }}",
        "{{ #function $['my-editor'].saveProduct($['my-editor'].stateId) }}",
        "{{ #function $['my-preview-mockup-slider'].compile() }}",
        "{{ #function main.showPreloader(false) }}"
    ],
    "bottomPanel": {
        "name": "finish"
    }
  }
]

Creating an order

The order widget allows customers to create an order in the e-commerce system and a project in Customer's Canvas. This widget uses images from the design-editor widget and takes SKU from the pim-design-selector widget.

{
  "name": "my-order",
  "type": "order",
  "params": {
    "props": {
      "_userId": "{{ $['my-editor'].userId }}",
      "_stateId": [
        "{{ $['my-editor'].stateId }}"
      ],
      "_hidden": {
        "images": "{{ [ $['my-preview-mockup-slider'].previewResourceUrl || '' ] }}",
        "originalProductId": "{{ product.id }}",
        "sku": "{{ $['my-pim-design-selector']._.sku || ''}}"
      }
  },
      "data": {
        "stateId": "{{ $['my-editor'].stateId }}",
        "sku": "{{ $['my-pim-design-selector']._.sku }}"
    }
  }
}

Result

This is the whole workflow file.

{
  "widgets": [
    {
      "name": "pim-ajax",
      "type": "pim-ajax",
      "params": {
        "choices": "{{ $['pim-options']._ }}",
        "currentSku": "{{ $['design-selector']._ ?? null}}",
        "settings": {
          "designs": {
            "enabled": true
          }
        }
      }
    },
      {
        "name": "designs",
        "type": "group",
        "params": {
          "type": "noncollapsible",
          "scrollable": true,
          "unifySelection": false,
          "tabs": [
            {
              "widgets": [
                {
                  "name": "design-selector",
                  "type": "pim-design-selector",
                  "params": {
                    "designs": "{{ $['pim-ajax'].designs }}"
                  }
                }
              ]
            }
          ]
        }
      },
      {
        "name": "option-group",
        "type": "group",
        "params": {
          "type": "noncollapsible",
          "scrollable": true,
          "unifySelection": false,
          "tabs": [
            {
              "widgets": [
                {
                  "type": "pim-options",
                  "name": "pim-options",
                  "params": {
                      "options": "{{ $['pim-ajax'].options }}"
                  }
                }
              ]
            }
          ]
        }
      },
      {
        "name": "my-editor",
        "type": "design-editor",
        "params": {
          "changeDesignVariant": {
            "designVariant": "{{ $['design-selector']._ ?? undefined }}"
          },
          "initial": {
            "productDefinition": {
              "surfaces": [
                {
                  "width": "1",
                  "height": "1"
                }
              ]
            },
            "showPreloader": true,
            "editorConfig": {
              "initialMode": "Advanced",
              "canvas": {
                "violationWarningButtonsEnabled": true,
                "qualityChangeContainersEnabled": true,
                "containerColor": "#ffffff",
                "color": "#ffffff",
                "shadowEnabled": true,
                "rulers": {
                    "enabled": true
                }
              }
            }
          }
        }
      },
      {
        "name": "steps",
        "type": "steps",
        "params": {
          "finishButton": {
            "visible": "false"
          }
        }
      },
      {
        "name": "preview-slider",
        "type": "preview-mockup-slider",
        "params": {
          "autoCompile": false,
          "productId": "{{ $['design-selector']._.productId }}",
          "productVersionId": "{{ $['design-selector']._.productVersionId }}",
          "productVariantId": "{{ $['design-selector']._.productVariantId }}",
          "stateId": "{{ $['my-editor'].stateId }}",
          "previewSize": {
              "width": 1200,
              "height": 1200
          }
        }
      },
      {
        "name": "order",
        "type": "order",
        "params": {
          "props": {
          "_userId": "{{ $['my-editor'].userId }}",
          "_stateId": [
            "{{ $['my-editor'].stateId }}"
          ],
          "_hidden": {
            "images": "{{ [ $['preview-slider'].previewResourceUrl || '' ] }}",
            "originalProductId": "{{ product.id }}",
            "sku": "{{ $['design-selector']._.sku || ''}}"
          }
        },
        "data": {
          "stateId": "{{ $['my-editor'].stateId }}",
          "sku": "{{ $['design-selector']._.sku }}"
          }
        }
      },
      {
        "name": "finish",
        "type": "finish-group",
        "params": {
          "checkboxPrompt": "I have reviewed and approve my design.",
          "value": false,
          "checkboxEnabled": true,
          "checkboxVisible": true,
          "buttonText": "Add to cart",
          "buttonClassStyle": "primary",
          "onClick": [
            "{{#function main.showPreloader(true, 'Creating print files...')}}",
            "{{ #function $['my-editor'].getHiResImages(1000,1000) }}",
            "{{#function $['preview-slider'].createPreviewResource()}}",
            "{{ #function new Promise((res) => setTimeout(res, 2500)) }}",
            "{{#function main.showPreloader(false)}}"
          ]
        }
      }
    ],
  "steps": [
    {
      "name": "Editor",
      "toolPanel": {
          "name": "option-group"
      },
      "mainPanel": {
          "name": "my-editor"
      }
    },
    {
      "name": "Approval",
      "mainPanel": {
        "name": "preview-slider"
      },
      "onActivate": [
        "{{ #function main.showPreloader(true, 'Saving product...') }}",
        "{{ #function $['my-editor'].saveProduct($['my-editor'].stateId) }}",
        "{{ #function $['preview-slider'].compile() }}",
        "{{ #function main.showPreloader(false) }}"
      ],
      "bottomPanel": {
        "name": "finish"
      }
    }
  ]
}
Was this page helpful?
Back to top Copyright © 2001–2025 Aurigma, Inc. All rights reserved.