Workload estimate:

1. new UI architecture - 15 days
2. Test (mobile + desktop + Chrome/FF/Safari/IE) - 7 days
3. PM - 3 days

Total: 25 days

This estimate takes into consideration the additional charges in terms of full team mobilization to meet the desired deadline of 4 April 2019.

Waiting for your approval.

We approve

The last prototyp:
https://dqsqft.axshare.com/#g=1&p=main_page&c=1

Response from NetPeak

тут https://dressa.com.ua/ используют Node.js + Angular
пререндерят с помощью Angular Universal, из специфических моментов:
1. Проверка билда занимает 20-30 минут.
2. Если будут ошибки на стороне API, данные могут быть переданы некорректно и на сервере ничего не создастся.
3. Нет доступа к window и document по всему проекту.

Женская одежда и обувь от производителя – купить в интернет-магазине Dressa
https://dressa.com.ua
по SEO у нас тут были мелкие проблемы, самая большая - изображения в категориях не всегда успевали подгружаться за 5 секунд и в серч консоли не отображались
опытным путем выяснилось, что если гуглбот за 5 секунд не успевает отрендерить какой-то контент - он не будет отображаться в серч консоли и соответственно ранжироваться

и исходя из опыта лучше всего использовать пререндеринг или изоморфный js, с этими вариантами меньше всего проблем по SEO возникает

New Architectural proposal.¶

In order to guarantee the SEO and other features of the project, we propose to keep the hybrid architecture - Thymeleaf3 + Vue.JS

Reasons:¶

• we didn't succeed to validate the site parsing by google bot with all suggested solutions.
• our team does not have any experience in SEO optimization for Vue,React, etc.
• The existing hybrid approach is fully managed by out team and we can guarantee the stable development process.

Consequences:¶

• To adapt new architectural style we need 10 additional days.
• The deadline should be set to 15 April 2019.

Waiting for your approval.

Для этой части: http://prntscr.com/n694tq

1) Удобная доставка
Доставка в любую точку Украины. Доставка по Киеву от 40 грн.
2) Гарантия возврата товара
Не рассчитали объем или что-то не подошло? Верните или замените товар в течение 90 дней после покупки
3) 464 магазинов в 15 странах мира
Используем мировой опыт обслуживания клиентов в Украине
4) До 45 000 наименований
Каждый магазин Леруа Мерлен предлагает покупателю правильный выбор качественных товаров

1) Зручна доставка
Доставка в будь-яку точку України. Доставка по Києву від 40 грн.
2) Гарантія повернення товару
Не розрахували обсяг або щось не підійшло? Поверніть або замініть товар протягом 90 днів після покупки
3) 464 магазинів в 15 країнах світу
Використовуємо світовий досвід обслуговування клієнтів в Україні
4) До 45 000 найменувань
Кожен магазин Леруа Мерлен пропонує покупцю правильний вибір якісних товарів

О брендах: http://prntscr.com/n696wb

Компания Леруа Мерлен наряду с другими компаниями, входящими в GROUPE ADEO, внесла свой вклад в разработку и создание 15 собственных торговых марок

Компанія Леруа Мерлен поряд з іншими компаніями, що входять в GROUPE ADEO, внесла свій внесок у розробку і створення 15 власних торгових марок

Brovarskoy is favorite store by default

* Make bottom slider image 100% width and slider too
* Replace product miniature button to the left
* Change Offsets for Brands block
* Change the width of hamburger menu on mobile 300px -> to responsive (keep 20-30px on right side)
* Catalog on mobile: if the width > 375px: 3 categories in row

1) Стили в футере не совсем такие же
2) http://prntscr.com/n99l7a - здесь цвет светлее должен быть
3) http://prntscr.com/n99iem - не так как в макете
-4) http://prntscr.com/n99e4r -
все типы цен - добавить letter-spacing: 0.02em; основная - font-weight: 600 заменить на bold; вторую цену - font-weight: 500

