Platform Architecture

Overview of the Blocker Outdoors platform architecture, technology stack, and integration patterns.

Technology Stack

Core Platform

WordPress: 6.7.1
PHP: 8.1+ (Optimal: 8.2+)
MySQL: 5.7+ or MariaDB 10.6+
Web Server: Apache/Nginx with SSL/TLS (HTTP/2 enabled)

E-Commerce Backend

BigCommerce: Headless commerce platform
BigCommerce for WordPress (Suma): v5.0.7.17
GraphQL: Product variant queries and real-time pricing
REST API: Cart operations, checkout, and order management
Multi-Storefront (MSF): Channel-based product management

Frontend Framework

Theme: Suma Elementor v3.0.0
Page Builder: Elementor Pro v3.28.3
Custom Widgets: 60+ specialized Elementor widgets
Advanced Custom Fields Pro: v6.3.12

Search & Filtering

FacetWP Pro: v4.3.5 - Faceted search engine
Algolia: v2.8.2 - Instant search platform
FacetWP BigCommerce: v0.2.1 - Custom integration adapter

Build System

Laravel Mix: v6.0.49 - Asset compilation and bundling
Preact: v10.11.0 - Lightweight React alternative for widgets
Tailwind CSS: v3.4 - Utility-first CSS framework
PostCSS: Autoprefixer and CSS optimization
Sass: SCSS preprocessing

Architecture Patterns

Headless Commerce Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                    Blocker Outdoors Architecture                     │
└─────────────────────────────────────────────────────────────────────┘

┌──────────────────────┐          ┌──────────────────────────┐
│    BigCommerce       │          │       WordPress          │
│    (Backend)         │◄────────►│      (Frontend)          │
│                      │   API    │                          │
│ • Product Catalog    │          │ • Content Management     │
│ • Variants/Options   │          │ • Template Rendering     │
│ • Inventory Mgmt     │          │ • SEO & Meta Tags        │
│ • Pricing Rules      │          │ • Media Library          │
│ • Cart Sessions      │          │ • URL Routing            │
│ • Checkout Flow      │          │ • User Experience        │
│ • Order Processing   │          │                          │
│ • Customer Data      │          │                          │
│ • Payment Gateway    │          │                          │
└──────────────────────┘          └──────────────────────────┘
         │                                     │
         │                                     ├──► Elementor Page Builder
         │                                     ├──► FacetWP (Product Filtering)
         │                                     ├──► Algolia (Search Indexing)
         │                                     ├──► Klaviyo (Email Marketing)
         │                                     ├──► BazaarVoice (Reviews)
         │                                     ├──► GTM (Analytics Tracking)
         │                                     └──► Narvar (Order Tracking)
         │
         └─────► Webhooks (Real-time Updates)
                 • Product Created/Updated/Deleted
                 • Inventory Level Changes
                 • Order Status Changes
                 • Price Modifications
                 • Customer Updates

Multi-Storefront (MSF) Architecture

Blocker Outdoors leverages BigCommerce MSF for channel management:

┌────────────────────────────────────────┐
│      BigCommerce Store (Primary)       │
└────────────────┬───────────────────────┘
                 │
       ┌─────────┼─────────┐
       │         │         │
       ▼         ▼         ▼
  Channel 1  Channel 2  Channel 3
  (Blocker)  (Wholesale) (Amazon)
       │
       │ Channel-specific:
       │ • Pricing Rules
       │ • Product Visibility
       │ • Inventory Allocation
       │ • Checkout Settings
       │
       ▼
  WordPress Frontend
  (blockeroutdoors.com)

Request Flow

Product Page Request

1. User visits /product/scent-blocker-jacket
2. WordPress routes to single-bigcommerce_product.php template
3. Template queries WordPress post (synced from BigCommerce)
4. Post meta contains:
   - Product ID (BigCommerce)
   - SKU, brand, categories
   - Pricing (cached)
   - Inventory status
   - Custom fields
5. Elementor renders page with custom widgets:
   - Product gallery
   - Variant selector (size, color)
   - Price display with financing options
   - Add to cart button
   - Review widget (BazaarVoice)
   - Related products carousel
6. JavaScript initializes:
   - Real-time pricing (optional API call)
   - Cart widget state
   - Review ratings display
   - Variant option selector
   - Financing calculator (Klarna/Sezzle)
7. Analytics tracking:
   - GTM product_view event
   - Klaviyo product/viewed track

Add to Cart Flow

1. User selects product options:
   - Size: Large
   - Color: Realtree Edge
2. User clicks "Add to Cart" button
3. JavaScript validates selection
4. AJAX POST to BigCommerce REST API:
   POST /stores/{store_hash}/v3/carts
   {
     "line_items": [{
       "product_id": 12345,
       "variant_id": 67890,
       "quantity": 1
     }]
   }
