Findings — Research Summary

Events Page Research Findings

Date: 2026-03-16

Summary

The AlMaghrib mega menu is a React app (wp-plugin-megamenu on GitHub) that fetches all event data client-side from a single public API endpoint on the Laravel backend (api2.almaghrib on Bitbucket).

The API Endpoint

GET https://api2.almaghrib.org/v1/wp/mega-menu-events (public, no auth required)

Response Structure

{
  "onsite": {
    "weekend_seminars": { "upcoming": [...] },
    "ilmfests": { "upcoming": [...] },
    "ilmnights": { "upcoming": [...] },
    "community_events": { "upcoming": [...] }
  },
  "online": {
    "fall_semester": { "upcoming": [...] },
    "on_demand": { "upcoming": [...] },
    "mentorship": { "upcoming": [...] },
    "faith_essesntials": { "upcoming": [...], "plan": {...} }
  },
  "kids": {
    "ilmspring": { "upcoming": [...], "previous": [...] }
  },
  "travel": {
    "blessed_voyage": { "upcoming": [...], "planned": [...] }
  }
}

Per-Event Fields

• event_id, heading, sub_heading
• instructors (array of {name, avatar})
• city, country, continent, qabeelah
• datetime_start, datetime_end, schedule_tz
• credits, code, description
• price (currency-aware, multi-tier: standard/early/special)
• image (poster format, 250x375px — hosted on public.assets.almaghrib.org/titles/{id}/img/poster_250x375.jpg)
• image_bg (wide background, 960x600px — hosted on public.assets.almaghrib.org/titles/{id}/img/bg_960x600.jpg)
• introductory_video (for online/on-demand events)
• event_attendees, total_attendees
• product_id, product_title
• event_schedule_venue, site_url, slug
• distance (from user's geo-located IP)
• closest_sequence_number, closest_global_order, closest_group_order

Additional Endpoints

• GET /v1/wp/upcoming-events — all upcoming events combined
• GET /v1/wp/upcoming-events-byproduct?productIds=[...] — by product IDs
• GET /v1/wp/upcoming-events-by-timeframe?fromDate=&toDate= — by date range
• GET /v1/wp/get-continents — all continents

Backend (Laravel — api2.almaghrib on Bitbucket)

Controller: WpPluginController.php — getMegaMenuEvents()

Data Flow

1. GeoIP detects user's lat/lon from IP (via Request-IP-Address header)
2. getNearbyQabail() ranks cities by distance (Haversine formula)
3. Products grouped by ID → event types:
   • weekend_seminars = [1, 2, 8]
   • ilmfest = [3], ilmnight = [5], community_event = [21]
   • virtual = [11, 13], online/on-demand = [10]
   • mentorship = [15, 17], ilmspring/kids = [18]
4. Model chain: Product → Course → Event with eager loading
5. Events sorted by distance first, then start date

Key Models

• Event.php, Product.php, Course.php
• StaticEvent.php (travel events)
• Qabeelah/ (locations with lat/lng)
• EventSchedule.php, EventDetail.php

Frontend (React — wp-plugin-megamenu on GitHub)

Repo: almaghrib-engineering/wp-plugin-megamenu

Architecture

• WordPress plugin renders <div id="megamenu-root"> via shortcode
• React (Vite + Tailwind) app mounts on that div
• Client-side only — NO server-side rendering or PHP event handling

Key Files

• src/api/megaMenuApi.js — API calls (fetches mega-menu-events + geo IP)
• src/hooks/useMegaMenuEvents.js — React hook, calls API on mount
• src/utils/getEventsForTab.js — maps API data to tabs
• src/config/sectionConfigs.js — tab definitions (In Person, Online, Travel)
• src/components/common/Calendar/ — calendar view with continent filtering

Current Live Data (as of 2026-03-16)

Continents with Events

• North America: Ottawa, Boston, Calgary, Charlotte, Dallas, Houston, Memphis, Minneapolis, Mississauga, New Jersey, NYC, Orlando, Raleigh, Seattle, Washington DC, Bay Area
• Europe: Birmingham, London, Manchester

Key Finding: We CAN Reuse the API

The mega-menu-events endpoint is public and returns all the data needed for a standalone events page:

• Full event details (title, description, instructor, dates, pricing, venue)
• Location data with continent/city for filtering
• Already sorted by proximity to user
• Includes registration counts and credit information

Images are fully available — two sizes per event (poster 250x375 and background 960x600) plus instructor avatars, all on public CDN URLs. Note: some instructor avatars use a default placeholder.

No new backend work needed — the existing API provides everything.