Meet us at Print 18. Chicago, IL. Sept. 30 - Oct. 2.

Under the Hood of Editor Configs

The Setting Up a Product topic illustrates that the field list on the Personalization Settings tab may change when you select an editor or a config. You may have further questions related to this: what are the configs, how to make a config, how to display other parameters, and so on. This topic dwells on these questions.

How Configs Appear in the List

The Aurigma Personalization Plugin looks for the editors in the \editors\ folder. Every subfolder of this folder contains an editor. If you want to add a new version or modify your current editor, put a new folder with that version in \editors\. After that, the new editor will appear in the corresponding drop-down list on the Personalization Settings tab.

An editor contains a description in the editor.json file and a set of predefined configurations in the \configs\ subfolder.

editor.json
{
  title: "The config title for Personalization settings", 
  name: "internal_config_id",
  version: "1.0",
  config: { /* the configuration itself as explained further */ }
} 

The plugin reads titles in such files and displays them in the drop-down list. If you want to create your own config either from scratch or based on another config, make sure that you define all these fields and your title describes that this is a new config. The unique title is important when you copy configs from standard editors.

Note that configs are always bound to an editor. If you install a newer editor, do not forget to transfer your customized configs to it.

Now that we know how the Personalization plugin forms the editor list and how you can add your own config to it, let us have a look at a config example.

The Config Example

For example, let us see the following configuration of a single-page product.

json
{
  "title": "Single Page Products",
  "name": "single-page",
  "version": "1.1.0",
  "config": {
    "productDefinition": {
      "surfaces": [
        "%product.attributes.#attributeNames.frontTemplate#%"
      ]
    },
    "editorConfig": {
      "canvas": {
        "rulers": {
          "enabled": false
        }
      },
      "preloader": {
        "enabled": false
      },
      "initialMode": "Simple",
      "restoreProductOnReloadEnabled": "false",
      "widgets": {
        "FinishButton": {
          "mode": "Disabled"
        }
      }
    },
    "attributeNames": {
      "frontTemplate": {
        "name": "Template",
        "settings": {
          "type": "design"
        }
      }
    },
    "steps": {
      "editor": {
        "objectInspectorVisible": true,
        "topToolbarVisible": false,
        "bottomToolbarVisible": true,
        "leftToolbarVisible": false,
        "canvasBorderVisible": false,
        "contentShadowVisible": true,
        "canvasAlign": "centertop",
        "showPrice": "false",
        "fillItems": "warning"
      },
      "approve": {
        "preview": {
          "width": 500,
          "height": 500
        }
      }
    },
    "language": "en"
  }
}

This config contains the following sections:

  • productDefinition specifies what templates and mockups should apply; you can find examples of this definition in the Mockups topic.
  • editorConfig configures the user interface of the editor according to the following specification.
  • attributeNames binds variable fields to the Specification attributes.
  • steps define the editing sequence described in the Introducing Editors topic.
  • language specifies the language of the user interface.

The Introducing Editors topic describes how to configure the editors in detail with examples. If you have any questions or problems with it, please contact the Aurigma support team.

Variable Fields

In the simplest case, you can define all the properties in the config, including names of design templates, but you have to create a separate config for each product, which differs by just one line - the template name. This is a laborious approach, especially if you have a lot of products. To resolve this, we added the possibility to make variable fields for your products.

Variable attributes in the nopCommerce personalization plugin.

To apply these variable fields, define the attributeNames section.

json
"attributeNames": {
    "frontTemplate": {
        "name": "Template1",
        "settings": {
            "type": "design"
        }
    },
    "backTemplate": {
        "name": "Template2",
        "settings": {
           "type": "design"
        }
    }
}

Here, name is a specification attribute name, and settings defines a type of this attibute:

  • design - the drop-down list containing PSD templates from the \ProductTemplates\designs\ folder.
  • mockup - the drop-down list containing mockups from the \ProductTemplates\mockups\ folder.
  • desingFolder - the drop-down list containing subfolders with designs.
  • mockupFolder - the drop-down list containing subfolders with mockups.
  • list - the list of settings.values, for example: "values": ["album", "portrait"].
  • text - the text input.
  • number - the text input for numbers, you can define the settings.min and settings.max values for such an attribute.

Now, you can refer to these attributes from any section of your config by using the %...% syntax.

json
"productDefinition": {
    "surfaces": [
        "%product.attributes.#attributeNames.frontTemplate#%",
        "%product.attributes.#attributeNames.backTemplate#%"
    ]
}

When the editor loads a product on a page, the Personalization plugin substitutes the content between the percent symbols with an attribute value that is specified in attributeNames.

More About the %...% Syntax

The previous example illustrates how you can refer to specification attributes of a product. Also, you can apply the following shortcodes:

  • %product.title%
  • %product.sku%
  • %product.price%
  • %product.description%
  • %product.attributes.Specification Attribute% where Specification Attribute is a name of a specification attribute. Unlike the previous use, it does not display fields on the Personalization Settings tab, instead it just reads the value that you type in on the standard Specification Attributes tab.

You may use this approach if you have a file name convention - e.g. if you know that all your PSD files include an SKU in their file names, there is no need to choose a template on the Personalization Settings tab manually. However, in this case, you take responsibility for the integrity of your PSD design folder yourself.

See Also

Manual