Здравствуйте!
Необходимо сделать доработку функционала сайта, чтобы было возможно добавлять видео с сервисов 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
Бюджет обсуждается в личных сообщениях.
