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

Setting Up a Product

The Aurigma Personalization Plugin extends the standard product management functionality of nopCommerce. If you want to add an Aurigma-powered product, just create it and set up its title, price, SKU, categories, and other settings. After that, you can use the Aurigma Personalization tab to configure the editor.

Enabling the Aurigma Personalization Plugin

You can enable editing the products through your nopCommerce admin panel, by making these changes on the Personalization Settings tab:

  1. Navigate to Catalog > Products > Edit > Personalization Settings.
  2. Choose an Aurigma Editor from the list.
  3. Choose the Editor's Config (a set of predefined parameters).
  4. Specify variable attributes if necessary.
  5. Click Apply to generate all necessary Specification attributes.

You may notice that this plugin requires different attributes depending on a config, for example, template names or text entry fields. When you fill these attributes in and click the Apply button, the plugin generates new Specification attributes or modifies existing attributes. On the Specification attributes tab, you may notice additional attributes, like names of the editor and config, which are hidden and needed for the plugin to work properly.

The following screenshot illustrates the Design and Mockup attributes for the Mockup based products config.

nopCommerce personalization settings.

To unlink the product from the Aurigma Personalization Plugin, you can remove its attributes or click the Unlink button.

Uploading Designs and Mockups

You may notice that the most of plugin configs require you to choose a design and mockup file. The Personalization plugin searches for these files on your Customer's Canvas instance. Just place them in the \ProductTemplates\designs\ and \ProductTemplates\mockups\ folders respectively, and these files will appear in the drop-down lists.

Product templates in the nopCommerce personalization plugin.

Adding New Products

To add a new product to your nopCommerce site, you need to add a template to Customer's Canvas and enable this template in nopCommerce:

  1. Navigate to Catalog > Products > Add new.
  2. Enter the product name and click the Save and Continue Edit button.
  3. When the Personalization Settings tab appears, select Aurigma Editor and Editor's Config.
  4. Specify required attributes.
  5. Click the Apply button.
  6. Click Preview.

Editors and Configs

Editors are Customer's Canvas-based applications embedded in a product page. At the moment, only base-editor as described in Introducing Editors is available. To install newer versions or future editors, you can copy them to the <Your NopCommerce Folder>\Plugins\Editors\ folder.

Configs are stored in the configs folder of an editor and contain common settings. We supply ready configs for the most popular scenarios, however, if you are familiar with the Customer's Canvas configuration, you can customize it. For more details about configs, you can refer to the Under the Hood of Editor Configs topic.

Setting Up Options

In terms of nopCommerce, options are the Product attributes representing a user's choice that affects the order, like size, color, etc. For example, you can set up options to toggle the mockup colors.

nopCommerce model of two optional colors.

To implement this, you should add a Product attribute and specify its name in the config file as described in the following topic.

Troubleshooting

Fonts Do Not Show in the Editor

You have prepared a template but some fonts do not show in the editor.

Solution

  1. Put the required fonts in the \SimplePolygraphy\Fonts\ folder.
  2. Open the Administration panel of nopCommerce.
  3. Navigate to Configuration > Plugins > Local plugins.
  4. Find the Aurigma Personalization Plugin and click the Configure button.
  5. Click the Reload CustomersCanvas fonts button.

Drop-down Lists Are Empty

The Personalization Settings tab contains empty drop-down lists.

Solution

Make sure that the plugin configuration has a valid URL to your Customer's Canvas instance. When you follow this link, the demo application should open in a browser.

Also, compare the ApiSecurityKey parameters in the plugin configuration and the web.config file of Customer's Canvas. They must be the same.

See Also

Manual