как реализовать галерею продуктов cloudinary в React.js

#javascript #reactjs #cloudinary

#javascript #reactjs #облачный

Вопрос:

Я пытаюсь использовать Cloudinary Product Gallery в своем проекте электронной коммерции, но понятия не имею, как это реализовать.

эта галерея продуктов Cloudinary: https://cloudinary.com/documentation/product_gallery

Я хочу реализовать это в этом компоненте.

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

1. Итак, вам нужно заставить стороннюю библиотеку управлять элементом внутри React. Это правильно?

2. @AlysonMaia не совсем, Cloudinary Product Gallery — это просто виджет для отображения коллекции изображений, и я хочу использовать этот виджет в своем компоненте, но я не знаю, как это работает с React.js .

Ответ №1:

Попробуйте это. Чтобы заставить сторонние библиотеки управлять каким-либо элементом внутри вашего компонента React, вам необходимо привязать их к методам жизненного цикла React (для функционального компонента это было бы useEffect ). Предположим, вы используете приложение Create React.

Сначала добавьте импорт скрипта в свой 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 для доступа ко всем методам, которые предоставляет вам библиотека.

1. спасибо, Элисон, я только что придумал то же решение, но вы не можете получить доступ к Cloudinary сразу, сначала вам нужно получить доступ к объекту Window, например, к Window.cloudinary.galleryWidget

2. Мне было интересно, куда я должен добавить импорт скрипта для Next.js фреймворк для доступа cloudinary.galleryWidget . Я попытался добавить его в _document.js файл, но он выдает ошибку Cannot read property 'galleryWidget' of undefined

Ответ №2:

после добавления импорта скрипта в ваш public/index.html файл, как упоминала @alyson Maya. вы можете получить доступ к своим ресурсам через Window object, и это работает просто отлично.

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