WS Form to Shopify Bridge

Core Capabilities

Identity Sync

Automatically maps Customer Email, Phone, Country, and complete Shipping Addresses to the Shopify Checkout session.

Smart Actions

Supports "Add to Cart" (Drawer), "Direct Checkout" (Redirect), and "Update Cart" (Sync Data Only) with zero coding.

Hybrid Modes

Switch between Single Mode for simple products and Repeater Mode for complex bulk order forms.

Zero-Code Config

Configure the bridge entirely within the WS Form Builder using CSS classes and Custom Attributes.

Class: vsg-shopwp-form

Attr: data-vsg-variant

<!-- Example of how the bridge interprets your form -->
<form class="vsg-shopwp-form vsg-mode-single">
  
  <!-- Product Data -->
  <input type="hidden" data-vsg-variant="43254211..." value="...">
  
  <!-- Customer Data -->
  <input type="email" data-vsg-email name="email">
  
  <!-- Submit Button -->
  <button class="vsg-btn-checkout">Buy Now</button>

</form>

Future Work: SDK Expansion

Transitioning from a client-side bridge to a full Shopify SDK.

Priority 1: Data Flow

Dynamic Data Population

Goal: Allow WS Form fields to dynamically populate with Shopify data.

Product Select Field: Fetch all published products via ShopWP API.
Variant Chain: Selecting a product updates variant options automatically.
Pricing Sync: Live price updates based on selection.

Priority 2: Feedback

Error Handling Loop

Goal: Bi-directional communication where Shopify responses dictate UI state.

Listeners for do.afterAddToCart and do.onError.
Conditional success messages (e.g., "Out of Stock").
Loading states during async API calls.

Priority 3: Assets

File Upload Support

Goal: Support custom file uploads as Line Item Properties.

Detect type="file" inputs.
Pass public file URLs to Shopify payload.

Priority 4: State

Cart State Awareness

Goal: Ability to read Cart/Product state before acting.

Inventory Check: Disable submit if quantity > stock.
Cart Presence: Toggle "Add" to "Update" if item exists.
Mini-Cart: Render cart summary inside WS Form.

Priority 5: Deep Data

Advanced Mapping

Goal: Deep integration with Shopify's meta-data structure.

Map fields to Order Metafields.
Map extra fields to Customer Metafields.
Bundles: Add multiple distinct variants from one submission.

Priority 6: Commerce

Discount Validation

Goal: Validate codes before checkout.

"Verify Code" button with async Shopify check.
UI Feedback showing calculated savings.