Адаптивная верска + немного программирование.
работаем над сайтом https://goodtoys.com.ua/ Он на вебасисте. Всё, что не описано с особенностей функционала, уже и так реализовано на сайте, и нужно это только прикрутить...
1) У нас адапт должен быть сделан под: чистая адаптивная верстка HTML5/CSS3 сайта без bootstrap.
валидный код
http://jigsaw.w3.org/css-validator
Верстаем темплейт вебасиста. Работаем на поддомене, на копии сайта.
320/576/720/1024/1200(такой же, как на 1024 + по бокам фелый фон...)/1600 http://joxi.ru/12Mlj74Uzdw9mJ/ Если больше 1600, добавляем белый фон по бокам. Основной сайт под 1600.
По ховерам, для версий 1024+... для пк...:
2) Шапка. http://joxi.ru/gmvzg6OTPBMkma Ховер https://tympanus.net/Development/CreativeLinkEffects/ (5-й с низу в верх) http://joxi.ru/EA4jvn1UQZMbmb Меняет цвет и появляется подчеркивание при наведении, и если открыта эта страница.
3) Шапка. горизонтальное Меню. http://joxi.ru/xAe60NEUk6l7ry и правый левый угол http://joxi.ru/52aEYNys7ZxM20 "Регистрации" и "Личный кабинет", при наведении или нажатии (если перешли на эту страницу), появляется тот же ховер (подчеркивание), что и в предыдущем пункте. Только цвет не меняется.
4) Ховер на кнопки Купить (база белый, при наведении, салатовый), кнопка НАЙТИ (поиск, база зелёный, ховер при наведении салатовый), в фильтре, выбор пола ребёнка (база белый, при наведении и при нажатии, остается желтым) понравился вариант D http://dbmast.ru/4-prostyh-hover-effekta-dlya-knopki-na-chistom-css
5) Ховер стрелки на баннер понравился этот Circle Pop https://tympanus.net/Development/ArrowNavigationStyles/ https://tympanus.net/codrops/2014/05/28/arrow-navigation-styles/ Если у нас присутствует только 2 баннера, тогда стрелки не видны...
Сами баннеры... нужно реализовать в таком стиле: http://www.cjgammon.com/ Предусмотрена возможность в Админке редактировать и создавать таке баннера.
6) Всесь контент, на всех страница, появляется аяксом при скроле в низ, пример: http://rozetka.com.ua
Таким образом мы ускоряем скорость загрузки страницы. Сделать в точности так же.
7) В футере, и на странице товара, новые иконки социалок, с ховер эффектом http://joxi.ru/n2Yv5RBtvnMWA6 Проложу css файл и иконки. Только нужно его почистить от стороннего кода... В футере значки должны вести на эти группы социалок...
Футер. Модификация. Убираем эти социалки http://joxi.ru/DrlRV7liwg4J2P , Ставим ссылки на эти категории http://joxi.ru/bmonV6dtP4Mxry (с продакшена)
8) Ховер для меню. Модификация. Используем этот ховер https://s-sd.ru/blog_studio_design/kak_sozdat_vertikalnoe_menyu_dlya_sajta_na_css/ Только не полностью... А только вторую часть: http://joxi.ru/Vm6l75zUa9daAZ
А именно, при наведении курсором, идёт подсветка, при нажатии, так же. Миниатюра категорий "выпригивает" с низу, и стаёт "на место". Подкатегории и ниже, присоединяются с права. Если вдруг мета на мониторе нет для нового выпадения меню с права, тогда подтягивает слева.
9) Для фильтра делаем соответствующие ховверы... Как и на товар (увеличения).. .расписывать нет надобности...
10) Сейчас доделывают иконки, дя преимуществ (на главной над меню и ниже категорий). Нужно соответвенно это всё вставить в сайт.
11) В карточке товара. иконки сейчас делают. Нужно сделать всплывающим попапом Доставка, Оптата, Гарании http://joxi.ru/12Mlj74UBPv9mJ
Для верисий меньше 1024:
Никаких попабов (кроме увеличения изображения товара). Всё размещается на сайте. Но по прежнему, аяксом подтягивает всю информацию при скроле.
Функциональные доработки по движку:
1) В категориях, в админке, добавить место для мини-изображения, что будут выводится в меню http://joxi.ru/MAjZl7JHPlyWAe
2) Отображения категоий. Для категорий 3-го и ниже уровня, выводим их в виде "фильтра", пример реализации: https://toys.com.ua/bolshie-kukly http://joxi.ru/E2pXgWLHPLLj2Y
Само левое меню "свернуто" Для меню используем плавный ховер.
3) Никаких циклических ссылок.
4) Через неделю, после совершения заказа через сайт, на эмейл должно прийти письмо с просьбой оставить отзыв о отваре. И само собой, переходим в товар, в раздел отзывов
5) в Админке предусмотрен выбор цвета... цвета товара... предусмотреть возможность вывода его под названием товара.
6) Акция... если мы выставляем, то идёт посекундный отчёт по времени. Структура: Дни/часы/минуты/секунды
7) Доработать возможность, проставления ссылки на другой товар http://joxi.ru/52aEYNys7o1920 Суть: Если у нас есть модель с уценкой, мы ее добавляем, и прописываем ссылку на тот товар. Система подтягивает и цену на него.
Это двухсторонняя ситуация, в которой на товаре с уценкой, идёт ссылка на нормальный товар пример: http://rozetka.com.ua/14790617/p14790617/ http://joxi.ru/D2PGQVESVPL7m3
8) чпу. убрать из чпу /category/ , /product/ . сделать системные редиректы, как со старых уролов на новые, так и в БД поправить внутреннюю перелинковку (Если в товаре или категории с описания идёт ссылка на товар или категорию, и от туда убрать это).
9) Нужна зелёная зона на ПК и на моб версии https://developers.google.com/speed/pagespeed/insights/
Прорисованы все страницы. Нужно будет обсудить особенности адапта для категорий/товара и тд... Прикладываю основные страницы здесь.. а так.. ссылка на все страницы в архиве здесь: https://yadi.sk/d/qMJi7SZD3FLNPH В целом... диз очень подробно прорисован... и все страницы показаны... расписывать полностью всё остальное.. .по опыту не стоит. Ибо всё, что изображено, всё должно сверстать и работать 🙂 Но можем обсудить все моменты, что вас волнуют.
Что же, дамы и господа, ожидаю от вас формирование цены и сроков. И Ваше портфолио, важная часть принятия решения об исполнителе... Успехов!
Додатки 7
-
Представляю как вам наверстают без BS, а если и нормально будет, то это будет тот же чей-то фреймворк-велосипед, который потом при дальнейшей поддержке (если буду другие люди привлекаться) превратят в помойку, а если останутся авторы фреймворка, то цены резкой пойдут в верх.
-
Актуальні фриланс-проєкти в категорії Веб-програмування
На опенкарті (окстор) перестав працювати менеджер зображеньНа опенкарті (окстор) перестав працювати менеджер зображень, взагалі не відкривається ні в товарах ні в будь якому іншому місці. Коли це сталося і після чого не відомо так як на сайт товари додаються автоматично через завантаження по yml. Треба зробити щоб менеджер зображень… Веб-програмування ∙ 3 ставки |
Добавити укр версію на сайті на WordPress
500 UAH
Вітаю. Наш сайт https://www.dobavka.info/ Треба добавити та налаштувати модуль укр мови. Щоб була можливість перемикатись між мовами на сторінці статті та на головній сторінці. Веб-програмування ∙ 10 ставок |
Shopify додавання календаря до послуги.Привіт, шукаю можливість додати до картки товару календар, при розгортанні якого на кожній даті відображається вартість послуги. Також необхідно змінювати вартість послуги в залежності від дати. Оплата за послугу передбачає внесення передоплати, залишок у день надання послуги НА… Веб-програмування |
Додавання нового функціоналу до існуючого проекту (ReactJS)Добрий день! Шукаємо розробника ReactJS, щоб допомогти нам додати новий функціонал до існуючої платформи. Потрібно сверстати нові сторінки, і підключити до API. З дизайном нових сторінок, можна ознайомитися за посиланням ТУТ API готовий. Деталі роботи з API вже обговоримо з… Javascript, Веб-програмування ∙ 11 ставок |
Написати розширення для Google Chrome
849 UAH
Потрібен розширення для Google Chrome (фейковий прогноз наступного числа або кольору для казино) Потрібно, щоб запам'ятовувалися останні введені цифри і при натисканні кнопки видається випадкове число Також потрібно, щоб запам'ятовувався введений колір і при натисканні кнопки… Javascript, Веб-програмування ∙ 4 ставки |