5. BigCommerce responds with cart ID and redirect URL
6. Cart ID stored in cookie/localStorage
7. WordPress cart widget updates via JavaScript:
   - Item count badge
   - Cart drawer opens
   - Line items display
8. Analytics tracking:
   - GTM add_to_cart event
   - Klaviyo product/added-to-cart track
   - Facebook Pixel AddToCart event

Checkout Flow

1. User clicks "Checkout" in cart
2. WordPress redirects to BigCommerce embedded checkout:
   https://blockeroutdoors.com/checkout/{cart_id}
3. BigCommerce loads checkout via iframe/redirect
4. Checkout steps:
   a. Customer info (email, shipping address)
   b. Shipping method selection
   c. Payment information
      - Credit card
      - PayPal
      - Klarna (installments)
      - Sezzle (buy now, pay later)
   d. Order review
5. Order submission:
   - Payment processing
   - Inventory deduction
   - Order creation in BigCommerce
6. Order confirmation:
   - Thank you page
   - Order confirmation email
   - Webhook triggered to WordPress
7. Post-order processing:
   - GTM purchase event
   - Klaviyo order tracking
   - Narvar shipment tracking setup

Product Synchronization Flow

BigCommerce Product Update
         │
         │ (1) Product modified in BC admin
         │
         ▼
Webhook Triggered
         │
         │ (2) POST /wp-json/bigcommerce/v1/webhooks/product-update
         │
         ▼
WordPress Receives Webhook
         │
         │ (3) Verify HMAC signature
         │ (4) Add product ID to sync queue
         │
         ▼
Background Cron Job
         │
         │ (5) Process queue (wp_cron or Linux cron)
         │
         ▼
Fetch Product Data from BC API
         │
         │ (6) GET /stores/{store_hash}/v3/catalog/products/{id}
         │ (7) GET product variants, images, custom fields
         │
         ▼
Update WordPress Post
         │
         │ (8) Update post content, meta, taxonomies
         │ (9) Download/update product images
         │ (10) Update pricing, inventory status
         │
         ▼
Clear Caches & Reindex
         │
         │ (11) Purge page cache (WP Rocket)
         │ (12) Reindex FacetWP
         │ (13) Update Algolia index
         │
         ▼
Update Complete

Data Models

WordPress Product Post Type

Post Type: bigcommerce_product
Status: publish
Post Title: Product Name from BigCommerce
Post Content: Product description (HTML)
Post Name: product-slug

Post Meta:
  - bigcommerce_id: 12345 (BC product ID)
  - bigcommerce_sku: BL-JACKET-001
  - bigcommerce_brand_id: 89
  - bigcommerce_condition: New
  - bigcommerce_price: 149.99
  - bigcommerce_sale_price: 129.99
  - bigcommerce_retail_price: 179.99
  - bigcommerce_inventory_level: 42
  - bigcommerce_inventory_tracking: variant
  - bigcommerce_availability: available
  - bigcommerce_custom_url: /scent-blocker-jacket
  - klaviyo_product_tracked: 1

Taxonomies:
  - bigcommerce_category: Jackets, Outerwear, Hunting Apparel
  - bigcommerce_brand: Blocker Outdoors
  - product_tag: scent-control, waterproof, insulated

Product Variants

// Stored in custom table: wp_bigcommerce_variants
variant_id: 67890
product_id: 12345 (post ID)
bc_variant_id: 54321 (BigCommerce variant ID)
sku: BL-JACKET-001-LG-RTE
option_values: [
  { "label": "Size", "value": "Large" },
  { "label": "Color", "value": "Realtree Edge" }
]
price: 149.99
sale_price: 129.99
inventory_level: 8

Performance Optimizations

Caching Strategy

┌─────────────────────────────────────────┐
│         Caching Layers                  │
└─────────────────────────────────────────┘

1. Browser Cache
   - Static assets (CSS, JS, images)
   - Cache-Control: max-age=31536000

2. CDN Cache (Cloudflare/CloudFront)
   - HTML pages (short TTL: 5 min)
   - Static assets (long TTL: 1 year)

3. Page Cache (WP Rocket)
   - Full page HTML
   - TTL: 10 hours
   - Preload critical pages

4. Object Cache (Redis/Memcached)
   - Database query results
   - Transients
   - Product pricing
   - TTL: 15-60 minutes

5. Opcode Cache (OPcache)
   - Compiled PHP bytecode
   - Persistent across requests

Database Optimization

-- Custom indexes for BigCommerce product queries
CREATE INDEX idx_bc_product_id ON wp_postmeta(meta_key, meta_value(20)) 
  WHERE meta_key = 'bigcommerce_id';

