# Order Flow, ArtWork Generation, and Testing

Before launching your customization program to the public, it is recommended to test the entire lifecycle of an order. Testing the flow from end-to-end will help confirm that designs created within the customizers can accurately be produced.

## 1. Order Flow

Understanding how data travels from your customer's screen to the factory floor is the first step in successful testing. Unlike stock products, a custom product relies on a "Recipe" to tell the manufacturer what to create.

### Step 1:  Product Selection and Variant Context

When a customer lands on a product page, the VU script looks at the E-comm store **Variant ID**.

* **The Connection:** The system matches the specific product variant (e.g., "Red / Large T-Shirt") to a specific **VU Template**.
* **Key Validation:** If a customer selects "Blue", the Customizer will display the corresponding product configuration as the customizer loads. 

### Step 2: The "Handshake" (Add-To-Cart)

When the customer clicks "Add to Cart" inside the customizer:

1. VU generates a unique, single-use string called a **Recipe ID**.
2. This ID (along with a thumbnail image) is injected into the E-comm Cart as a **Line Item Property**.
3. **Property Name:** You will see this in the backend as `recipe_id` 
4. Along with the above, VU passes the correct product variant to the cart as well with the context established in Step 1

{% hint style="warning" %}
If the \_recipe\_id is not present on the line item in the cart, **no artwork can be generated**. The order will process as a standard blank garment.
{% endhint %}

### Step 3: Payment & Ingestion (The Trigger)

VU utilizes a "listener" that monitors your store for orders.

* **The Trigger:** VU **only** ingests orders that are indicated as **Paid**. Unpaid draft orders will not import into the VU OMS.
* **Rejection Logic:** The system will reject an order if mandatory data is missing (e.g., missing Shipping Lines, missing `recipe_id`, or missing Variant data).

### Step 4: Production (Artwork Generation)

Once imported, the VU system reads the Recipe ID and triggers the **Artwork Engine**. This engine rebuilds the customer’s design file in high resolution (vector/raster) according to the print specs configured during implementation.

***

## 2. Phase I: Testing the Customizer Experience (UI/UX)

While the VU team handles the initial setup, **the Brand is responsible for the final sign-off on the user experience.** You know your product standards best.

Perform the following visual and functional checks for every product template:

#### Zone & Logic Checks

* **Print Areas:** Do zones accurately reprsent defined specs and dimensions? Are visuals within a zone behaving as expected?
* **Safety & Bleed:** Are the safe zones clearly visible? Does the system warn the user if text is too close to the edge?
* **Layering:** Test multiple elements. If a user adds a background pattern and text, does the text sit on top of the pattern as expected?

#### Asset Verification

* **Clip Art & Images:** Verify your specified gallery images load correctly and have transparent backgrounds where appropriate.
* **Fonts:** Check that all custom fonts render correctly, including special characters if your market requires them.
* **Colors:** Compare the on-screen fabric colors to your physical samples. Ensure the hex codes provided match reality as closely as possible.

#### Mobile Validation

* Perform a complete design session on a mobile device to ensure buttons, modals, and drag-and-drop gestures are smooth and touch-friendly.

***

## 3. Phase II: Validating the Order Data

Once the visual design is correct, you must prove the technical integration is working by simulating a purchase.

### How to Test:

1. **Place a Real Order:** We recommend running a live credit card transaction (which you can refund later) to verify the full Orders Paid webhook flow.
2. **Verify Line Item Properties:** Immediately after purchasing, go to your **Shopify Admin > Orders**.
   * Open the order and expand the item details.
   * **Pass:** You see a property labeled \_recipe\_id (or Recipe ID) with a long alphanumeric string.
   * **Fail:** The property is missing. Stop here and contact your implementation specialist; the integration is incomplete.
3. **Check Upcharges (If applicable):** If your design included an Add-On (e.g., "Premium Embroidery +$5.00"), verify that this upcharge was added to the cart as a separate line item bundle product.

***

## 4. Phase III: Validating the Print Artwork

This is the most critical step. You must verify that the file the factory receives is "Print Ready."

### The "Factory Output" Test:

After your test order is marked "Paid," wait a few minutes for the VU Artwork Service to process the file, then follow these steps to retrieve it:

1. **Log into the VU Dashboard.**
2. Navigate to **Production > Orders**.
3. From the left menu, select the **Factory** associated with your product.
4. Locate your test order in the list and download the Traveler for the specific order.
5. **Verify** the order details and the traveler against the order placed.

### Technical Audit:

Open the downloaded file and check:

* **Dimensions:** Is the canvas size exactly what your printer requires (e.g., 14" x 16" at 300 DPI)?
* **Placement:** Is the design located at the correct X/Y coordinates relative to the garment mockup?
* **Color Profile:** Does the output file use the correct color space (CMYK vs RGB)?
* **Quality:** Zoom in 100%. Are uploaded raster images crisp? Are vector elements sharp?

***

### Troubleshooting: Common Scenarios 

| Issue                                         | Likely Cause                                           | Solution                                                                                 |
| --------------------------------------------- | ------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| **I can't see the order in VU OMS**           | Order is not marked "Paid" in the E-commerce platform. | Capture payment and mark the order accordingly. Ensure webhooks are active.              |
| **The order imported, but has no artwork.**   | Missing Recipe ID.                                     | Your theme integration (ATC button) is not passing the `recipe_id` property.             |
| **The wrong shirt color appears in the OMS.** | Variant Mismatch.                                      | The user selected "Blue", but the data-variant tag passed to VU was static/incorrect.    |
| **I can't download the file.**                | Permissions/Status.                                    | Ensure you are looking at the correct Factory view and the order status is not "On Hold. |