Format

Last updated on January 15, 2025
•
4 minutes to read

A Simple Editor workflow allows you to load and personalize products defined through Product specifications. To work with PIM products, use Workflow Elements.

This workflow is configured in a JSON file that contains the following sections:

attributes: Product setup attributes defined during the template setup.
product: Object describing the basic configuration of the printable product.
options: Description of options used by products with this config.

{
  "attributes": [ ... ],
  "product": { ... },
  "options": [ ... ]
}

Attributes

The standard attributes are used in this workflow. The following example defines two attributes for selecting a design and a mockup.

{
  "attributes": [
      {
        "name": "design",
        "label": "Design",
        "type": "single-asset",
        "assetType": "design",
        "description": "Choose a design associated with this product. Your design file can contain text, shapes, images, and backgrounds."
      },
      {
        "name": "mockup",
        "label": "Mockup file",
        "type": "single-asset",
        "assetType": "image",
        "description": "Choose a mockup file for your product."
      }
  ]
}

The Simple Editor workflow supports dynamic expressions. You can use the attribute values set in the BackOffice admin panel during template configuration as follows:

{{ product.attributes.find(x => x.name == 'design').value.id }}

Product

The Product object reflects a productDefinition object used in the Design Editor. The basic product configuration is represented by an object of the following format:

{
  "product": {
    /* Public design ID loaded to the editor. */
    "design": "{{ product.attributes.find(x => x.name == 'design').value.id }}",
    /* Object describing the mockups used; currently only applies to overlaying mockups. */
    "mockup": {
      "up": "{{ product.attributes.find(x => x.name == 'mockup').value.id }}"
    },
    /* Position of the design relative to the mockup. */
    "designLocation": "{{ product.attributes.find(x => x.name == 'mockup').value.customFields.designLocation }}"
  }
}

Options

The Options array describes the form displayed to the right of the editor's viewer. There are several types of the options. The editor renders them one after another. After the specified options, the editor displays all editable fields.

Let's learn the supported option types.

1. Color

A widget that allows controlling the color of an object (or group of objects) in the design. The configuration looks like this:

{
  /* Option type */
  "type": "color",
  /* Option name */
  "name": "design-color",
  /* Title displayed in the editor form */
  "title": "Design Color",
  /* Parameter indicating the order in which the option is rendered (for flexible layout) */
  "order": 3,
  /* Names of design objects to which the current option value is applied;
     the target can be single, e.g., if you need to paint the background;
     when using the ALL_ITEMS placeholder, the font is applied to all text elements.
  */
  "target": ["Title", "Owner", "Image"],
  /* Parameter indicating if the widget should be displayed on the form */
  "active": "{{ product.variations.current.options['Use Foil'] == 'No' }}",
  /* Option values used */
  "values": [
    {
      "name": "Black",
      "color": "#000000"
    },
    {
      "name": "Smokey Grape",
      "color": "#747587"
    },
    {
      "name": "Clary Sage",
      "color": "#bbbfb7"
    },
    {
      "name": "Beige",
      "color": "#f5f4ed"
    },
    {
      "name": "White",
      "color": "#ffffff"
    }
  ]
}

2. Ecommerce

A placeholder widget for an option received from the e-commerce system. It's required to control the order in which options are displayed on the form. Example config:

{
  "type": "ecommerce",
  "order": 1,
  "name": "Use Foil",
  "values": []
}

3. Clipart

The Clipart option allows you to choose an image to display in the design from a set of vector images combined into a grouped object within the template. The root parameter specifies the name of the "root" group item containing the cliparts among which switching is possible. The root and target properties of this widget coincide, since changes are applied to the "root" object.

{
  "type": "clipart",
  "name": "logo",
  "order": 4,
  "title": "Choose Image",
  "root": "Image",
  "target": ["Image"],
  "values": []
}

4. Texture

This option also has a root property, but it points to the root directory in Asset Storage from which we obtain a set of texture images. As the target for this option, the names of the objects that should be transferred to the texture container upon activation of this option are specified. Using the ALL_ITEMS placeholder, it transfers all objects onto the texture.

{
  "type": "texture",
  "name": "Foil",
  "title": "Choose Foil",
  "order": 2,
  "root": "{{ product.attributes.find(x => x.name == 'foil').value.fullPath }}",
  "active": "{{ product.variations.current.options['Use Foil'] != 'No' }}",
  "target": ["Title", "Owner", "Image"],
  "values": []
}

5. Font

This option also has a root property, pointing to the root directory in Asset Storage from which we retrieve a set of fonts. As the target for this option, the names of the objects whose font should be changed are specified. Using the ALL_ITEMS placeholder, it applies the font to all text elements.

{
      "type": "font",
      "name": "font",
      "order": 5,
      "title": "Choose Font",
      "root": "Roboto_Condensed",
      "target": [ "ALL_ITEMS" ],
      "values": []
}