Output data

When the user finishes editing the product, the Handy Editor triggers the addtocart event. To process the result, handle this event as follows:

handyEditor.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 generated by the customer
    _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 POST /api/storefront/v1/projects/with-single-item. For more details, refer to the Working with projects topic.

To learn how you can reopen the editor with a personalized design, refer to the Recovery strategies topic.