Skip to main content

Platform Architecture

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

Technology Stack​

Core Platform​

  • WordPress: 6.7.2
  • PHP: 7.4+ (Optimal: 8.0+)
  • MySQL: 5.6+ or MariaDB 10.1+
  • Web Server: Apache/Nginx with SSL/TLS

E-Commerce Backend​

  • BigCommerce: Headless commerce platform
  • BigCommerce for WordPress (Suma): v5.0.7.18
  • GraphQL: Product variant queries
  • REST API: Cart and checkout operations

Frontend Framework​

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

Search & Filtering​

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

Build System​

  • Laravel Mix: v6.0.39 - Asset compilation
  • Preact: v10.11.0 - Lightweight React alternative
  • Tailwind CSS: v3.0.11 - Utility-first CSS framework
  • Sass: SCSS compilation

Architecture Patterns​

Headless Commerce Architecture​

┌─────────────────────────────────────────────────────────────┐
│                    StealthCam Architecture                   │
└─────────────────────────────────────────────────────────────┘

┌──────────────────┐          ┌──────────────────┐
│   BigCommerce    │          │    WordPress     │
│   (Backend)      │◄────────►│   (Frontend)     │
│                  │   API    │                  │
│ • Product Catalog│          │ • Content Mgmt   │
│ • Inventory      │          │ • Templates      │
│ • Pricing        │          │ • SEO            │
│ • Cart           │          │ • Media          │
│ • Checkout       │          │ • URL Routing    │
│ • Orders         │          │                  │
│ • Customers      │          │                  │
└──────────────────┘          └──────────────────┘
         │                             │
         │                             ├──► Elementor Page Builder
         │                             ├──► FacetWP (Product Filtering)
         │                             ├──► Algolia (Search Index)
         │                             ├──► Klaviyo (Marketing Events)
         │                             └──► BazaarVoice (Review Display)
         │
         └─────► Webhooks
                 • Product Updates
                 • Inventory Changes
                 • Order Events

Request Flow​

Product Page Request​

1. User visits /product/trail-camera-x
2. WordPress routes to single-bigcommerce_product.php
3. Template queries WordPress post (synced from BigCommerce)
4. Elementor renders page with custom widgets
5. JavaScript loads:
   - Real-time pricing (optional, via REST API)
   - Cart widget
   - Review widgets (BazaarVoice)
   - Variant selector
6. User interactions (add to cart) communicate with BigCommerce API

Add to Cart Flow​

1. User clicks "Add to Cart" button
2. JavaScript makes REST API call to BigCommerce
3. BigCommerce creates/updates cart session
4. Cart ID stored in browser cookie/localStorage
5. Cart widget updates with new item count
6. Cart drawer displays updated items

Checkout Flow​

1. User clicks "Checkout" from cart
2. WordPress redirects to BigCommerce embedded checkout
3. BigCommerce hosted checkout page loads
4. User completes payment
5. BigCommerce webhook fires to WordPress
6. Order confirmation page displays

Data Synchronization​

Product Import Process​

BigCommerce API
    ↓
WordPress Cron Job (configurable schedule)
    ↓
BigCommerce for WordPress Plugin
    ↓
Creates/Updates WordPress Posts
    - Post Type: bigcommerce_product
    - Taxonomies: bigcommerce_brand, bigcommerce_category
    - Meta: Price, SKU, inventory, custom fields
    - Images: Featured + gallery
    ↓
Post Save Triggers:
    - Algolia re-index
    - FacetWP index update
    - BazaarVoice product feed regeneration

Sync Options (Suma Customizations)​

  • Bi-directional sync control: Disable WordPress → BigCommerce updates
  • Import mode: Fast Headless (minimal data) or Full (all attributes)
  • Image handling: URL reference or full import
  • Pricing: Real-time API or cached in post meta
  • Channel-aware: Multi-Storefront (MSF) support

Search Architecture​

Dual Search System​

