Добавить видео на странице товара OpenCart 3 с Vimeo и YouTube

Здравствуйте!

Необходимо сделать доработку функционала сайта, чтобы было возможно добавлять видео с сервисов Vimeo и YouTube в карточку товара.  Движок сайта OpenCart 3 (ocStrore 3.0.3.7)

Необходимый функционал:

1. Чтобы добавить видео достаточно зайти в админку в редактирование карточки товара, где будет вкладка Видео на которой достаточно вставить ссылку на ролик.

Для вставки видео с YouTube cсылка будет иметь вид (пример):

https://www.youtube.com/watch?v=GZeYsVjVQSM

Для вставки видео с Vimeo cсылка будет иметь вид (пример):

https://vimeo.com/354633934

Выглядеть это должно примерно вот так:



Добавление видео происходит путем нажатия кнопки Добавить (+).  Появляется поле для ввода ссылки на видео, вводим ссылку, подгружает превью для видеоролика. Можно добавить неограниченное кол-во роликов. Но по опыту будет от 1 до 3-х. Для видеороликов можно задавать сортировку, какое идет первое, а какое идет второе.

2. Добавить все загруженные к товару видео в галерею на сайте, чтобы отображались после изображений. Также после слайдера галереи будет идти кнопка Видео, при клике на которую будет открываться вкладка Видео. Будет выглядеть вот так (В примере у товара 3 фото, а потом идет 1 видео):


3. В карточке товара на сайте будет отображаться вкладка Видео на которой будут отображаться все видео, которые добавлены к товару. И будет указываться кол-во видео (в данном примере 2).

4. При клике на видео в галерее отображается полноэкранный режим и подгружается превью видеоролика. При клике на превью уже начинаем показ ролика.


Более детально отобразил на видео:

https://www.loom.com/share/2a8ddfcda4764e048cea89f17aa8744c

А также можно глянуть пример, как нужно сделать, на этом сайте:

https://comfy.ua/smartfon-samsung-galaxy-s21fe-8-256gb-light-violet-sm-g990blvgsek.html

5. В каталоге товаров, если у товара есть видео, то отображаем иконку. Изначально она серая, а при наведении на карточку товара, становиться красной. Вот так:

6. Сайт адаптивный, потому на мобильных устройствах видео в карточке товара будет выглядеть так (не отображаем иконку Видео, а видео в галереи идут после фото, как и на декстопной версии).

7. В реализации должно быть учтено то чтобы это не влияло на скорость загрузки страницы товара. Особенно важны показатели google pagespeed.

Все знают, что iframe с видео очень сильно загружают страницу и уменьшают скорость загрузки сайта. Особенно это ощутимо (и даже визуально видно), если на странице несколько видео (каждый iframe это доп. запросы и ресурсы).

Важно чтобы все вставки iframe с видео в карточке товара на сайте перед выводом на страницу автоматически были заменены на превью видео в виде изображений, которые подтягиваются с youtube или заданы вручную.

8.  На странице товара, куда добавлено видео выводить микроразметку к видео.
Формат:

Справка Google:
https://developers.google.com/search/docs/advanced/structured-data/video?hl=ru

Пример приложил в .jpg файле

Где

name  - Название видео

description - Описание видео

thumbnailUrl - превью для видео, которое мы будем брать из админки. Если в админке нет,  то берем с ютуба.

uploadDate - дата загрузки видео

duration - продолжительность

contentUrl - ссылка на видео

embedUrl - ссылка на видео


9. Сайт закрыт от поисковых систем, на период переноса данных и технических работ, чтобы поисковые роботы его не индексировали. Для работ я готов открывать доступ по IP адресу. Обычно IP адрес динамический, может меняться раз в сутки. Это не проблема, открываю доступ при смене.

Сайт использует тему ReMarket:

https://re-market.octemplates.net/apple-ru-3/iphone-ru/smartfon-apple-iphone-xi-violet-ru

Ссылку на сайт могу скинуть в личном сообщении. Предоставляются все необходимые иконки.

От себя могу добавить, что уже существуют скрипты, позволяющие получать от Vimeo и YouTube (имея ссылку на ролик) превью и все необходимые данные. Как пример вот ссылки на такие php скрипты:

https://shra.ru/2019/08/poluchenie-prevyu-kartinki-vimeo/

https://gist.github.com/cmsx/5539570

Бюджет обсуждается в личных сообщениях.