"грн" написать малеьнкими
5) http://prntscr.com/n99c6c - font-weight: bold; font-size: 14px;
-6) http://prntscr.com/n99azp - все стрелки 1px
-7) http://prntscr.com/n996lx - больше падинг сверху и снизу, кнопки не того размера, кнопка зарегистрироваться - font-weight 600
8) Меню - http://prntscr.com/n993pf
Названия категорий ровняется под слова "Каталог товаров"
Гамбургер меню другого размера - оно сочитается с размером будущих иконок. Т.е. высота линий 2px, ширина - 19px
Дожны быть падинги сверху, снизу, справа
9) - Слайдер и баннер - не те пропорции и нет оступления. http://prntscr.com/n98yom (в макете) и на сайте http://prntscr.com/n98zgp
10) - Серый фон не до конца закрашивается и border-radius должен быть 2px - http://prntscr.com/n98srx
Мне кажется, что по макету больше пространства сбоку или мы пока это не трогаем, как договаривались? http://prntscr.com/n98uvl
Поиск: http://prntscr.com/n98xbs

Нет иконки поиск слева, не тот цвет placeholder, кнопка Найти - 14px
11) Change the order http://prntscr.com/n95atn

Olena Skrypek wrote:

Здесь на 5 поделено? http://prntscr.com/n99izq

да

12) http://prntscr.com/n9f0th - добавить правильный hover
13) http://prntscr.com/n9f4lq - съехало меню
14) Поиск в активном состоянии нужно менять просто цвет обводки с серого на цвет кнопки "Найти". Без "подсветки".
15) http://prntscr.com/n9ge3o - "Леруа Мерлен" напиши
16) http://prntscr.com/n9ghs6 - border-radius 2px
17) http://prntscr.com/n9giby - при наведении двигаются все остальные слова
18) http://prntscr.com/n9givu - добавить отступа
19) http://prntscr.com/n9gk3n - белый непрозрачный цвет
20) http://prntscr.com/n9gkfj - чуть больше отсутпа добавить
21) http://prntscr.com/n9glcr - на макете блоки по ширине меньше
22) http://prntscr.com/n9gm5y - 12px шрифт и стрелка ближе к тексту
23) Я не знаю, как доказать:), но на главной пропадает скролл http://prntscr.com/n9ij8q. Скролл пропадает после нажатия на кнопку купить
24) http://prntscr.com/n9hsti - зеленая кнопка
25) Добавить hover http://prntscr.com/n9hu7z
26) http://prntscr.com/n9i4wm
27) http://prntscr.com/n9i5js
28) http://prntscr.com/n9igt4
29) http://prntscr.com/n9il6u

font-weight: bold;
line-height: 19px;

30) http://prntscr.com/n9in16 - после нажатия

Mobile:
1) http://prntscr.com/n9fegs - не переносит слова
2) Можно чуть ниже опустить корзину, чтобы логотип поместился? http://prntscr.com/n9fet9
3) Светлее цвет на "грн" http://prntscr.com/n9ffuh
4) На сайте отличается
Макет: http://prntscr.com/n9fjwn
Сайт: http://prntscr.com/n9fke3
Также нет border-radius
5) http://prntscr.com/n9flgy - чуть выше поднять текст, в макете показано.
6) Чуть меньше отступ сделать http://prntscr.com/n9fmd1
7) http://prntscr.com/n9fo7w - в 3 ряда
8) http://prntscr.com/n9fn4v - цвет темнее
9) http://prntscr.com/n9fq8p без проблеов единицы измерения и валюта
10) м2 - "2" написать с верхний регистром
11) http://prntscr.com/n9fr98 - нажала сначала на иконку, потом на меню
12) http://prntscr.com/n9ivmg -1px
13) http://prntscr.com/n9iwef
14) Добавить левый свайп меню, чтобы он убирался
15) Когда нажимаю на корзину, модальное окно пропадает только по клику на иконку. На затемненную зону тоже должно
16) Убрать скролл-бар в левом меню
17) Элементы навигации меньше на мобильном. 22-23px линия, стрелку с макета можно забрать. Белого цвета. Опусти линии немного ниже
18) Затемни зоны по бокам, как на макете (не очень темно чтобы было). Когда я вставлю баннер, он должен быть виден http://prntscr.com/n9j2qb
19) Анимация "выезда" левого меню - без "разгона":) Просто слайд.
20) У меня на телефоне не отображается иконка http://prntscr.com/n9j5rc, а на компе все норм

http://prntscr.com/n9gw5y - минимальная высота меню 2-го уровня = высота меню 1-го уровня. Если нужно больше по высоте, то делаем больше. Но никак не меньше.

