Embedding Simple Editor

3-4 minutes to read

In this article, you'll learn how to embed Simple Editor in your custom product store.

Prerequisites

Before you embed the Simple Editor in a product page, create a product in BackOffice. This product must be created in the PIM module. To learn how to do so, read the PIM Module section.

To launch the Simple Editor, you need a URL linking to the Simple Editor JS library. The examples below use the link you can find in the Customer's Canvas admin panel through Settings > Applications > Simple Editor URL. You can use this link only for testing purposes. In real applications, get the Simple Editor URL by using the endpoint TenantInfo_GetApplicationsInfo of the Storefront API.

Creating a page

Let's create an HTML page and embed the Simple Editor in it.

First, embed a script of the Simple Editor.

<script defer src="https://staticjs-aurigma.azureedge.net/simple-editor/stable/editor.js"></script>

Then, add a special tag of the custom element au-simple-editor. You don't need to put anything inside.

<au-simple-editor></au-simple-editor>

Let's connect a CSS file.

<link rel="stylesheet" href="https://staticjs-aurigma.azureedge.net/simple-editor/stable/styles.css">

To learn how to add custom CSS variables to styles in this file, read the Simple Editor styling article.

The resulting code may look like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://staticjs-aurigma.azureedge.net/simple-editor/stable/styles.css">
    <title>Document</title>
  </head>
  <body>
    <main class="main">
      <au-simple-editor></au-simple-editor>
    </main>
    <script src="https://staticjs-aurigma.azureedge.net/simple-editor/stable/editor.js"></script>
  </body>
</html>

Let's add a configuration for Simple Editor inside.

Simple Editor Configuration

The following part will be embedded in tags <script></script>. You can include these tags in<head> or <body>.

Let's add the addEventListener() method to handle the DOMContentLoaded event, which happens when the page has loaded.

In this method, we define the simpleEditor variable, which will be equal to the first item of the collection with the <au-simple-editor> tag.

Then, call .setEditorConfig() method to set an editor configuration.

This is how it looks together.

window.addEventListener("DOMContentLoaded", async () => {
    const simpleEditor = document.getElementsByTagName("au-simple-editor").item(0);
    const config = {
        backOfficeUrl: "https://customerscanvashub.com",
        tenantId: 12345,
        product: {
            id: 12345,
            title: "Wedding invitation"
        },
        user: {
            id: "sam.brown"
        },
        pluginSettings: {
            locale: "en"
        },
        requireAllPreviews: true
    };
    simpleEditor.setEditorConfig(config);
});

Let's consider the editor configuration properties.

Object	Type	Description
`backOfficeUrl`	`string`	A URL to your BackOffice tenant. You may have `http://eu.customerscanvashub.com` or `http://customerscanvashub.com`. If you don't know where your tenant is hosted, check the letter from our support team with credentials, or create a support case
`tenantId`	`string`	Your tenant ID. You can find it in Settings > Tenant > ID
`product.id`	`number`	Product ID in your storefront
`product.title`	`string`	Product title in your storefront (Optional)
`user.id`	`string`	A user ID in your storefront (Optional)
`pluginSettings.locale`	`string`	Language of the UI. If omitted, it will be taken from browser settings (Optional)
`requireAllPreviews`	`boolean`	If `true`, the system generates previews of all product pages when the customer clicks Add to cart. If `false`, only the first page will be rendered. We recommend leaving the default value `false`.

Simple Editor events

When the Simple Editor is loaded, it triggers the editorloaded/loaded events.

Let's see how you can handle these events.


document.addEventListener('editorloaded', (e) => {
  console.log(e)
});

Here, we added a listener to the document. In the following example, to catch this event, we add a listener to the simpleEditor variable.


let simpleEditor = document.getElementsByTagName("au-simple-editor").item(0);
simpleEditor.addEventListener("load", e => console.log(e));

When the customer clicks the Add to cart button, the Simple Editor fires the addtocart event.

simpleEditor.addEventListener("addtocart", e => console.log(e));

When a customer finishes editing, the system passes the following object within the addtocart event:

{
  key: string; //  the key of this lineItem, the same as `stateId`
  quantity: number; // quantity of items in the order
  originalProductId?: string; // product ID before editing
  sku?: string; // a product SKU 
  properties: {
    _stateId: string[]; // an array of state files 
    _userId: string; // a customer ID
    _hidden: {
      images: string[]; // an array of URL previews
    };
  };
}

Сode example

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://staticjs-aurigma.azureedge.net/simple-editor/stable/styles.css">
    <title>Document</title>
    <script>
        window.addEventListener("DOMContentLoaded", async () => {
            const simpleEditor = document.getElementsByTagName("au-simple-editor").item(0);
            const config = {
                backOfficeUrl: "https://customerscanvashub.com",
                tenantId: 12345,
                product: {
                    id: 12345,
                    title: "Wedding invitation"
                },
                user: {
                    id: "sam.brown"
                },
                pluginSettings: {
                    locale: "en"
                },
                requireAllPreviews: true
            };
            simpleEditor.setEditorConfig(config);
        });
    </script>
</head>

<body>
    <main class="main">
        <au-simple-editor></au-simple-editor>
    </main>
    <script defer src="https://staticjs-aurigma.azureedge.net/simple-editor/stable/editor.js"></script>
</body>

</html>