how to implement cloudinary Product Gallery in React.js

4
votes

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>;
    }
  }
2
javascriptreactjscloudinary
So you need to make a third-party lib control an element inside React. Is that right? – Alyson Maia
@AlysonMaia not exactly, Cloudinary Product Gallery is just a widget for displaying a collection of images, and I wanna use that widget in my component but I don't know how that works with React.js. – Hawre Kamal

2 Answers

2
votes

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.

0
votes

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>;
  }
}