http://prntscr.com/n9hfkt - иконку поиска потеряли

http://prntscr.com/n9hmwv - обвести весь блок рамкой и залить белым внутри, тогда блок будет смотреться целостно

http://prntscr.com/n9huk0

1. Необходимо сделать внутренний (во всплывающем окне) телефон кликабельный с ссылкой, а с внешнего убрать ссылку, тогда в мобайле по тапу будет открываться такое же окно, как в десктопе, а при клике на внутренний номер пойдет звонок. таким образом мы повторим пользовательский опыт на десктопе и на мобайле

2. не нужно подчеркивать город
и иконки локации и телефона очень маленькие, не совпадают с дизайн-макетом

http://prntscr.com/n9j203 - При наведении не жирным выделять, а просто менять цвет на более темный, как в дизайне

http://prntscr.com/n9wyv1 - поиск в активном состоянии - цвет обводки меняется на цвет кнопки, шрифт при вводе - #333333, regular (400), 13px

http://prntscr.com/n9x56n - Сравнение, избранное, войти — выделяются серым прямоугольником.
Корзина — затемнением контента вокруг
http://prntscr.com/n9x4wk - В корзине не выделяется серым из-за затемнения, фокусируемся на контенте.

http://prntscr.com/n9xskp - при наведении font-weight оставляем 500, как в неактивном состоянии. На 600 не меняем, текст прыгает

Поменяйте основной зеленый с #49с042 на #61ae10. Состояния кнопок и логотип с новым цветом можно посмотреть на UI-KIT в фигме.

на макете - http://prntscr.com/n9yeid
на верстке (стрелку потеряли) - http://prntscr.com/n9yge4

Про отступы по краям:
1) Выровнять контент по краям по одной линии.
2) На небольших мониторах (ширина менее 1440 px) общий отступ от края браузера до края начала контента — 30px. Как справа так и слева, одинакого. (16px, 23px и 24px мало)

Подробнее, о чем речь: https://docs.google.com/document/d/1En6ubvsAvWygvkjZFyloUzAftp3cFshupkeq1mxkDzs/edit?usp=sharing

1) http://prntscr.com/n9zpiy - толстый border
2) http://prntscr.com/n9ztwg - модальное окно должно быть поверх поп-апа
3) Линию довести http://prntscr.com/n9zvua
4) http://prntscr.com/na01ve
"в курсе" раздельно написать
input без внутренних теней или бордера. Ширина такая, как в макете.
Шрифт цвет, начертание по макету
Placeholder - тоже не по макету
5) Убери поп-ап с мобильной версии сайта
6) На макете: http://prntscr.com/na0ee2
Верстка: http://prntscr.com/na0hby
7) У поиска на мобильной версии пропали отступы http://prntscr.com/na0fai. Вчера было нормально.
8) Сделать больше оступ от края http://prntscr.com/na0gwl
9) Добавить отступ согласно макету http://prntscr.com/na0kya
10) Добавить отступ согласно макету http://prntscr.com/na0lch
11) http://prntscr.com/na0mff
12) http://prntscr.com/na18t9 - line-height: 21px;
13) http://prntscr.com/na15rl - высота 40px

http://prntscr.com/n9zzwx - На некоторых мобильных устройствах (в частности точно шириной 375px и более), при нажатии в зоне стрелочки на Каталоге, меню закрывается. На 414 px - открывается каталог, но при этом одновременно, закрывается меню.

Alexey Shapka wrote:

Мобильная версия:
1) Расширить зону серого справа с 30px до 40px
2) Добавить крестик (возможность закрыть меню как при нажатии на крестик, так и при нажатии на пустое место справа. Если возможно, одновременно сделать возможность закрыть меню свайпом пальца влево. И возмоожность открыть, свайпом пальца вправо)
3) Стрелочку возле кнопки Каталог товаров повернуть на 90 градусов и придвинуть к тексту (примеры прикрепляю). При открытых категориях стрелка поворачивается на 180 градусов и смотрит вверх, при закрытых - вниз, как в примере.

По пункту 2. Крестик в 1px толщина линии, цвет линий #e9e9e9. Высота и ширина краев крестика - 32х32 px. Крестик прикреплен к верху. Отступ от крестика до верха и по бокам по 4px

