如何在 React.js 中实现 cloudinary Product Gallery

Question

我正在尝试在我的电子商务项目中使用 Cloudinary Product Gallery，但不知道如何实现它。

此 Cloudinary 产品库：https://cloudinary.com/documentation/product_gallery

我想在这个组件中实现。

    class FullProduct extends Component {
      render() {
       return <div id="my-gallery"></div>;
    }
  }

Answer 1

试试这个。为了让第三方库控制 React 组件中的某些元素，您需要将它们绑定到 React lifecycle methods（对于函数组件，它将是 useEffect）。假设您正在使用 Create React App.

首先，在您的 public/index.html 文件中添加脚本导入。

<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>

使用函数组件会是这样的：

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

然后您可以使用 cloudnaryGalleryRef.current 访问库为您提供的所有方法。

Answer 2

在您的 public/index.html 文件中添加脚本导入后，如@alyson Maya 所述。您可以通过 Window 对象访问您的资源，这工作得很好。

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

如何在 React.js 中实现 cloudinary Product Gallery

how to implement cloudinary Product Gallery in React.js

javascript

reactjs

cloudinary