System Flow Charts
Visual diagrams of the complete integration architecture
Complete System Architecture
ascii
┌─────────────────────────────────────────────────────────────────────────────┐
│ COMPLETE SYSTEM ARCHITECTURE │
│ 11ty + Shopify UCP + Google AI Integration │
└─────────────────────────────────────────────────────────────────────────────┘
┌──────────────────┐
│ User Browser │
│ │
│ ┌────────────┐ │
│ │ 11ty Site │ │
│ │ (Static) │ │
│ └────────────┘ │
│ │ │
└─────────┼────────┘
│
├─────────────────┬──────────────────┬─────────────────┐
│ │ │ │
▼ ▼ ▼ ▼
┌──────────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Shopify UCP │ │ OAuth 2.0 │ │ A2P Payment │ │ Google AI │
│ Catalog API │ │ Identity │ │ Gateway │ │ Data Stream │
│ │ │ Provider │ │ │ │ │
│ ┌──────────────┐ │ │ │ │ │ │ │
│ │ Products │ │ │ ┌──────────┐ │ │ ┌──────────┐ │ │ ┌──────────┐ │
│ │ Variants │ │ │ │ Login │ │ │ │ Mandate │ │ │ │ Analytics│ │
│ │ Inventory │ │ │ │ Sessions │ │ │ │ Verify │ │ │ │ ML Model │ │
│ └──────────────┘ │ │ │ Tokens │ │ │ │ Process │ │ │ │ Personalize│
│ │ │ └──────────┘ │ │ └──────────┘ │ │ └──────────┘ │
└──────────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
│ │ │ │
└─────────────────┴──────────────────┴─────────────────┘
│
▼
┌──────────────────┐
│ Middleware │
│ (Xano/n8n) │
│ │
│ ┌──────────────┐ │
│ │ Data Sync │ │
│ │ Webhooks │ │
│ │ Transform │ │
│ └──────────────┘ │
└──────────────────┘
│
┌─────────┴─────────┐
▼ ▼
┌──────────────┐ ┌──────────────┐
│ Database │ │ WebSocket │
│ │ │ Server │
│ ┌──────────┐ │ │ │
│ │ Users │ │ │ ┌──────────┐ │
│ │ Orders │ │ │ │ Real-time│ │
│ │ Sessions │ │ │ │ Events │ │
│ │ Consent │ │ │ │ Streaming│ │
│ └──────────┘ │ │ └──────────┘ │
└──────────────┘ └──────────────┘Build-Time Data Flow (11ty)
ascii
┌─────────────────────────────────────────────────────────────────┐
│ 11TY BUILD-TIME DATA FLOW │
└─────────────────────────────────────────────────────────────────┘
START BUILD
│
▼
┌─────────────────────────┐
│ .eleventy.js │
│ (Configuration) │
└─────────────────────────┘
│
▼
┌─────────────────────────┐
│ src/_data/ │
│ │
│ ┌───────────────────┐ │
│ │ ucpClient.js │ │ ← JWT Authentication
│ │ (API Client) │ │
│ └───────────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────┐ │
│ │ products.js │ │ ← Fetch Products
│ │ (Data File) │ │
│ └───────────────────┘ │
└─────────────────────────┘
│
│ [Product Data Array]
│
▼
┌─────────────────────────┐
│ src/index.njk │ ← Product Listing
│ src/product.njk │ ← Product Details
│ (Templates) │
└─────────────────────────┘
│
│ [Rendered HTML]
│
▼
┌─────────────────────────┐
│ _site/ │
│ │
│ ├── index.html │
│ ├── products/ │
│ │ ├── product-1.html │
│ │ ├── product-2.html │
│ │ └── ... │
│ ├── css/ │
│ └── js/ │
└─────────────────────────┘
│
▼
DEPLOY TO CDNRuntime User Flow
ascii
┌─────────────────────────────────────────────────────────────────┐
│ RUNTIME USER FLOW │
└─────────────────────────────────────────────────────────────────┘
USER VISITS SITE
│
▼
┌─────────────────────────┐
│ Load Static HTML │
│ (from CDN) │
└─────────────────────────┘
│
▼
┌─────────────────────────┐
│ Initialize JavaScript │
│ - Session Manager │
│ - Consent Manager │
│ - WebSocket Client │
└─────────────────────────┘
│
├─── Not Logged In ───┐
│ │
│ ▼
│ ┌─────────────────────────┐
│ │ Show Login Button │
│ └─────────────────────────┘
│ │
│ │ [User Clicks Login]
│ │
│ ▼
│ ┌─────────────────────────┐
│ │ OAuth 2.0 Flow │
│ │ 1. Redirect to IdP │
│ │ 2. User Authenticates │
│ │ 3. Callback with Code │
│ │ 4. Exchange for Token │
│ └─────────────────────────┘
│ │
│ ▼
│ ┌─────────────────────────┐
│ │ Store Session Token │
│ │ (httpOnly Cookie) │
│ └─────────────────────────┘
│ │
└─────────────────────┘
│
▼
┌─────────────────────────┐
│ User Logged In │
│ - Show User Profile │
│ - Enable Cart │
│ - Track Behavior │
└─────────────────────────┘
│
├─── Browse Products ───┐
│ │
│ ▼
│ ┌─────────────────────────┐
│ │ View Product Details │
│ │ - Images │
│ │ - Price │
│ │ - Add to Cart │
│ └─────────────────────────┘
│ │
│ │ [Add to Cart]
│ │
│ ▼
│ ┌─────────────────────────┐
│ │ Update Cart State │
│ │ (localStorage) │
│ └─────────────────────────┘
│ │
│ │ [Proceed to Checkout]
│ │
│ ▼
│ ┌─────────────────────────┐
│ │ Checkout Flow │
│ │ 1. Review Cart │
│ │ 2. Shipping Info │
│ │ 3. Payment Method │
│ └─────────────────────────┘
│ │
│ ▼
│ ┌─────────────────────────┐
│ │ A2P Payment Mandate │
│ │ 1. Generate Mandate │
│ │ 2. Sign with Key │
│ │ 3. Submit to Gateway │
│ └─────────────────────────┘
│ │
│ ▼
│ ┌─────────────────────────┐
│ │ Payment Processing │
│ │ - Verify Signature │
│ │ - Charge Payment │
│ │ - Create Order │
│ └─────────────────────────┘
│ │
│ ▼
│ ┌─────────────────────────┐
│ │ Order Confirmation │
│ │ - Thank You Page │
│ │ - Email Receipt │
│ └─────────────────────────┘
│
└─── Throughout Session ───┐
│
▼
┌─────────────────────────┐
│ Data Streaming │
│ (If Consent Given) │
│ │
│ WebSocket → Google AI │
│ - Page Views │
│ - Product Views │
│ - Cart Actions │
│ - Purchases │
└─────────────────────────┘
│
▼
┌─────────────────────────┐
│ AI Personalization │
│ - Product Recommendations │
│ - Dynamic Pricing │
│ - Content Adaptation │
└─────────────────────────┘OAuth 2.0 Authentication Flow
ascii
┌─────────────────────────────────────────────────────────────────┐
│ OAUTH 2.0 AUTHENTICATION FLOW │
│ (Authorization Code + PKCE) │
└─────────────────────────────────────────────────────────────────┘
┌──────────┐ ┌──────────────┐
│ Client │ │ Identity │
│ (11ty) │ │ Provider │
└──────────┘ └──────────────┘
│ │
│ 1. User clicks "Login" │
│ │
│ 2. Generate code_verifier & code_challenge │
│ (PKCE) │
│ │
│ 3. Redirect to Authorization Endpoint │
│────────────────────────────────────────────────────>
│ GET /authorize? │
│ response_type=code │
│ client_id=xxx │
│ redirect_uri=xxx │
│ scope=openid profile email │
│ code_challenge=xxx │
│ code_challenge_method=S256 │
│ │
│ 4. Show Login Form │
│ │
│ 5. User Authenticates
│ │
│ 6. Redirect back with authorization code │
│<────────────────────────────────────────────────────
│ GET /callback?code=AUTH_CODE │
│ │
│ 7. Exchange code for tokens │
│────────────────────────────────────────────────────>
│ POST /token │
│ grant_type=authorization_code │
│ code=AUTH_CODE │
│ redirect_uri=xxx │
│ client_id=xxx │
│ code_verifier=xxx │
│ │
│ 8. Validate Request │
│ 9. Verify PKCE │
│ │
│ 10. Receive tokens │
│<────────────────────────────────────────────────────
│ { │
│ "access_token": "...", │
│ "id_token": "...", │
│ "refresh_token": "...", │
│ "expires_in": 3600 │
│ } │
│ │
│ 11. Store tokens securely │
│ (httpOnly cookie) │
│ │
│ 12. Decode id_token for user info │
│ │
│ 13. User is logged in │
│ │
│ │
│ [Later: Token Expires] │
│ │
│ 14. Use refresh_token to get new access_token │
│────────────────────────────────────────────────────>
│ POST /token │
│ grant_type=refresh_token │
│ refresh_token=xxx │
│ client_id=xxx │
│ │
│ 15. Receive new tokens │
│<────────────────────────────────────────────────────
│ │A2P Payment Flow
ascii
┌─────────────────────────────────────────────────────────────────┐
│ A2P PAYMENT FLOW │
│ (Agent Payments Protocol - Cryptographic) │
└─────────────────────────────────────────────────────────────────┘
┌──────────┐ ┌──────────────┐
│ Client │ │ Payment │
│ (11ty) │ │ Gateway │
└──────────┘ └──────────────┘
│ │
│ 1. User completes checkout │
│ │
│ 2. Generate payment mandate │
│ { │
│ "mandate_id": "uuid", │
│ "amount": 99.99, │
│ "currency": "USD", │
│ "merchant_id": "...", │
│ "timestamp": "...", │
│ "nonce": "random" │
│ } │
│ │
│ 3. Sign mandate with private key │
│ signature = sign(mandate, private_key) │
│ │
│ 4. Submit signed mandate │
│────────────────────────────────────────────────────>
│ POST /payments/mandate │
│ { │
│ "mandate": {...}, │
│ "signature": "...", │
│ "public_key": "..." │
│ } │
│ │
│ 5. Verify Signature │
│ verify(mandate, │
│ signature,│
│ public_key)
│ │
│ 6. Check Idempotency│
│ (mandate_id) │
│ │
│ 7. Validate Amount │
│ & Merchant │
│ │
│ 8. Process Payment │
│ (Charge Card) │
│ │
│ 9. Payment confirmation │
│<────────────────────────────────────────────────────
│ { │
│ "status": "success", │
│ "transaction_id": "...", │
│ "mandate_id": "...", │
│ "timestamp": "..." │
│ } │
│ │
│ 10. Create order in database │
│ │
│ 11. Show confirmation to user │
│ │
│ 12. Send receipt email │
│ │WebSocket Data Streaming
ascii
┌─────────────────────────────────────────────────────────────────┐
│ WEBSOCKET DATA STREAMING FLOW │
│ (Real-time to Google AI) │
└─────────────────────────────────────────────────────────────────┘
┌──────────┐ ┌──────────────┐ ┌──────────────┐
│ Client │ │ WebSocket │ │ Google AI │
│ (11ty) │ │ Server │ │ Data Stream │
└──────────┘ └──────────────┘ └──────────────┘
│ │ │
│ 1. User gives consent│ │
│ │ │
│ 2. Establish WS connection │
│──────────────────────> │
│ ws://server/stream? │
│ token=xxx │
│ │ │
│ │ 3. Validate token │
│ │ │
│ 4. Connection established │
│<────────────────────── │
│ │ │
│ 5. Send events │ │
│──────────────────────> │
│ { │ │
│ "event": "pageview", │
│ "page": "/products/123", │
│ "timestamp": "...", │
│ "user_id": "..."│ │
│ } │ │
│ │ │
│ │ 6. Forward to Google AI │
│ │─────────────────────────>
│ │ POST /ingest │
│ │ { │
│ │ "events": [...] │
│ │ } │
│ │ │
│ │ 7. AI processes data │
│ │ │
│ │ 8. Send recommendations │
│ │<─────────────────────────
│ │ { │
│ │ "recommendations": [...]
│ │ } │
│ │ │
│ 9. Receive recommendations │
│<────────────────────── │
│ { │ │
│ "type": "recommendation", │
│ "products": [...], │
│ "confidence": 0.95 │
│ } │ │
│ │ │
│ 10. Update UI with personalized content │
│ │ │
│ │ │
│ [Continuous streaming throughout session] │
│ │ │Headless Forms Architecture
ascii
┌─────────────────────────────────────────────────────────────────┐
│ HEADLESS FORMS ARCHITECTURE │
│ (Decoupled Form Submission & Processing) │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Client Webflow/11ty/Shopify Liquid Theme │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Checkout/Form │ │ Xano API │ │ GTM Tracking │ │
│ │ UI Components │ │ Library │ │ Code │ │
│ └────────┬────────┘ └────────┬────────┘ └────────┬────────┘ │
│ │ │ │ │
│ └────────────────────┼────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────┐ │
│ │ Form Validation & Events │ │
│ │ - Client-side validation │ │
│ │ - GTM checkout_start event │ │
│ │ - GTM checkout_submit event │ │
│ └────────────────┬───────────────┘ │
└────────────────────────────────┼────────────────────────────────┘
│
│ POST /api/checkout (HTTPS/JSON)
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ MIDDLEWARE LAYER (Xano) │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ POST Endpoints │ │
│ │ /checkout/create │ /webhooks/shopify │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │ │
│ ┌─────────────────┐ ┌────────┴────────┐ ┌─────────────────┐ │
│ │ Database │ │ UCP Data │ │ SD-JWT+kb │ │
│ │ Storage │ │ Transformer │ │ Validator │ │
│ └─────────────────┘ └────────┬────────┘ └─────────────────┘ │
│ │ │
└────────────────────────────────┼────────────────────────────────┘
│
│ Shopify UCP API
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ COMMERCE LAYER (Shopify) │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ UCP API │ │ Order │ │ Webhook │ │
│ │ (Checkout) │ │ Management │ │ System │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ Customer CRM │ Meta Objects │ Inventory Management ││
│ └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘
│
│ Async Webhooks (10-30s)
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ ANALYTICS LAYER │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Google Tag │ │ Google │ │ Data Layer │ │
│ │ Manager (GTM) │ │ Analytics 4 │ │ Events │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ Events: checkout_start → checkout_submit → purchase │
└─────────────────────────────────────────────────────────────────┘
FORM TYPES SUPPORTED:
━━━━━━━━━━━━━━━━━━━━━
├── Checkout Forms → UCP API + Order Creation + GTM purchase
├── Contact Forms → Email notification + CRM
├── Newsletter Signup → Shopify Customer + Shopify Native Email Provider
├── Product Inquiry → Shopify Customer Note + Meta Objects
├── Quote Request → Custom workflow + Admin email
└── Custom Forms → Configurable handlersExport Code to Native Shopify
ascii
┌─────────────────────────────────────────────────────────────────┐
│ EXPORT CODE TO NATIVE SHOPIFY │
│ (Webflow/11ty → Shopify Theme) │
└─────────────────────────────────────────────────────────────────┘
SOURCE (Headless) TARGET (Shopify Theme)
━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━━━━━
┌──────────────────┐ ┌──────────────────────┐
│ Webflow/11ty │ │ Shopify Theme │
│ Component │ │ (Dawn/Custom) │
│ │ │ │
│ ┌────────────┐ │ EXPORT │ ┌────────────────┐ │
│ │ Form UI │ │ ─────────────> │ │ .liquid │ │
│ │ Xano API │ │ │ │ section file │ │
│ │ GTM Code │ │ │ │ + GTM events │ │
│ └────────────┘ │ │ └────────────────┘ │
└──────────────────┘ └──────────────────────┘
CONVERSION PROCESS
┌─────────────────────────────────────────────────────────────────┐
│ │
│ STEP 1: Extract Component + Integrations │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ • Identify form/checkout UI boundaries │ │
│ │ • Extract HTML structure │ │
│ │ • Preserve Xano API endpoint configurations │ │
│ │ • Maintain GTM data layer event triggers │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ STEP 2: Transform to Liquid │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ • Convert dynamic values to Liquid variables │ │
│ │ • Replace loops with {% for %} tags │ │
│ │ • Add schema settings for Xano endpoint URL │ │
│ │ • Include GTM container ID as theme setting │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ STEP 3: Create Section Schema │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ {% schema %} │ │
│ │ { │ │
│ │ "name": "UCP Checkout Form", │ │
│ │ "settings": [ │ │
│ │ { "id": "xano_endpoint", "type": "url" }, │ │
│ │ { "id": "gtm_container", "type": "text" } │ │
│ │ ], │ │
│ │ "blocks": [...], │ │
│ │ "presets": [...] │ │
│ │ } │ │
│ │ {% endschema %} │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ STEP 4: Package Assets │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ /sections/ │ │
│ │ └── ucp-checkout-form.liquid │ │
│ │ /assets/ │ │
│ │ ├── xano-api-library.js (API integration) │ │
│ │ ├── gtm-events.js (Analytics tracking) │ │
│ │ └── checkout-form.css │ │
│ │ /snippets/ │ │
│ │ └── form-field.liquid (Reusable fields) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
OUTPUT FILE STRUCTURE:
━━━━━━━━━━━━━━━━━━━━━━
shopify-export/
├── sections/
│ └── ucp-checkout-form.liquid
├── assets/
│ ├── xano-api-library.js
│ ├── gtm-events.js
│ └── checkout-form.css
├── snippets/
│ └── form-field.liquid
└── README.md (Xano + GTM setup instructions)
PRESERVED INTEGRATIONS:
━━━━━━━━━━━━━━━━━━━━━━━
├── Xano Middleware → POST /checkout/create endpoint
├── GTM Events → checkout_start, checkout_submit, purchase
├── UCP Data Format → SD-JWT+kb validation compatible
└── Webhook Support → /webhooks/shopify endpoint readyExport Form Code as Shopify Block
ascii
┌─────────────────────────────────────────────────────────────────┐
│ EXPORT FORM CODE AS SHOPIFY BLOCK │
│ (Webflow/11ty/Shopify Form → Shopify Section Block) │
└─────────────────────────────────────────────────────────────────┘
WEBFLOW/11TY/SHOPIFY FORM SHOPIFY BLOCK
━━━━━━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━
┌──────────────────┐ ┌──────────────────────┐
│ <form> │ │ {% schema %} │
│ <input> │ CONVERT │ "blocks": [{ │
│ <select> │ ─────────────> │ "type": "form" │
│ <textarea> │ │ }] │
│ <button> │ │ {% endschema %} │
│ </form> │ │ │
└──────────────────┘ └──────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ BLOCK SCHEMA STRUCTURE │
└─────────────────────────────────────────────────────────────────┘
{% schema %}
{
"name": "Form Section",
"tag": "section",
"class": "form-section",
"settings": [
{
"type": "text",
"id": "form_title",
"label": "Form Title",
"default": "Contact Us"
},
{
"type": "select",
"id": "form_type",
"label": "Form Type",
"options": [
{ "value": "contact", "label": "Contact Form" },
{ "value": "newsletter", "label": "Newsletter" },
{ "value": "quote", "label": "Quote Request" }
]
},
{
"type": "url",
"id": "form_endpoint",
"label": "Form Submission Endpoint"
}
],
"blocks": [
{
"type": "text_field",
"name": "Text Field",
"settings": [
{ "type": "text", "id": "label", "label": "Field Label" },
{ "type": "text", "id": "name", "label": "Field Name" },
{ "type": "checkbox", "id": "required", "label": "Required" }
]
},
{
"type": "email_field",
"name": "Email Field",
"settings": [...]
},
{
"type": "textarea_field",
"name": "Textarea",
"settings": [...]
},
{
"type": "select_field",
"name": "Dropdown",
"settings": [...]
}
],
"presets": [{
"name": "Contact Form",
"blocks": [
{ "type": "text_field" },
{ "type": "email_field" },
{ "type": "textarea_field" }
]
}]
}
{% endschema %}
┌─────────────────────────────────────────────────────────────────┐
│ LIQUID TEMPLATE STRUCTURE │
└─────────────────────────────────────────────────────────────────┘
<div class="form-section">
<h2>{{ section.settings.form_title }}</h2>
<form action="{{ section.settings.form_endpoint }}"
method="POST"
class="headless-form"
data-form-type="{{ section.settings.form_type }}">
{% for block in section.blocks %}
{% case block.type %}
{% when 'text_field' %}
<div class="form-field" {{ block.shopify_attributes }}>
<label for="field-{{ block.id }}">
{{ block.settings.label }}
</label>
<input type="text"
id="field-{{ block.id }}"
name="{{ block.settings.name }}"
{% if block.settings.required %}required{% endif %}>
</div>
{% when 'email_field' %}
<div class="form-field" {{ block.shopify_attributes }}>
<label for="field-{{ block.id }}">
{{ block.settings.label }}
</label>
<input type="email"
id="field-{{ block.id }}"
name="{{ block.settings.name }}"
{% if block.settings.required %}required{% endif %}>
</div>
{% when 'textarea_field' %}
<div class="form-field" {{ block.shopify_attributes }}>
<label for="field-{{ block.id }}">
{{ block.settings.label }}
</label>
<textarea id="field-{{ block.id }}"
name="{{ block.settings.name }}"
rows="5"
{% if block.settings.required %}required{% endif %}>
</textarea>
</div>
{% endcase %}
{% endfor %}
<button type="submit" class="btn btn--primary">
Submit
</button>
</form>
</div>
┌─────────────────────────────────────────────────────────────────┐
│ INTEGRATION FLOW │
└─────────────────────────────────────────────────────────────────┘
Shopify Theme Editor Middleware (Xano)
━━━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━
│ │
│ 1. Merchant adds Form Section │
│ via Theme Customizer │
│ │
│ 2. Configure form fields │
│ using blocks │
│ │
│ 3. Set form endpoint URL ──────────│
│ │
│ [Customer Submits Form] │
│ │
│ 4. Form POSTs to endpoint ─────────>
│ │
│ 5. Process submission
│ • Validate data
│ • Store in DB
│ • Trigger actions
│ │
│ 6. Return success/error <───────────
│ │
│ 7. Display confirmation │
│ message to customer │
│ │Download Complete Flow Charts
Download the complete ASCII flow chart document with all diagrams and detailed annotations.
Download All Charts (Markdown)