Developer & Implementation Documentation

1. Architectural Overview & Philosophy

The C7 VIP Member Lounge (vip-lounge.js) is an embeddable, standalone micro-frontend built specifically for luxury wineries powered by Commerce7.

2. Technology Stack

3. How Commerce7 Integration Works

┌────────────────────────────────────────────────────────────────────────┐
│                        DATA & SESSION ARCHITECTURE                    │
└────────────────────────────────────────────────────────────────────────┘

    [ Browser Client ]
           │
           ├─ 1. Reads Cookies / LocalStorage:
           │     • `c7-customer` (Decodes customerId, firstName, isClubMember)
           │     • `c7-cart` (Reads active cart ID)
           │     • `c7_last_reservation` (Local booking cache)
           │
           ├─ 2. Autonomous Public REST Queries (No App Secret Required):
           │     • GET /v1/product/for-web?limit=6
           │     • GET /v1/reservation-type/for-web
           │     • GET /v1/club/for-web
           │
           ├─ 3. Authenticated Member Query (If Customer Token Present):
           │     • GET /v1/customer/:id/club-membership (Bearer Customer Token)
           │
           ├─ 4. Live Actions (1-Click Operations):
           │     • POST /v1/cart/item (1-Click Add to Cart)
           │     • Direct Navigation to /reservation/type/:slug
           │     • Direct Navigation to /club/:slug
           │
           └─ 5. UI Rendering inside Shadow Root (<c7-vip-drawer-host>)Copy

3.1 Tenant Resolution Order

The library resolves the Commerce7 tenant identifier using the following priority waterfall:

1. data-tenant="..." attribute on the <script> tag.
2. Any DOM element with [data-tenant] (standard on C7 theme wrappers).
3. window.commerce7.tenant global object.
4. Fallback default: uncorked-by-gorilion.

3.2 Public Commerce7 APIs Utilized

All public endpoints are queried using standard tenant: <tenant-id> request headers:

• Products: GET https://api.commerce7.com/v1/product/for-web?limit=6
• Reservations: GET https://api.commerce7.com/v1/reservation-type/for-web → Routes to /reservation/type/:slug
• Wine Clubs: GET https://api.commerce7.com/v1/club/for-web → Routes to /club/:slug
• Cart API: POST https://api.commerce7.com/v1/cart/item

4. Full Script Configuration Reference (data-* Attributes)

Add any of these attributes to the <script> tag to configure the lounge:

5. URL Query Parameters (Testing & Campaigns)

6. Programmatic JavaScript API (window.C7VIPDrawer)

The bundle registers a global controller on the window object:

interface C7VIPDrawerController {
  open: () => void;
  close: () => void;
  toggle: () => void;
  setPosition: (position: "bottom" | "top" | "left" | "right") => void;
  setConfig: (config: Partial<DrawerConfig>) => void;
  setData: (data: VIPDrawerData) => void;
  getState: () => {
    isOpen: boolean;
    data: VIPDrawerData;
    config: DrawerConfig;
    isLoggedIn: boolean;
    cartSummary: C7CartSummary | null;
  };
}Copy

Usage Examples:

// Open the lounge from any custom button
window.C7VIPDrawer.open();

// Switch position dynamically
window.C7VIPDrawer.setPosition('top');

// Update featured club on the fly
window.C7VIPDrawer.setConfig({ featuredClub: 'member-s-choice-club' });

// Inspect live state
console.log(window.C7VIPDrawer.getState());Copy

Declarative DOM Triggers:

The script automatically listens for clicks on any element matching these selectors:

• [data-c7-vip-trigger]
• .c7-vip-trigger
• [data-vip-lounge]
• .vip-lounge-trigger
• Links with href="#vip-lounge" or href="#lounge"

7. Cart Collision Prevention Architecture

To prevent UI clashes between the VIP Lounge and Commerce7's native slide-out cart, the VIP Lounge:

1. Listens for click events on Commerce7 cart triggers ([data-c7-cart], .c7-cart, .c7-side-cart) and automatically closes the VIP Lounge immediately.
2. In "bottom" mode, the drawer occupies the bottom half of the screen, leaving the top right side-cart completely unobstructed.
3. Automatically notifies visitors when a wine is added to the cart via a sleek in-drawer toast banner showing updated item count and subtotal.