Opening products for editing

• Last updated on April 9, 2024
• •
• 5 minutes to read

When you organize your products in Customer's Canvas, you can use them in your app through the BackOffice API. Let's look at how you can open a product for editing and render the personalization result using Customer's Canvas tools.

To open products for editing, you need a product ID and the corresponding workflow ID. Then, depending on the workflow type, you will need to use the appropriate editor. After completing the personalization and checkout process, you can create a project using the order data.

To use the API, you first need to request an access token, which need to be added to every request.

Getting the product ID

To get product identifiers, you can search for products in your tenant by their names, SKUs, tags, or custom fields using the endpoint Products_GetAllProducts. For example, let's get a list of cards.

• cURL
• HTTP
• C#
• TS
• PHP

curl -X \
  GET "https://api.customerscanvashub.com/api/storefront/v1/products?search=card&tenantId=12345" \
  -H  "accept: text/plain" \
  -H  "Authorization: Bearer <TOKEN>"

The response of this endpoint will contain an items array with objects Products. Among the properties of this object, you can find the product id, personalizationWorkflowId, and processingPipelineId.

Getting the workflow

Using the product ID, you can get such workflow details as the type and definition with the endpoint Products_GetPersonalizationWorkflow.

• cURL
• HTTP
• C#
• TS
• PHP

curl -X \
  GET "https://api.customerscanvashub.com/api/storefront/v1/products/417/personalization-workflow" \
  -H  "accept: text/plain" \
  -H  "Authorization: Bearer <TOKEN>"

In the response of the endpoint, there is a workflowType property with a string value: UIFramework, SimpleEditor, DesignEditor, or HandyEditor.

The workflow type allows you to run the appropriate editor. For example, let's learn how to open a product in the Simple Editor.

When you are using the editors deployed in a Customer's Canvas tenant, you can retrieve links to them through the API.

Getting the Simple Editor link

The endpoint TenantInfo_GetApplicationsInfo allows you to get links to the editors deployed in your tenant.

• cURL
• HTTP
• C#
• TS
• PHP

curl -X \
  GET "https://api.customerscanvashub.com/api/storefront/v1/tenant-info/applications?tenantId=12345" \
  -H  "accept: text/plain" \
  -H  "Authorization: Bearer <TOKEN>"

In the response, find the simpleEditorUrl.

{
  "uiFrameworkUrl": "https://staticjs-aurigma.azureedge.net/ui-framework/stable",
  "simpleEditorUrl": "https://staticjs-aurigma.azureedge.net/simple-editor/stable",
  "workflowElementsUrl": "https://staticjs-aurigma.azureedge.net/libs/us/workflow-elements",
  ...
}

Opening the Simple Editor

Now that you know the URL that links to the editor, let's open it.

1. Add the script and styles to a page.

   // Simple Editor styles
   const editorStylesUrl = simpleEditorUrl + '/styles.css';
   const editorStylesElement = document.createElement('link');
   editorStylesElement.href = editorStylesUrl;
   editorStylesElement.rel = 'stylesheet';
   document.head.appendChild(editorStylesElement);
   
   // Simple Editor script
   const editorScriptUrl = simpleEditorUrl + '/editor.js';
   const editorScriptElement = document.createElement('script');
   editorScriptElement.src = editorScriptUrl;
   document.head.appendChild(editorScriptElement);
   

2. Add an editor container

   <main class="main">
     <au-simple-editor></au-simple-editor>
   </main>
   

3. Initialize the editor on page load.

   editorScriptElement.onload = () => {
       const simpleEditor = document.getElementsByTagName('au-simple-editor').item(0);
       simpleEditor?.init({
           integration: {
               tenantId: <yourTenantId>,
               user: {
                   id: <userId>,
                   token: <userToken>
               },
               storefrontId: <yourStorefrontId>,
               cchubApiGatewayUrl: "https://api.customerscanvashub.com/"
           },
           product: {
               productId: <productId>
           },
           settings: {<workflowContent>},
       });
   };
   

Here, you must pass a token generated for a user. The endpoint StorefrontUsers_Create adds users to your application, and StorefrontUsers_GetToken generates tokens for them, as described in the Registering customers topic.

In the settings, pass the workflow content.

For more details, you can refer to the Workflow topic.

Data for creating projects

When the user finishes editing the product, the addtocart event is triggered. To process the result, handle this event as follows:

simpleEditor.addEventListener("addtocart", event => {
    const cartItem = event.detail;
    console.log(cartItem);
});

As a result, the following object will be returned:

{
  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
    };
  };
}

Based on this data, you can create a project with the endpoint Projects_CreateWithSingleItem.

• cURL
• HTTP
• C#
• TS
• PHP

curl -X \
POST "https://api.customerscanvashub.com/api/storefront/v1/projects?storefrontId=12" \
-H  "accept: text/plain" \
-H  "Authorization: Bearer <TOKEN>" \
-d  "{'productReference': $cartItem.originalProductId, 'ownerId': $cartItem.properties._userId, 'items': [{ 'designIds': $cartItem.properties._stateId, 'sku': $cartItem.sku, 'quantity': $cartItem.quantity}]}"