CREATE INDEX idx_bc_sku ON wp_postmeta(meta_key, meta_value(50)) 
  WHERE meta_key = 'bigcommerce_sku';

CREATE INDEX idx_bc_availability ON wp_postmeta(meta_key, meta_value(20)) 
  WHERE meta_key = 'bigcommerce_availability';

-- FacetWP index table
CREATE INDEX idx_facet_name ON wp_facetwp_index(facet_name);
CREATE INDEX idx_facet_value ON wp_facetwp_index(facet_value(50));

Security Architecture

Authentication & Authorization

// BigCommerce API credentials stored in wp-config.php
define( 'BIGCOMMERCE_CLIENT_ID', 'xxxxx' );
define( 'BIGCOMMERCE_CLIENT_SECRET', 'xxxxx' );
define( 'BIGCOMMERCE_ACCESS_TOKEN', 'xxxxx' );

// Webhook HMAC verification
function verify_bigcommerce_webhook( $payload, $signature ) {
    $secret = BIGCOMMERCE_CLIENT_SECRET;
    $calculated = base64_encode( hash_hmac( 'sha256', $payload, $secret, true ) );
    return hash_equals( $calculated, $signature );
}

SSL/TLS Configuration

Protocol: TLS 1.2+ only
Cipher Suites: Strong ciphers only (no RC4, MD5)
HSTS: Strict-Transport-Security header enabled
Certificate: Wildcard or multi-domain SSL

Rate Limiting

// API rate limiting for BigCommerce
function bigcommerce_api_request( $endpoint, $method = 'GET', $data = [] ) {
    // Check rate limit (150 requests per 30 seconds)
    $rate_key = 'bc_api_rate_' . get_current_user_id();
    $requests = get_transient( $rate_key ) ?: 0;
    
    if ( $requests >= 150 ) {
        return new WP_Error( 'rate_limit', 'Rate limit exceeded' );
    }
    
    set_transient( $rate_key, $requests + 1, 30 );
    
    // Make API request...
}

Monitoring & Logging

Application Monitoring

Error Tracking: Sentry or Bugsnag for PHP/JavaScript errors
Performance Monitoring: New Relic APM or Scout APM
Uptime Monitoring: Pingdom or StatusCake
Log Aggregation: CloudWatch Logs or Papertrail

Key Metrics

// Custom logging for critical events
function log_bigcommerce_sync_error( $product_id, $error ) {
    error_log( sprintf(
        '[BC Sync Error] Product ID: %d, Error: %s',
        $product_id,
        $error->get_error_message()
    ) );
    
    // Send to monitoring service
    do_action( 'bigcommerce_sync_error', $product_id, $error );
}

Scalability Considerations

Horizontal Scaling

Load balancer (ALB, Nginx) distributes traffic
Multiple WordPress application servers
Shared database (RDS, Aurora) or read replicas
Shared file storage (EFS, NFS) for uploads
Centralized session storage (Redis)

Vertical Scaling

Increase PHP memory limit: 512MB - 1GB
PHP-FPM pool optimization
MySQL query cache and buffer pool tuning
Increase web server worker processes

Content Delivery

Static assets via CDN (Cloudflare, CloudFront)
Image optimization (WebP, lazy loading)
JavaScript/CSS minification and concatenation
HTTP/2 server push for critical assets

Technology Stack​

Core Platform​

E-Commerce Backend​

Frontend Framework​

Search & Filtering​

Build System​

Architecture Patterns​

Headless Commerce Architecture​

Multi-Storefront (MSF) Architecture​

Request Flow​

Product Page Request​

Add to Cart Flow​

Checkout Flow​

Product Synchronization Flow​

Data Models​

WordPress Product Post Type​

Product Variants​

Performance Optimizations​

Caching Strategy​

Database Optimization​

Security Architecture​

Authentication & Authorization​

SSL/TLS Configuration​

Rate Limiting​

Monitoring & Logging​

Application Monitoring​

Key Metrics​

Scalability Considerations​

Horizontal Scaling​

Vertical Scaling​

Content Delivery​

Technology Stack

Core Platform

E-Commerce Backend

Frontend Framework

Search & Filtering

Build System

Architecture Patterns

Headless Commerce Architecture

Multi-Storefront (MSF) Architecture

Request Flow

Product Page Request

Add to Cart Flow

Checkout Flow

Product Synchronization Flow

Data Models

WordPress Product Post Type

Product Variants

Performance Optimizations

Caching Strategy

Database Optimization

Security Architecture

Authentication & Authorization

SSL/TLS Configuration

Rate Limiting

Monitoring & Logging

Application Monitoring

Key Metrics

Scalability Considerations

Horizontal Scaling

Vertical Scaling

Content Delivery