> For the complete documentation index, see [llms.txt](https://vu-custom.gitbook.io/vu-custom/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vu-custom.gitbook.io/vu-custom/admin-api/integration/sending-recipe-details-to-cart.md). # Sending Recipe Details to Cart ## Overview When a customer completes product customization in the VU Customizer, the resulting **`recipeID`** contains the information required by the client’s cart integration, including the recipe body, images, SKU, and recipe token. This guide explains how to configure the VU Customizer to pass recipe and order information to the client’s cart when a customer clicks the ATC button at the end of their customization session. There are two supported implementation approaches: 1. **Recommended:** Use the VU Customizer Add to Cart event. 2. **Alternative:** Use a fully client-owned Add to Cart button and call `saveRecipe(true)` directly. \*Note: This sequence applies to integrations where the VU platform does not directly write into the clients E-Commerce platform. VU does this as part of platform connections to various platform connections such as Shopify. To view the full list of platform connections, visit our [Store Connections](https://vu-custom.gitbook.io/vu-custom/onboarding/setup-e-commerce-store) page. *** ### How the Integration Works The integration separates responsibilities between the VU Customizer and the client’s storefront/cart. #### VU Customizer The VU Customizer: * Validates the customization. * Saves the recipe. * Returns recipe and cart metadata. * Provides the recipe body, images, SKU, and recipe token. #### Client Storefront The client: * Receives the recipe/cart data from the VU Customizer. * Takes the returned recipe ID, SKU, and OLAs. * Writes the required information into its own cart. The basic integration flow is: **Customer customizes product → VU validates recipe → VU saves recipe → VU returns cart metadata → Client adds data to cart** *** ## Option 1: VU Customizer Add to Cart Event This is the **preferred public event flow** for integrating the VU Customizer with a client-owned cart. ### Step 1: Listen for the Add to Cart Event Add an event listener for the `customizer.add-to-cart` event. ```javascript document.addEventListener("customizer.add-to-cart", (event) => { console.log("ATC completed:", event); }); ``` When the event is triggered, the event detail contains the API response needed for the client’s cart integration. The response includes the recipe information, images, SKU, and recipe token. Sample of the API Response Details:
*** ### Step 2: Understand the Available Events The VU Customizer provides events at different stages of the Add to Cart process. #### Add to Cart Clicked Triggered when the customer clicks Add to Cart. ```javascript document.addEventListener("customizer.add-to-cart-clicked", (event) => { console.log("1. ATC clicked:", event.detail); }); ``` #### Before Add to Cart Triggered before the recipe is saved. ```javascript document.addEventListener("customizer.before-add-to-cart", (event) => { console.log("2. Before recipe save:", event.detail); }); ``` #### Add to Cart Completed Triggered after the recipe has been successfully saved. ```javascript document.addEventListener("customizer.add-to-cart", (event) => { console.log("3. Recipe saved:", event.detail); }); ``` These events can be used to monitor the Add to Cart lifecycle and integrate the resulting recipe information into the client’s cart process. *** ### Step 3: Add the Recipe to the Client Cart Once the `customizer.add-to-cart` event is received, the client should pass the returned data into its cart integration. #### Example ```javascript document.addEventListener("customizer.add-to-cart", ({ detail }) => { // Recipe is now saved. // detail contains the API response for the client's cart integration. clientCart.add(detail); }); ``` The client is responsible for taking the returned recipe information and adding the appropriate data to its own cart. *** ## Option 2: Client-Owned Add to Cart Button If the client wants to completely control the Add to Cart button and avoid relying on the VU Customizer Add to Cart event, the client can call the VU Customizer directly. This approach uses `saveRecipe(true)` to save the recipe and return the cart data. ### Step 1: Trigger Add to Cart The client-owned Add to Cart button can call: ```javascript window.customizer.addToCart(); ``` This invokes the VU Customizer Add to Cart process. *** ### Step 2: Save the Recipe Directly Alternatively, the client can bypass the VU Customizer Add to Cart event entirely and save the recipe directly. ```javascript async function handleClientAddToCart() { const response = await window.customizer.saveRecipe(true); const cartData = response.data; console.log("Cart data:", cartData); await clientCart.add(cartData); } ``` In this implementation: 1. The client calls `saveRecipe(true)`. 2. VU saves the recipe. 3. The response contains the cart data. 4. The client passes that data to its own cart implementation. *** ## Add to Cart Button Validation When using a fully client-owned Add to Cart button, the button should only be enabled when the VU Customizer is ready and there are no validation errors. Use the following condition: ```javascript const canAdd = window.customizer.isReadyForAddToCart && !window.customizer.validationManager.hasErrors(); ``` The client should use this condition to determine whether the Add to Cart action can be performed. *** ## Recommended Implementation For most integrations, VU recommends using the standard Add to Cart flow: ``` Customer clicks Add to Cart ↓ VU Customizer validates customization ↓ VU Customizer saves recipe ↓ customizer.add-to-cart event fires ↓ Client receives recipe/cart data ↓ Client adds data to its cart ``` The preferred implementation is to call `addToCart()` and listen for the `customizer.add-to-cart` event. The `saveRecipe(true)` approach is best suited for implementations where the client owns the Add to Cart button and wants direct control over the save process. ***