Runtime helpers

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.

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. For a product variant switch example, see Refresh widgets manually.

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.

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.`);
  }
});

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.