┌─────────────────────────────────────────────────────────┐
│                   Search Strategy                        │
├─────────────────────────────────────────────────────────┤
│                                                          │
│  FacetWP (Category/Archive Pages)                       │
│  • Faceted filtering (categories, brands, price)        │
│  • Ajax refresh                                          │
│  • URL state management                                  │
│  • Range sliders                                         │
│                                                          │
│  Algolia (Global Search)                                 │
│  • Instant search with autocomplete                      │
│  • Typo tolerance                                        │
│  • Custom ranking algorithm                              │
│  • Variant SKU search                                    │
│                                                          │
└─────────────────────────────────────────────────────────┘

Index Structure​

FacetWP Indexes:

  • BigCommerce product attributes
  • Price (calculated, retail, sale)
  • Categories and brands
  • Inventory status
  • Custom fields

Algolia Indexes:

  • Product title, description, SKU
  • Variant data
  • Categories (hierarchical)
  • Images, prices
  • Stock status
  • Custom attributes

Integration Points​

BigCommerce Webhooks​

Configured webhooks for real-time updates:

  • store/product/* - Product changes
  • store/product/inventory/updated - Stock changes
  • store/order/* - Order events
  • store/cart/abandoned - Cart abandonment (for Klaviyo)

Marketing Integration Points​

Klaviyo Event Tracking:

// Product View
klaviyo.push(['track', 'Viewed Product', {
  ProductName: 'Trail Camera X',
  ProductID: '12345',
  SKU: 'TC-X-001',
  Price: 199.99
}]);

// Add to Cart
klaviyo.push(['track', 'Added to Cart', {
  ProductName: 'Trail Camera X',
  ProductID: '12345',
  Quantity: 1
}]);

Google Tag Manager Data Layer:

dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'add': {
      'products': [{
        'name': 'Trail Camera X',
        'id': '12345',
        'price': '199.99',
        'brand': 'StealthCam',
        'category': 'Trail Cameras',
        'quantity': 1
      }]
    }
  }
});

Security Architecture​

Authentication Layers:

  • WordPress user authentication (wp-login.php or custom URL)
  • Two-factor authentication (WP 2FA plugin)
  • BigCommerce customer accounts (separate from WP users)
  • API authentication (OAuth for BigCommerce API)

Security Headers:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Content-Security-Policy: [configured policy]
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: [configured permissions]

Performance Optimization​

Caching Strategy​

  1. WP Rocket: Full-page caching with exclusions for cart/checkout
  2. Object Caching: Redis/Memcached for database queries
  3. CDN: CloudFlare/Fastly for static assets
  4. Browser Caching: Long expiration for images/CSS/JS
  5. FacetWP Cache: Query result caching

Asset Optimization​

  • Image Optimization: WP Smush Pro (lossy compression, WebP)
  • JavaScript: Minification, concatenation, deferred loading
  • CSS: Critical CSS inline, deferred non-critical
  • Lazy Loading: Images below fold (lazysizes.js)

Database Optimization​

  • Product Data: Cached in post meta (optional real-time pricing)
  • Transients: Short-lived cache for API responses
  • Index Strategy: Optimized indexes for FacetWP queries

Scalability Considerations​

Horizontal Scaling​

  • Load Balancing: Multiple WordPress instances
  • Database: Read replicas for high traffic
  • Object Cache: Shared Redis/Memcached cluster
  • Media: CDN distribution

BigCommerce Limits​

  • API Rate Limits: 20,000 requests/hour (managed by plugin)
  • Webhooks: Retry logic for failed deliveries
  • Product Import: Batched imports to avoid timeouts

Monitoring & Logging​

Application Monitoring​

  • WP Activity Log: User actions, content changes
  • BigCommerce Plugin Logging: Import errors, sync issues
  • PHP Error Log: Server-side errors
  • JavaScript Console: Client-side errors (production monitoring)

Performance Monitoring​

  • New Relic / Application Performance Monitoring
  • Server Metrics: CPU, memory, disk I/O
  • Database Queries: Slow query log
  • API Response Times: BigCommerce API latency

Disaster Recovery​

Backup Strategy​

  • Database Backups: Daily automated backups
  • File Backups: wp-content/ directory
  • BigCommerce: Native backup (product data stored in BC)
  • Recovery Point Objective (RPO): 24 hours
  • Recovery Time Objective (RTO): 4 hours

Rollback Procedures​

  • Code Deployment: Version control with rollback capability
  • Database: Point-in-time restore
  • Plugin Updates: Staged on development/staging before production