Output data

• Last updated on October 10, 2025
• •
• 2 minutes to read

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:

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

Event data

The event returns an object with the following structure:

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

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.

For more details, refer to the Working with projects 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:

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.