Написать JavaScript-виджет для последующего размещения на сайтах
1 руб. за проект
Приветствую Ребят для оценки работы предлагаю пример стартовых задач, далее тз по запросу если есть понимание что сможете разобраться.
ТЗ Кратко
Повторяем getreview.ru . Если не хватает инфо, смотри как сделано у них
JTBD
С нашим продуктом клиент сможет:
- Показать виджет на своем сайте
- Настроить виджет: видео, цвет, действия
- Оценить профит, посмотреть аналитику
Для MVP делаем 1 и 2.
Js-код виджета Как работает – посмотреть getreview.ru. Используем это как реф
Задача Написать js-код, который можно добавить на существующую страницу и тогда на этой странице будет отображаться виджет, который описан на сайте getreview.ru
Этот код может обращаться к серверу, запрашивать другие js
Основные моменты
- окно виджета идет поверх страницы
- привязано к левому нижнему углу браузера, остается там при resize
- сразу крутит видео, зациклено, без звука
- использует файл mp4, на нашем хостинге
- при наведении мыши виджет реагирует (см реф)
- при клике на виджет – окно становится больше, видео крутится со звуком. Через n секунд появляется текст-ссылка поверх ролика
- при клике на "X", исчезает
- отправляет события на наш сервак
- http get запрос на uri=widgetEvent . В параметрах передает event и widgetId. Например: http://mysite.com/widgetEvent?event=show&widgetId=...
- ролик показан, event=show
- на ролик кликнули, event=open
- ролик со звуком дошел до середины, event=middle
- ролик со звуком дошел до конца, event=finish
- кликнули на целевую ссылку, event=submit
Орг.подготовка
- со своей стороны я подготовлю
- файл mp4 длиной 5 секунд, расположен на моем хостинге
- rest-поинт для событий, крутится на моем хостинге
- id для виджета, придумаю число 64 бит
- 2 html-страницы, на моем сайте
- передаю инфо
- ссылка на файл mp4
- ссылка на rest-поинт
- желаемый id
- текст кнопки и ссылка куда перейти
- получаю
- текст js-кода, который следует вставить на моих страницах
- js-файлы, которые нужно расположить у меня на сервере
- добавляю js-код на страницы
- тестируем, что виджет работает - проверяем пункты из части "основные моменты"
- Открываю страницу
- → виджет показан, крутится без звука
- Навожу мышь поверх виджета
- → виджет отреагировал: увеличился на 10%, поменял цвет рамки, появился крестик
- Кликаю на виджет
- → виджет увеличился в 2 раза, появился звук
- повторно кликаю на виджет
- → видео встало на паузу
- еще раз кликаю на виджет
- → видео продолжилось
- → через 5 секунд появилась кнопка поверх виджета
- → текст кнопки равен тому что передавал
- Кликаю на X
- → виджет исчезает
- Проверяю, какие запросы пришли на rest-поинт
В заказе есть исполнитель
При переводе заказа из архивного в актуальный, текущий исполнитель будет снят с задачи.
Выберите тип сделки
С безопасной сделкой вы всегда сможете вернуть средства, если что-то пойдет не так. С простой сделкой вы самостоятельно договариваетесь с исполнителем об оплате и берете на себя решение конфликтов.