Summary
To get the galleries to work you need to do the following steps:
Add script
Add gallery embed code
Script
For Cevoid galleries to load you need to add the following script to your website. The script should be placed i any of the options below. Please choose what fits your project the best.
At the end right before the closing </head> tag
Or at the bottom of the page at the end before the closing </body> tag
Add the script inside react-helmet for all pages that use the galleries.
<script type="module" src="https://gallery.cevoid.com/index.js" defer></script>
Component example
We recommend you build a component to wrap our gallery codes in. Below is a template you can copy to get started.
import React, { useEffect } from 'react'
const CevoidGallery = ({ galleryId, productId, marketId, marketCurrencyId, hidePrices, ...props }) => {
useEffect(() => {
window?.cevoid_gallery?.load()
}, [galleryId, productId, marketId, marketCurrencyId, hidePrices])
return (
<div
id="cevoid-container"
data-gallery={galleryId}
data-product={productId}
data-market={marketId}
data-market-currency={marketCurrencyId}
data-hide-prices={hidePrices}
{...props}
></div>
)
}
export default CevoidGallery
Note that there's a window object called cevoid_gallery that you can call load() from to refresh the galleries.
Explanation data values
data-gallery is the ID of the gallery
data-product can either be set to auto or a unique identifier like id or SKU. This identifier depends on what value you use in our feeds. Setting this value to "auto" will try to find the correct product to use based on the current URL.
data-market is an optional value so that you can programatically set which market the gallery should load. The input is the MARKET_ID found under "Products and markets" in Cevoid.
data-market-currency is also an optional value and can be used to programatically overwrite the currency to currency from another market. This value is used in combination with data-market and not alone.
data-hide-prices Is used to hide the prices all together. Setting this value to true will hide all prices for the gallery
For a more detailed explanation of data-market parameters: Read this tutorial
Product page gallery
For product page galleries, remember to add a key value to the component so that it refreshes if the id changes. For example:
key={`cevoid-gallery-${product_id}`}
You can also replace the data-product value from a product_id to "auto". Cevoid will then automatically fetch the correct product by using the slug in the url.
Where do I find the embed code / gallery id?
Visit the Gallery page in the Cevoid platform and press any gallery you want to display on your website.
Press the "Embed Gallery" button (See image below)
Copy the code from the modal.
