Задача: сделать быстрый и понятный сайт с каталогом дверей. Двери должны иметь множество вариаций с визуализацией.
Решение: было решено сделать полностью инлайн загрузку css и js, по мере загрузки каждого компонента страницы. Целевая аудитория посещает сайт в основном один раз, поэтому кэширование стилей и скриптов в отдельном файле не имеет смысла. Таким образом была достугнута максимальная скорость загрузки.
Все изображения на сайте используют технологию "ленивой загрузки" и не загружаются, пока этого не потребуется пользователю. Загрузка начинается по мере прокрутки страницы. Так же, пока изображения прогружается, используется "скелетный" индикатор загрузки. Он максимально лояльно и красиво отображает процесс загрузки изображения.
На странице каждой двери можно подобрать цвет и материал отделки, а у некоторых коллекций доступны дополнительные виды отделки, которые так же используют визуальное отображение.
Кнопка "купить" максимально подробно направляет пользователя в магазин. Будь то звонком или адресом. Все номера телефонов на сайте кликабельны. При нажатии на них с телефона, сразу предлагается совершить звонок. Адреса так же имеют ссылку. Они сразу переносят на карту. В окне "купить" можно сразу же построить маршрут в удобном для покупателя приложении карт.
На страницах со списком дверей так же присутствует сортировка дверей по цене "от и до". Работает это в без перезагрузки страницы — моментально. Использованы технологии vue.js
Сайт базируется на CMS Wordpress по ТЗ заказчика.
Время разработки и наполнения: 2 недели.
Ссылка:
https://legran56.ru