Прошу оценить стоимость и сроки.
Сайт:
Движок:
Opencart 2.1
Задание:
На основе макетов в Figma
выполнить вёрстку адаптивной главной страницы сайта.
По возможности применяя модули для редактирования контента. Например, чтобы баннеры редактировались в админке в разделе "Баннеры" и т.д.
Сайт доступен только через зеркало, целесообразнее для доступа к нему менять /etc/hosts
Подробнее:
1.
Элементы сайта должны выглядеть как на макете:
1.1. Шапка
1.1.1. Логотип
1.1.2. Текст+часы работы
1.1.3. Поле поиска
1.1.4. Иконки личного кабинета
1.1.5. Ссылки на инфостраницы
1.1.6. Иконки личного кабинета
1.1.7. Телефон
1.1.8. Иконки соцсетей
1.1.9. Главное меню
1.2. Сетка баннеров "Ваша история с новым..."
1.3. Витрина "Хиты продаж"
1.3.1. Стикеры Новинка/Акции
1.3.2. Фото товара
1.3.3. Разделитель
1.3.4. Название товара
1.3.5. Описание товара
1.3.6. Старая цена
1.3.7. Новая цена
1.3.8. Иконки
1.4. Джамботрон "Магазин велосипедов в Москве"
1.5. Карусель "Бренды"
1.6. Витрина "Популярные аксессуары"
1.6.1. Фото товара
1.6.2. Разделитель
1.6.3. Название товара
1.6.4. Описание товара
1.6.5. Старая цена
1.6.6. Новая цена
1.6.7. Иконки
1.7. Сетка баннеров + баннеры с текстом без картинки
1.8. Витрина "Популярная одежда"
1.8.1. Фото товара
1.8.2. Разделитель
1.8.3. Название товара
1.8.4. Описание товара
1.8.5. Старая цена
1.8.6. Новая цена
1.8.7. Иконки
1.9. Спрятавшийся велосипедист
1.10. Заключительная сетка картинок и текстов (перед футером)
1.10.1. Верхняя сетка + текст
1.10.2. Доставка Оплата Гарантия + сетка
1.10.3. Встроенная яндекс-карта.
1.10.3.1. Висящий стилизованный блок с адресом над картой (либо внутри карты штатными средствами если сервис яндекс.карты дает такую возможность)
1.11. Футер.
1.11.1. Логотип
1.11.2. Текст + часы работы
1.11.3. Текст + иконки соцсетей
1.11.4. Контакты + часы работы + заказать звонок
1.11.5. Меню категорий
1.11.6. Копирайты
2.
Адаптив сайта должен выглядеть как на макете:
2.1. Шапка.
2.1.1. Кнопка вызова меню
2.1.2. Иконки
2.1.3. Логотип
2.2. Всплывающее меню
2.2.1. Категории велосипедов
2.2.2. Инфостраницы
2.3. Карусель (!) баннеров "Ваша история с новым..."
2.4. Витрина "Хиты продаж"
2.5. Джамботрон "Магазин велосипедов в Москве"
2.6. Карусель "Бренды"
2.7. Витрина "Популярные аксессуары"
2.8. Сетка баннеров + баннеры с текстом без картинки
2.9. Витрина "Популярная одежда"
2.10. Заключительная сетка картинок и текстов (перед футером)
2.11. Футер.
2.11.1. Логотип
2.11.2. Текст + часы работы
2.11.3. Контакты + часы работы + заказать звонок
2.11.4. Меню категорий
2.11.5. Копирайты
2.11.6. Иконки соцсетей, отдельно висящие, фиксированные
3.
Интерактив десктоп-версии должен иметь следующее поведение:
3.1. Шапка
3.1.1. Всплывающей шапки, дополнительно возникающей при скроллинге страницы быть не должно.
3.1.2. Ссылка "На новой риге" должна вести на /contacts/
3.1.3. Нажатие Enter в поле поиска должно перекидывать в раздел поиска
3.1.4. Клик на иконки -- дефолтная реакция, либо ссылка в личный кабинет
3.1.5. Клик по меню категорий - переход на страницы категорий
3.2. Сетка баннеров "Ваша история с новым..."
3.2.1. Клик на ячейку сетки -- переход по вручную задаваемой ссылке
3.3. Витрина "Хиты продаж"
3.3.1. Клик по ячейке товара -- переход на страницу товара
3.3.2. Клик по товарным иконкам -- дефолтное действие этих иконок
3.4. Карусель "Бренды"
3.4.1. Клик по стрелкам -- перемотка карусели
3.4.2. Клик по правой верхней ссылке -- переход на /brands/
3.5. Витрина "Популярные аксессуары"
3.5.1. Клик по пагинации -- перемотка витрины
3.5.2. Клик по правой верхней ссылке -- переход в категорию-источник товаров
3.5.3. Клик по товарным иконкам -- дефолтное действие этих иконок
3.6. Сетка баннеров + баннеры с текстом без картинки
3.6.1. Клик по баннерам -- переход по вручную заданной ссылке
3.7. Витрина "Популярная одежда"
3.7.1. Клик по пагинации -- перемотка витрины
3.7.2. Клик по правой верхней ссылке -- переход в категорию-источник товаров
3.7.3. Клик по товарным иконкам -- дефолтное действие этих иконок
3.8. Спрятавшийся велосипедист
3.8.1. Клик по кнопке "Присоединяйся!" -- переход на /contacts/
3.9. Заключительная сетка картинок и текстов (перед футером)
3.9.1. Взаимодействие с яндекс-картой
3.10. Футер.
3.10.1. Ссылка "На новой риге" должна вести на /contacts/
3.10.2. Клик по иконкам -- плейсхолдер "#", действие не требуется
3.10.3. Клик по "заказать звонок" -- плейсхолдер "#", действие не требуется
3.10.4. Клик по меню категорий - переход на страницы соотв. категорий
4.
Интерактив адаптива должен иметь следующее поведение:
4.1. Шапка
4.1.1. Клик по кнопке меню -- открытие/закрытие мобильного меню
4.2. Карусель баннеров "Ваша история с новым..."
4.2.1. Слайдинг при удержании и движении (пальцем) вправо-влево
4.2.2. Клик -- переход на соотв. страницу
4.3. Витрина "Хиты продаж"
4.3.1. Клик по ячейке товара -- переход на страницу товара
4.4. Карусель "Бренды"
4.4.1. Слайдинг при удержании и движении (пальцем) вправо-влево
4.4.2. Клик по ссылке -- переход на /brands/
4.5. Витрина "Популярные аксессуары"
4.5.1. Слайдинг при удержании и движении (пальцем) вправо-влево
4.5.2. Клик по ссылке -- переход в категорию-источник товаров
4.6. Сетка баннеров + баннеры с текстом без картинки
4.6.1. Клик по баннерам -- переход по вручную заданной ссылке
4.7. Витрина "Популярная одежда"
4.7.1. Слайдинг при удержании и движении (пальцем) вправо-влево
4.7.2. Клик по ссылке -- переход в категорию-источник товаров
4.8. Футер.
4.8.1. Клик по иконкам -- плейсхолдер "#", действие не требуется
4.8.2. Клик по "заказать звонок" -- плейсхолдер "#", действие не требуется
4.8.3. Клик по меню категорий - переход на страницы соотв. категорий
Особенности:
A. Кроссбраузерность.
Результаты работ должны одинаково выглядеть в основных браузерах (в том числе старых версий): Firefox 53.0.3, Firefox ESR 52.9.0, Firefox, Chrome, Safari.
B. Адаптивная вёрстка.
Сайт использует адаптивную вёрстку, необходимо чтобы после выполнения задач, в мобильной версии всё было читабельно и никуда не съезжало.
Устройство посетителя считается мобильным в случаях когда:
Ширина экрана браузера менее 768px (если CSS-правилами сайта не определено иное).
User-Agent браузера позволяет определить что устройство мобильное.
Вышеуказанные условия должны реагировать на resize окна браузера (мобильные элементы после ресайза должны быть такими же как после полной перезагрузки с изначально мобильным разрешением).
Размеры элементов адаптивной версии должны растягиваться в зависимости от размера экрана браузера, и по ширине и высоте, сохраняя макетные пропорции.
C. Пояснение по адаптиву.
Адаптивность вёрстки мобильного варианта подразумевает, что не существует какого-то отдельного html-кода для мобильной верстки, дублирующего десктопные элементы. Вместо этого, один единственный вариант вёрстки, в зависимости от размера экрана, отображается как десктопный, либо как адаптивный вариант. Т.е. для десктопного вида и для мобильного вида шапки+меню не должно быть двух разных блоков html-кода. Один и тот же html должен отображаться по-разному в зависимости от разрешения экрана..
D. Нельзя использовать h1, h2, h3.
Для вёрстки новых элементов нельзя использовать теги h1 h2 h3 и т.д., поскольку это влияет на SEO-показатели.
E. Минимум javascript.
Задачи должны быть выполнены с минимально возможным применением javascript. Если какие-то задачи могут быть решены средствами PHP/HTML/CSS, то они должны быть решены с помощью PHP/HTML/CSS.
G. Поломки.
Выполнение данной задачи не должно сломать какой-либо другой функционал. Если в процессе работы вы что-то сломаете, то исправление поломки осуществляется вами безвозмездно.
H. Результат.
Результат задачи должен быть представлен в том конечном виде, который описан в ТЗ. Варианты "оно в принципе готово, просто зайдите туда-то, нажмите то-то, затем ещё туда и туда и вот сюда" крайне не приветствуются. Если после выполнения работ нужно обновить кэш модификаторов сайта - обновите. Если нужно будет обновить кэш браузера - измените html-код таким образом, чтобы файл сам обновился либо смените режим кэширования для этого файла. Посетители сайта обновлять кэш не будут, но зато увидят поехавшую вёрстку. Закладывайте это дополнительно в стоимость задачи.
I. SCSS/SASS/препроцессоры.
Следует избегать использования технологий, предполагающих стадию компиляции, поскольку они усложняют и без того запутанный процесс разработки, повышая её стоимость. Выгоды от их использования нивелируются негативным экономическим эффектом.
J. Никакого дебага на продакшене.
На продакшене не должно появляться никаких заглушек и прочего. В случаях острой необходимости произвести дебаг именно на продакшене, выводите дамп внутрь HTML-комментария, либо оборачивайте в .
Пожалуйста оцените стоимость и сроки выполнения.
Пожалуйста, при ответе не забудьте указать, что о заказе Вы узнали на сайте
www.best-lance.ru
