Skip to main content
Use runtime helpers when your storefront changes widget containers after the initial page load, or when your code needs to react to widget load state.

​
Refresh widgets on dynamic pages

The script mounts widgets when it loads. If your site adds or changes Cevoid containers after the initial page load, call window.cevoid.reloadAll() after updating the DOM. 
if (window.cevoid?.reloadAll) {
  window.cevoid.reloadAll();
}
Use this for single-page apps, AJAX-loaded sections, product variant changes, and CMS tabs that reveal widget containers after load.

​
Check widget load state

Cevoid exposes gallery and card load state on window.cevoid. 
const galleryId = "GALLERY_ID";

if (window.cevoid?.galleries?.[galleryId]?.hasContent) {
  console.log("Gallery has content.");
} else {
  console.log("Gallery has not loaded or has no content.");
}
Cards use the same pattern under window.cevoid.cards. 
const cardId = "CARD_ID";

if (window.cevoid?.cards?.[cardId]?.hasContent) {
  console.log("Card has content.");
}
This is useful when you want to hide a section if a dynamic gallery has no posts.

​
Listen for widget load events

Use widget load events when your code needs to react as soon as a gallery or card finishes loading. 
window.addEventListener("cevoid-gallery-loaded", (event) => {
  const galleryId = event.detail.gallery;
  const numberOfPosts = event.detail.numberOfPosts;

  if (numberOfPosts > 0) {
    console.log(`Gallery ${galleryId} has content.`);
  } else {
    console.log(`Gallery ${galleryId} has no content.`);
  }
});

​
Card loaded

window.addEventListener("cevoid-card-loaded", (event) => {
  const cardId = event.detail.card;

  console.log(`Card ${cardId} has loaded.`);
});
Set up event listeners before loading dynamic widgets when possible, especially if your script needs to react to the first widget load.