Can I vibe code InCart Upsell?

Build a lightweight custom cart upsell Web Component for a Shopify theme using native JavaScript and the Shopify Cart AJAX API.

1. DATA MODEL & CONFIGURATION:
- Store upsell rules as a JSON mapping or Shopify Metafields. Each rule defines: target_product_id (or tag), offer_variant_id, headline, custom_discount_text, and min_cart_value.

2. CORE FUNCTIONALITY:
- Listen to standard Shopify theme cart mutation events (e.g., cart:updated, fetch calls to /cart/add.js or /cart/change.js).
- On cart update, fetch the current cart payload from /cart.js.
- Evaluate cart items against the active rule set. If a target product is in the cart AND the offer variant is NOT already in the cart AND min_cart_value is satisfied, trigger the upsell display.
- Render an inline upsell widget inside the cart drawer DOM container (.cart-drawer__body or data-cart-upsell-target).
- The widget must include product title, image, price, optional discount tag, and an 'Add' button.
- Clicking 'Add' posts to /cart/add.js via fetch API with the offer_variant_id and triggers a cart refresh event without reloading the page.

3. EDGE CASES & FAILURE HANDLING:
- Out-of-stock check: Verify target offer variant available property before rendering.
- Prevent infinite loops: If the user removes the trigger product, automatically remove or hide the upsell widget.
- Handle loading states: Disable the 'Add' button and show a small inline spinner during AJAX requests to prevent duplicate additions.

4. OUT OF SCOPE:
- Admin panel UI or external database. All configurations must be read directly from liquid variables or theme JSON settings.
- Multi-currency conversions beyond standard Shopify theme currency formatters.

$ each button prefixes agent-specific run instructions · build your own product, never copy proprietary code, trademarks or designs