-
3
Опис файлу
Нова версія
Модуль вирішує проблему тривалого завантаження iframe з youtube та збільшує page speed. Дозволяє додавати відео youtube та vimeo у полях описів сторінок, додавати відео шорткордами, збирати відео у галерею на сторінці товару, відображати відео у popup
Для РФ і РБ модуль не продається і підтримка не надається.
Всі вставки iframe з відео на вашому сайті перед виведенням на сторінку будуть автоматично замінені на прев'ю відео у вигляді зображень, які підтягуються з img.youtube.com/vi.
Увага! Модулю все одно, яким чином у вас реалізований виведення відео (через додаткові поля, опис товару, додаткові вкладки або прямо у файлі), він збирає кінцевий код iframe і замінює на свій при рендерингу сторінки системою opencart. Весь ваш функціонал залишається на місці і відео додаєте на сайт як і раніше. У будь-який момент модуль можна вимкнути.
НАВІЩО
Всі знають, що iframe з відео дуже завантажують сторінку і зменшують швидкість завантаження сайту. Особливо це відчутно (і навіть візуально видно), якщо на сторінці багато відео (кожен iframe це додаткові запити і ресурси). Бонус - галерея відео та зручне додавання відео на сайт
МОЖЛИВОСТІ
- підтримка youtube, youtube shorts, vimeo
- зручна вставка відео шорткодами
- відео по кліку на прев'ю
- спливаюче вікно з відео по кліку на прев'ю
- своє зображення для прев'ю
- вибір розміру прев'ю
- налаштування іконки 'play' (зображення, font awesome, html) та стилізація
- збирання відео у галерею на основі доданих iframe та шорткодів у описі товару
- вибір позиції галереї та її стилізація
- іконка відео у категорії
- іконка відео у товарі (як опція відкриття галереї по кліку)
- 2 режими роботи галереї
- можливо вказати шляхи для виключення роботи модуля
- поля для кастомних стилів та js
ОСОБЛИВОСТІ
- буде працювати на всіх шаблонах та усіх сторінках
- максимально легкий модуль без залежностей (всього пару рядків css і ванільного js, жодних бібліотек)
- буде працювати навіть без бутстрапу та jquery
- відкритий код
- повна версія 2.0 лише для opencart/ocstore 2.2+, для старіших - версія 1
ДЕМО
Адмінка https://oc3.likedev.pro/admin/ логін/пароль: demo/demo
товар https://oc3.likedev.pro/imac
стаття https://oc3.likedev.pro/6-video
ЗАСТОСУВАННЯ
- збільшення швидкості завантаження і в результаті кращий показник page speed
- зручне додавання відео на сайт
- кастомизація зовнішнього вигляду відео прев'ю
- організація галереї відео у картці товару без ризику для швидкості сайту
- виведення відео у popup дозволити показувати ваші iframe навіть на обмеженому просторі
- підміна прев'ю на свої дозволить поставити потрібні вам зображення для відео та прикрасити сайт
Щоб не було чорних смуг, можна поставити заставки до відео на каналі youtube або завантажити свої в папку модуля.
6 відео - різниця 30-50%
Модуль вимкнено:
https://oc23.likedev.pro/6-video?disable-video-optim
і page speed 49/33 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F6-video%3Fdisable-video-optim&tab=mobile
Модуль увімкнений
https://oc23.likedev.pro/6-video
і page speed 92/75 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F6-video
Сторінка та сама, тільки в першому випадку доданий параметр ?disable-video-optim щоб модуль не спрацьовував і можна було побачити різницю.
1 відео - різниця 10-30%
І навіть з 1 відео показник досить просідає, особливо для мобільних пристроїв
Модуль вимкнений:
https://oc23.likedev.pro/1-video?disable-video-optim
і page speed 88/51 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F1-video%3Fdisable-video-optim&tab=desktop
Модуль увімкнений:
https://oc23.likedev.pro/1-video
і page speed 96/80 - https://developers.google.com/speed/pagespeed/insights/?hl=uk&url=https%3A%2F%2Foc23.likedev.pro%2F1-video&tab=mobile
Крім того візуально набагато симпатичніше прев'ю з іконкою, ніж ютубовський iframe, та й можливість відкриття відео в popup теж дуже корисна. + ми можемо через css стилі кастомізувати прев'ю як нам завгодно.
ВАЖЛИВО! Рекомендую використовувати режим POPUP для кращої сумісності з шаблонами, розміткою та адаптивністю відео.
ВСТАНОВЛЕННЯ
відео вставновлення
(Тільки тут фікс не потрібен, інше - так само)
Через установник в адмінці завантажуєте архів модуля ocmod для своєї версії опенкарт.
Для версій 2.x переконайтеся, що у вас вже встановлено модифікатор localcopy. ocmod, якщо його немає – встановіть.
PS. Для редактора CKeditor при вставці в режимі коду деяких тегів, у тому числі iframe, редактор їх чистить. У такому випадку робимо фікс:
в admin\view\javascript\ckeditor\config. js
після рядка
config. resize_enabled = false;
прописати
config. allowedContent = true;
Важливо: При використанні версії 2.0 модуля та модуля Accordion & Tabs переконайтеся, що Accordion & Tabs у вас версії 2.1.1, де випралена проблема сумісної роботи цих модулів.
ОНОВЛЕННЯ до версії 2.0:
1. Видалити модифікатор старої версії модуля Youtube lazy load and popup
2. Оновити модифікатори
3. Встановити архів нової версії як звичайне доповнення через установщик
4. У списку розширень видалити модуль та встановити заново
ЛІЦЕНЗІЯ
Ліцензія видається на один домен. Також при необхідності на тестовий піддомен.
Ключ буде надіслано автоматично на пошту покупця одразу після вашого замовлення. Якщо з якоїсь причини листа немає - пишіть на пошту чи лс.
ПРОХАННЯ ВКАЗАТИ ДОМЕН ВІДРАЗУ ПРИ КУПІВЛІ
Також дивіться модулі:
Accordion & Tabs & Steps v2 - конструктор контенту
Smart Video Widgets - відео в фоні, банера, зображення, сповіщення з налаштуванням умов показу
Google Reviews - відгуки з гугл карт (Google Business) з віджетом довіри + відгуки про товари
Grapes Web Builder - більше ніж візуальний редактор
