I am trying to use Cloudinary Product Gallery in my eCommerce project, but no idea how to implement it.
this Cloudinary Product Gallery: https://cloudinary.com/documentation/product_gallery
I want to implement it in this component.
class FullProduct extends Component {
render() {
return <div id="my-gallery"></div>;
}
}
Try this. For making third-party libs control some element inside your React component you need to bind them to React lifecycle methods (for a function component it would be useEffect). Supposing you are using Create React App.
First, add the script import in your public/index.html file.
<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>
With function components would be something like this:
const FullProduct = () => {
const cloudnaryGalleryRef = useRef(null);
useEffect(() => {
if (!cloudnaryGalleryRef.current) {
cloudnaryGalleryRef.current = cloudinary.galleryWidget({
container: '#my-gallery',
cloudName: 'demo',
mediaAssets: [
{ tag: 'electric_car_product_gallery_demo' },
{ tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
{ tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' }
]
});
}
}, []);
return <div id="my-gallery" />;
};
And then you can use cloudnaryGalleryRef.current to access all the methods the lib gives you.
after adding script import in your public/index.html file as @alyson Maya mentioned. you can access your resources through Window object, and this works just fine.
class FullProduct extends Component {
componentDidMount() {
const myWidget = window.cloudinary.galleryWidget({
cloudName: "cloudName",
container: "#my-gallery",
mediaAssets: [
{
publicId: "products/excmml5kpl",
mediaType: "image"
},
{
publicId: "products/fl7t8wqkytac7",
mediaType: "image"
}
],
displayProps: {
mode: "classic"
},
transition: "slide",
themeProps: {
active: "#49c58f"
},
aspectRatio: "square",
zoomProps: {
trigger: "click"
},
carouselLocation: "left",
carouselStyle: "indicators",
indicatorProps: {
shape: "round"
}
});
myWidget.render();
}
render() {
return <div id="my-gallery" className={classes.Gallery}></div>;
}
}