http://prntscr.com/na1k21 - высота тизера должна быть 360рх, а не 422. Можно подтянуть выше картинку и все элементы выше поднять.

http://prntscr.com/na1kyr - дизайн-макет

http://prntscr.com/na1ms6 - ширина должна быть 300рх на экранах шириной 320рх

http://prntscr.com/na1o4y - дизайн-макет

http://prntscr.com/na2j7z - внизу в меню: город и мой магазин, сейчас нет этого next release
http://prntscr.com/na2kav - надпись Мой магазин со стрелочкой, как в макете + выезжающее меню с выбором города и моего магазина next release

http://prntscr.com/na2lfy - затемнение контента not reproduced
http://prntscr.com/na2lv8 - hover кнопки Войти. Пример реализации есть в макете: http://prntscr.com/na2mo3

http://prntscr.com/na2tf4 - так выглядит в дизайн-макете.

Сейчас на сайте эта ссылка при наведении прыгает. Нужно сделать подчеркивание просто ниже текста, и при наведении просто убирать подчеркивание и не двигать текст. Как на макете.

Текст под брендами: http://prntscr.com/na7grm

Hover-эффект категорий 2-го уровне в меню: При наведении выделять текст зеленым #61ae10 - http://prntscr.com/nc6dtq

http://prntscr.com/nc6udv - эти пункты личного кабинета выделять при наведении (hover-эффект) цветом #333333.
Как тут - http://prntscr.com/nc6y97

Olena Skrypek wrote:

2) Сейчас на планшете при горизонтальном развороте каталог, как на десктопе и меню второго уровня выезжает только на ховер. Может меняем поведение для планшетов, например на клик?

Конечно, меняем на планшетах на клики, т.к. на планшете, как и на смартфоне, наведения мышки нет.

Alexey Shapka wrote:

Olena Skrypek wrote:

2) Сейчас на планшете при горизонтальном развороте каталог, как на десктопе и меню второго уровня выезжает только на ховер. Может меняем поведение для планшетов, например на клик?

Конечно, меняем на планшетах на клики, т.к. на планшете, как и на смартфоне, наведения мышки нет.

Если мы меняем на клики, то как перейти в юниверс?

Денис, сделай, пожалуйста, в верстке на дексктопе иконки:
max-width: 22px;
max-height: 22px;

А на мобильном:
max-width: 46px;
max-height: 46px;

Переводы на украинский:
1) http://prntscr.com/ncop7v - меню, пошук, кошик, увійти
2) http://prntscr.com/ncops2 & http://prntscr.com/ncops2 - каталог товарів
3) http://prntscr.com/ncpz0r - Купити
4) http://prntscr.com/ncpzqa Більше товарів
5) http://prntscr.com/ncpzxb - переглянуті товари
6) http://prntscr.com/ncq0fl власні бренди
7) http://prntscr.com/ncq0t8

Інструменти
Мототехніка для саду
Обробка повітря та води
Декор приміщень
Фарби
Вироби з дерева
Відпочинок на природі
Вироби з металу
Догляд за рослинами
Облаштування оселі
Укладка матеріалів
Обладнання для дому
Електротовари
Ванна кімната
Товари для кухні

8) http://prntscr.com/ncq8ao
9) Пошук по товарам http://prntscr.com/ncq8zg
10 http://prntscr.com/ncq98m Знайти
11) http://prntscr.com/ncqbp7

Безкоштовно з будь-яких номерів України
Графік роботи контакт-центру
Пн-Нд: з 7:30 до 22:00
12) http://prntscr.com/ncqco4

Дякуємо за вибір Леруа Мерлен
Ми вас не впізнали. Може увійдете у свій акаунт?
Увійти
У вас немає акаунта?
Зареєстровані користувачі отримують персональні рекомендації, знижки та подарунки

Denys Bezuhlyi wrote:

Alexey Shapka wrote:

Olena Skrypek wrote:

2) Сейчас на планшете при горизонтальном развороте каталог, как на десктопе и меню второго уровня выезжает только на ховер. Может меняем поведение для планшетов, например на клик?

Конечно, меняем на планшетах на клики, т.к. на планшете, как и на смартфоне, наведения мышки нет.

Если мы меняем на клики, то как перейти в юниверс?

Переходить в Юниверс с главного меню нет необходимости, т.к мегаменю, по сути, повторяет страницы Юниверсов. Если это принципиально - сделать кликабельными выезжающие заголовки - http://prntscr.com/ncqgq7

