Can I vibe code Slide Cart?

Build a custom, self-contained Shopify slide-out cart drawer using modern JavaScript (Web Components) and Shopify's public AJAX Cart API (/cart.js, /cart/add.js, /cart/change.js).

1. UI & LAYOUT:
- Slide-out panel fixed to the right side of the screen with smooth CSS transforms.
- Header displaying cart item count and a close button.
- Main body containing a list of line items with product thumbnail, title, variant title, item price, quantity adjustment controls (+/-), and remove link.
- Dynamic Progress Bar component calculation: Compare current subtotal against a target dollar threshold (e.g. $100 for free shipping) defined via a JS variable. Display percentage fill and remaining amount needed.
- In-cart Upsell Section: Render up to 2 product recommendations fetched from '/recommendations/products.json?product_id={first_item_id}'. Include quick 'Add' button for each.
- Footer showing subtotal, tax/shipping disclaimer, checkout button linking to '/checkout'.

2. CORE LOGIC & STATE:
- Listen for global 'cart:refresh' events or intercept native form submits to open the drawer automatically on add-to-cart.
- Asynchronously send fetch requests to update line item quantities via '/cart/change.js'.
- Re-render line items, total price, and free-shipping progress bar state without page reloads.

3. FAILURE MODES & EDGE CASES:
- Disable buttons during active fetch calls to prevent race condition clicks.
- Display an inline error toast if stock limits are exceeded on quantity bump.
- Handle formatted multi-currency prices using Shopify.formatMoney if available.

4. OUT OF SCOPE:
- No external backend database or custom admin UI. All settings (thresholds, featured upsells) must be configured directly via HTML data attributes or Shopify Liquid theme settings.

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