---
title: "Output data | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/output-data/"
---

# Output data

> When the user finishes editing the product, the Simple Editor triggers the `addtocart` event and puts a cart line item to the `detail` field.

## Handling the addtocart event

To catch the event of finishing the personalization and process the result, handle the `addtocart` event as follows:

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

### Event data

The event returns an object with the following structure:

```ts
{
  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: {
      snapshot?: string;       // Snapshot of the design
      images: string[];        // Array of URLs pointing to preview images of the personalized design
      downloadUrls?: string[]; // Array of URLs pointing to downloadable files
    };
  };
}
```

This data can be used to create a project or to reopen the editor for further personalization.

## Creating projects

To create a project and start rendering print files, use the endpoint [`POST /api/storefront/v1/projects/with-single-item`](https://customerscanvas.com/docs/hub/dev-center/api/storefront.md#tag/projects/CreateWithSingleItem).

For more details, refer to the [Working with projects](https://customerscanvas.com/docs/hub/dev-center/api/storefront/working-with-projects.md) topic.

## 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 from the `addtocart` event. This is useful for scenarios where users want to make further changes after adding the product to the cart or reorder the product.

Use the following configuration to reopen the editor:

```javascript
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`](https://customerscanvas.com/docs/hub/dev-center/api/storefront.md#tag/storefrontusers/GetToken) endpoint.
- This approach allows users to resume editing exactly where they left off, with all previous personalization intact.