Opening products for editing

Last updated on October 30, 2025
•
6 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 needs 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 GET /api/storefront/v1/products. For example, let's get a list of cards.

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

GET https://api.customerscanvashub.com/api/storefront/v1/products?search=card&tenantId=12345

var tenantId = 12345; // Set your tenant ID here
var name = "card"; // Set a name mask ID here
var allProducts = await productsApiClient.GetAllProductsAsync(search: name, tenantId: tenantId);

var tenantId = 12345; // Set your tenant ID here
var name = "card"; // Set a name mask ID here
var allProducts = _productsApiClient.getAllProducts(null, null, null, name, tenantId);

The response of this endpoint will contain an items array with objects called ProductDto. 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 /api/storefront/v1/product-references/{reference}/personalization-workflow.

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

GET https://api.customerscanvashub.com/api/storefront/v1/products/417/personalization-workflow

var productId = 417; // Set your product ID here
var workflow = await productsApiClient.GetPersonalizationWorkflowAsync(productId);

var productId = 417; // Set your product ID here
var workflow = _productsApiClient.getPersonalizationWorkflow(productId);

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 GET /api/storefront/v1/tenant-info/applications allows you to get links to the editors deployed in your tenant.

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

GET https://api.customerscanvashub.com/api/storefront/v1/tenant-info/applications?tenantId=12345

var tenantId = 12345; // Set a tenant ID
var applicationsInfo = await tenantInfoApiClient.GetApplicationsInfoAsync(tenantId);

var tenantId = 12345; // Set a tenant ID
var applicationsInfo = _tenantInfoApiClient.getApplicationsInfo(tenantId);

$tenantId = 12345; // Set a tenant ID
$applicationsInfo = $tenantInfoApiClient->tenantInfoGetApplicationsInfo($tenantId);

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.

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);

Add an editor container.

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

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 POST /api/storefront/v1/storefront-users adds users to your application, and GET /api/storefront/v1/storefront-users/token 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);
});

The event returns an object containing details about the personalized cart item:

{
  key: string;      // Unique identifier for this line item, matching the `stateId`
  quantity: number; // Number of units ordered for this line item
  originalProductId: string; // Original product ID before any customization or editing
  sku: string;               // Stock Keeping Unit (SKU) used for inventory tracking
  productVariantId: number;  // ID of the specific product variant (e.g., size, color)
  productId: number;         // ID of the base PIM product
  productVersionId: number;  // ID of the PIM product version, tracking any change
  productLinkId: number; // ID linking this line item to a specific product in the storefront
  properties: {
    _stateId: string[]; // Array of state file identifiers, representing saved designs
    _userId: string; // Unique identifier of the customer who edited and owns these state files
    _hidden: {
      images: string[]; // Array of URLs pointing to preview images of the personalized design
    };
  };
}

Creating a project from cart data

You can use the cartItem data to create a project using the endpoint POST /api/storefront/v1/projects/with-single-item. Here's an example:

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

POST https://api.customerscanvashub.com/api/storefront/v1/projects?storefrontId=12
Content-Type: application/json
{
  "productReference": "$cartItem.originalProductId",
  "ownerId": "$cartItem.properties._userId",
  "items": [
    {
      "designIds": "$cartItem.properties._stateId",
      "sku": "$cartItem.sku",
      "quantity": $cartItem.quantity
    }
  ]
}

// Set a real storefront ID
var storefrontId = 12;
// Set a product reference, order ID, and design IDs from cartItem
var body = $$"""
{
    "productReference": "{{cartItem.originalProductId}}",
    "ownerId": "{{cartItem.properties._userId}}",
    "items": [
        {
            "designIds": "{{cartItem.properties._stateId}}",
            "sku": "{{cartItem.sku}}",
            "quantity": {{cartItem.quantity}}
        }
    ]
}
""";
var project = await projectsApiClient.CreateAsync(storefrontId, null, body);

// Set a real storefront ID
const storefrontId = 12;
// Set a product reference, order ID, and design IDs from cartItem
const body = {
    productReference: cartItem.originalProductId,
    ownerId: cartItem.properties._userId,
    items: [
        {
            designIds: cartItem.properties._stateId,
            sku: cartItem.sku,
            quantity: cartItem.quantity
        }
    ]
};
const project = _projectsApiClient.create(storefrontId, null, body);

// Set a real storefront ID
$storefrontId = 12;
// Set a product reference, order ID, and design IDs from cartItem
$data = [
    'productReference' => $cartItem->originalProductId,
    'ownerId' => $cartItem->properties->_userId,
    'items' => [
        [
            'designIds' => $cartItem->properties->_stateId,
            'sku' => $cartItem->sku,
            'quantity' => $cartItem->quantity
        ]
    ]
];
$project = $projectsApiClient->projectsCreate($storefrontId, null, json_encode($data));

Reopening the editor with personalized data

To allow users to return to editing a previously personalized product, you can reinitialize the editor using the cartItem data. This is useful for scenarios where users want to make further changes after adding the product to the cart or reorder the product later.

Use the following initialization configuration for the editor:

simpleEditor.init({
    configVersion: 2,
    input: {
      productId: cartItem.productId,            // ID of the base product
      productLinkId: cartItem.productLinkId,    // Link ID from the storefront
      productVersionId: cartItem.productVersionId, // Version ID of the product
      sku: cartItem.sku,                        // SKU of the product
      designId: cartItem.properties._stateId[0] // Use the first design ID from the state array
    },
    integration: {
      tenantId: <yourTenantId>,
      user: {
        id: cartItem.properties._userId,      // User ID from cartItem
        token: <userToken>                    // User token (retrieve or regenerate if needed)
      },
      storefrontId: <yourStorefrontId>,
      cchubApiGatewayUrl: "https://api.customerscanvashub.com/"
    },
    // Additional settings or workflow content can be included here
});

Key Points:

The designId is taken from the _stateId array in cartItem.properties. Use the first element if multiple designs exist.
Ensure the user.token is valid. If the token has expired, generate a new one using the GET /api/storefront/v1/storefront-users/token endpoint.
This approach allows users to resume editing exactly where they left off, with all previous personalization intact.