Skip to main content

Sites (Control Panel)

The Sites page is the main dashboard for GSM Middleware. It displays all configured e-commerce sites and provides tools for managing site configurations, testing connections, and monitoring sync status.

Overview​

Navigate to GSM Middleware → Sites (formerly "Control Panel") to access the main dashboard.

Key Features:

  • View all configured BigCommerce and WooCommerce sites
  • Add, edit, and delete site configurations
  • Test API connections
  • Toggle sites active/inactive
  • View site statistics and health status
  • Trigger manual sync operations

Permission Required: manage_gsm_middleware

Dashboard Layout​

Active Environment Badge​

The page header displays the currently active database environment (e.g., "Live", "Beta", "Dev", "Local") as a colored badge, so you always know which database you're working with.

Statistics Bar​

The StatsBar component shows system-wide metrics:

  • Total Sites — Number of configured sites
  • Active Sites — Sites currently enabled for sync
  • Pending Orders — Orders waiting for Business Central export

Site Table​

The main table lists all sites with the following columns:

ColumnDescription
Site NameDisplay name of the store
PlatformBigCommerce or WooCommerce icon/label
StatusActive (green) or Inactive (gray) toggle
ActionsEdit, Test Connection, Delete

Managing Sites​

Adding a New Site​

  1. Click Add Site button
  2. Fill in site details in the modal:
    • Name — Display name for the site
    • Platform — BigCommerce or WooCommerce
    • Site URL — Store URL
    • API Credentials — Platform-specific API keys/tokens
  3. Configure sync tabs (see Sync Tabs)
  4. Click Test Connection to verify credentials
  5. Click Save to add the site

Editing a Site​

  1. Click Edit on the site row
  2. The SiteFormModal opens with tabbed configuration:
    • Order Sync — Enable toggle, health check URL
    • Inventory Sync — Enable toggle, health URL, webhook secret (BigCommerce)
    • Tracking Sync — Enable toggle, health URL
    • BazaarVoice — Enable toggle, SFTP credentials
    • Kit Builder — Enable toggle (BigCommerce only)
  3. Modify settings as needed
  4. Click Save to apply changes

Toggling Active Status​

Click the status toggle to enable or disable a site. Inactive sites are excluded from all sync operations and crontab generation.

Deleting a Site​

Click Delete and confirm. This removes the site configuration from the database. Associated order and item data in the tasks database is not deleted.

Testing Connections​

Click Test Connection to verify that the site's API credentials are valid and the store is reachable. Results appear inline with success/failure indicators.

React Architecture​

The Sites page is a React application rendered into #gsm-middleware-root:

  • Entry point: assets/js/index.js → build/index.js
  • Root component: App.jsx
  • Key components:
    • SiteTable.jsx — Site list with actions
    • SiteRow.jsx — Individual site row
    • SiteFormModal.jsx — Add/edit modal with tabbed sync config
    • StatsBar.jsx — Dashboard statistics

Uses @wordpress/components for UI consistency (Modal, Button, Notice, TabPanel, ToggleControl, TextControl).