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 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.

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.

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.

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.

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

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:

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.

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:

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.

---