Доработка сайта Samokat33
Главная страница
Задача
Реализовать на проекте несколько задач:
- Добавить в сайдбар данные по телефонам справочной службы и вывести почту компании
- Изменить верстку шапки:
- переместив телефоны в самый верх
- выбор города внести в среднюю область, разместив справа от логотипа
- растянув поиск на максимально возможную ширину
- Добавить оформление заказа (переименовать все "Перейти в корзину" в "Оформить заказ")
- Добавить очистку всей корзины
- Добавить раздел по оплате заказа и раздел с результатом оплаты
- Провести оптимизацию на проекте
- Добавить lazyload на проект
- Добавить разные размеры в вывод изображений
- Добавить webp варианты вывода графического контента
- Изменить на асинхронную загрузку скриптов Почта Банк
- Не показывать компонент Почта Банк если нет переданного ID элемента
Цветовая палитра
Макеты сайта
Результат
На проекте используется Битрикс и стоит решение от Аспро. На проект был заведен lazyload и генерация webp для изображений. Изменена структура шапки проекта и ее мобильная вариация.
Добавлены все изменения по задачам корзины и оформления заказа.
Ситуация с использованием компонента Почта Банк тормозила основной поток и выбрасывала ошибку на страницу, стоял вызов компонента, так где он не был нужен. Проблема была разрешена путем переноса на асинхронную загрузку фронта и использование компонента на бекенде только там, где нужен.
Также для удобства на фронт проекта была добавлена общая шина событий (mediator.js) для возможности общения между областями фронта и обновления lazyload-instance.
По результатам проделанных работ, клиент остался доволен. Сайт стал шустрее открываться, исчезли ошибки на фронте.