🚀 Enhanced Events List Widget
Displays events with intelligent caching, retry mechanisms, and performance optimization.
Shop:
Limit:
5 events
10 events
20 events
50 events
Type:
All Events
Featured Only
🔄 Reload Widget
🗑️ Clear Cache
⚡ Performance Features
Intelligent caching (5-10 min TTL)
Background cache warming
Generator-based memory optimization
Batch processing support
🔄 Loading Management
Exponential backoff retry
Timeout handling (10s default)
Error state management
Loading state indicators
🛡️ Security & CORS
Enhanced origin validation
HTTPS enforcement in production
Shopify domain verification
Request logging & monitoring
📊 Analytics
Performance metrics tracking
Usage pattern analysis
Error rate monitoring
Cache effectiveness metrics
Implementation Code:
<!-- Include enhanced widget script -->
<script src="https://spfy.eventbookings.com/widgets/events.js?shop=event-testy.myshopify.com"></script>
<!-- Add container element -->
<div id="eventbookings-events"></div>
<!-- Enhanced configuration with performance options -->
<script>
// Widget auto-initializes with enhanced loading management
new EventBookingsEventsWidget({
container: '#eventbookings-events',
shop: 'event-testy.myshopify.com',
limit: 10,
widgetType: 'all',
// Enhanced performance options
enableCache: true,
retryAttempts: 3,
timeoutDuration: 10000,
debugMode: false,
// Event callbacks
onLoadStart: function() { console.log('Widget loading started'); },
onLoadSuccess: function(data) { console.log('Widget loaded:', data); },
onLoadError: function(error) { console.log('Widget error:', error); }
});
</script>
⭐ Featured Events Widget
Shows only featured events with enhanced styling and performance optimization.
Implementation Code:
<!-- Featured widget with same performance features -->
<script src="https://spfy.eventbookings.com/widgets/featured.js?shop=event-testy.myshopify.com"></script>
<div id="eventbookings-featured"></div>
🔍 Event Details Widget
Shows detailed information for a specific event with enhanced loading management.
Event UUID:
🔍 Load Event Details
Implementation Code:
<!-- Event details with UUID parameter -->
<script src="https://spfy.eventbookings.com/widgets/event-details.js?shop=event-testy.myshopify.com&event_uuid=EVENT_UUID_HERE"></script>
<div id="eventbookings-details"></div>