Alexey Shapka wrote:

Denys Bezuhlyi wrote:

Alexey Shapka wrote:

Olena Skrypek wrote:

2) Сейчас на планшете при горизонтальном развороте каталог, как на десктопе и меню второго уровня выезжает только на ховер. Может меняем поведение для планшетов, например на клик?

Конечно, меняем на планшетах на клики, т.к. на планшете, как и на смартфоне, наведения мышки нет.

Если мы меняем на клики, то как перейти в юниверс?

Переходить в Юниверс с главного меню нет необходимости, т.к мегаменю, по сути, повторяет страницы Юниверсов. Если это принципиально - сделать кликабельными выезжающие заголовки - http://prntscr.com/ncqgq7

Имеется ввиду на планшетах нет необходимости, т.к. планшетные посещение - не более 2%. На десктопе оставить механику - при клике переходить в юниверс.

1) http://prntscr.com/ndkain - должно быть не в 2 линии two lines from 1039px, added less text to avoid this problem

Какие фичи нужно доделать на главной:
1) Мой магазин со всеми дальнейшими окнами
2) Выбор города
3) Эту часть управлять через Опус - http://prntscr.com/ndnacq
4) Добавлять разные блоки с товарами через Опус - http://prntscr.com/ndnar0
5) Добавить рекомендации на основе просмотров
6) http://prntscr.com/ndnbseм управлять через Опус
7) http://prntscr.com/ndnc43 добавить в Оусе этот блок с категориями
8) Добавить иконку с уведомлением в кабинете
9) Дизайн кабинета на главной сделать согласно последней версиии (выделить блок)
10) Мобильная версия кабинета другая (см. дизайн)
11) Иконка залогиненого пользователя
12) Блок SЕО текст на главную
13) Прилипающий хедер
14) Вход в личный кабинет в модальном окне http://prntscr.com/ne7frr
15) Добавить историю поиска http://prntscr.com/ne7gnj

Little fixes:
1) http://prntscr.com/ne0xoe - написать "Пошук..." / "Поиск..."
2) Поправить слово здесь в русской версии сайта http://prntscr.com/ne0ygp - "магазина", в в укр - "магазини"
3) Edge compability
4) Нет заливки на иконках юниверсов
5) Синхронизация вкладок
6) Мега меню - темный фон пропадает после второг клика куда-либо
7) Мобильное меню - должно закрываться строго по горизонтальному тапу.
8) При наведении на корзину, превью пропадает, темный фон остается - замечено на макбуках
9) Клик по иконке корзины - переход в корзину http://prntscr.com/ne6vso
10) Убрать слово http://prntscr.com/ne6xdk
11) http://prntscr.com/ne76ml - бордер 2 пикселя, убрать бордер от браузера, стили шрифта при вводе мейла как наш поиск.
12) Поправить степень - http://prntscr.com/ne7efj

Убрать текст в корзине В Одессе https://prnt.sc/nf4v5u 02.05

На этой кнопке сделать 14.1px, чтобы "є" стала на свое место http://prntscr.com/nfn2f4

May be this information can help to solve comment #61. Googlebot uses Chrome 41. This old version is not supported some new js features.

COmment #933#note-59, do you want to delete this text completely or just change the name of store?

1) Корзину переместить немного вправо, так чтобы отступ от кнопки найти до корзины и от корзины до войти был + одинаковым.
http://prntscr.com/njgnm1 02.05. not exactly, but close, check it please
2) http://prntscr.com/njh979 - на ПК версии тоже добавить линк на юниверс сюда (как в планшете) 02.05

1) Фото должно фиксироваться
http://prntscr.com/nkzst0
2) В мобильной версии элементы (текст+иконка) меню должны быть на одинаковом уровне http://prntscr.com/nkzyfk.
3) http://prntscr.com/nl4g38 сделать отступ

Когда нет уведомлений, не показываем этот значок с 0: http://prntscr.com/nlwfpb.

ПОведение такое же, как и в старом дизайне. Здесь тоже все убираем: http://prntscr.com/nlwgml http://prntscr.com/nlwgu5

При наведении на категорию в открытом каталоге, верхнее фиксированное меню должно убираться - http://prntscr.com/nlyfrm