Refresh widgets manually

Use window.cevoid.reloadAll() when your website updates content without a full page refresh:

• Single-page applications (React, Vue, etc.) that dynamically load content
• Product variant switching on product pages without page reload
• Dynamic filtering or tab switching that changes which gallery should display
• AJAX-loaded content where galleries appear after the initial page load

Always check if the Cevoid script is loaded before calling the method:

if (window.cevoid?.reloadAll) {
  window.cevoid.reloadAll();
}

// When user selects a different product variant
document.getElementById('variant-selector').addEventListener('change', (e) => {
  const newProductId = e.target.value;

  // Update the gallery container's data attribute
  const container = document.getElementById('cevoid-container');
  container.dataset.product = newProductId;

  // Trigger gallery reload with new product filter
  if (window.cevoid?.reloadAll) {
    window.cevoid.reloadAll();
  }
});

When you call reloadAll():

1. All galleries and cards re-fetch data from the API with the current data attributes as filters.
2. Analytics events fire again: widget.load for every widget and widget.view for every widget in view. Avoid calling this method excessively to prevent duplicate analytics.

• Always check if window.cevoid exists before calling methods to prevent errors.
• Update data attributes first, then call reloadAll() to apply new filters.
• Repeated calls do not duplicate widgets: each call removes the widget from every Cevoid container before it renders it again.
• Check gallery status once the gallery has loaded again, for example in a cevoid-gallery-loaded listener (see Runtime helpers):

const hasContent = window.cevoid?.galleries?.['your-gallery-id']?.hasContent;