The product page gallery dynamically changes the content for each product page to show relevant posts for each product page. This means that you can use the same gallery on all product pages and let the gallery change content automatically.
For this, our default implementation uses the data-product="auto" tag on the div. If the value is set to auto we check the url and what product is being browsed on the website and match it with the product catalogue for the different markets.
<div id="cevoid-container" data-gallery="GALLERY_ID" data-product="auto" ></div>
If you want to you can replace the auto value with the actual product ID and the gallery will fetch images and videos based on that ID.
For example: data-product="21425218"
Content fallback (if no content exists)
The product page gallery also has specific fallback settings in the Cevoid platform if the specific product does not have any posts to display. So you don’t need to build any logic for this on your end.
If you wish to hide the entire section programatically if not content exists follow the next step of this tutorial.
Hiding gallery if no content exists.
In some cases you might not want to use the fallback setting to fill galleries without relevant content. In these cases you can use helper functions check if galleries have content or not. Depending on the result you decide what to do programatically.
Whenever the our script has been loaded it will add a window object window.cevoid
that can be accessed client side and contains information about the galleries/cards on the page, if they have loaded and if it has content or not. See example below.
{
"galleries": [{
"GALLERY_ID": {
"hasContent": true
}
}]
}
If this is not enough you can also set up event listeners for events we dispatch when a gallery or card. These events are registered like below.
// When a gallery has loaded
window.dispatchEvent(
new CustomEvent('cevoid-gallery-loaded', {
detail: {
gallery: shortId,
numberOfPosts: data.posts.count
}
})
)
// When a card has loaded
window.dispatchEvent(
new CustomEvent('cevoid-card-loaded', {
detail: {
card: cardId
}
})
)
Simply set up an event listener for the CustomEvents and execute your desired code.