Новый сайт производителя окон и дверей: каталог на Nuxt.JS и конфигуратор на Vue.js, в котором покупатель выбирает профиль, стеклопакет и цвет и сразу видит цену. Сайт сделал Евгений Росляков. Он пишет сайты с 2016 года, оформлен самозанятым, заключает договор, а для юрлиц готовит закрывающие документы. Базируется в Москве, но проекты ведёт и удалённо.
У производителя около трёхсот моделей окон и дверей, и у каждой десятки сочетаний: профиль, число камер, стеклопакет, фурнитура, цвет плёнки. Старый каталог показывал всё это одним огромным списком. Страница грузилась по нескольку секунд, фильтры подвисали, особенно на телефоне.
Хуже того, поисковики видели не каталог, а пустой каркас. Карточки подгружались скриптом уже после открытия страницы, и в индекс попадало немного. По запросам вроде «окна пвх с ламинацией» сайт почти не находился, хотя товар в наличии, а цена у производителя ниже, чем у перекупщиков, которые занимали его место в выдаче.
Менеджеры по несколько раз в день отвечали на одни и те же вопросы: «а такой цвет есть», «сколько будет с белым профилем». Окно покупатель собрать сам не мог и звонил, а при долгой загрузке часто уходил к соседям.
Нужно было создание сайта, где каталог открывается быстро, страницы моделей индексируются, а выбор параметров понятен без звонка менеджеру.
Для каталога выбрал связку Vue.js Framework и Nuxt.JS. Nuxt.JS умеет отдавать готовый HTML с сервера: поисковый робот сразу получает название, описание, цену и характеристики модели, а в браузере страница «оживает» и работает как обычное приложение. У каждой модели свой адрес, заголовок и описание, карту сайта сервер строит сам.
Фильтры и конфигуратор написал на Vue.js. Профиль, стеклопакет и цвет выбираются кнопками, цена пересчитывается на месте, а выбранные параметры лежат в адресной строке. Ссылку на конкретную конфигурацию можно отправить жене или прорабу. Сотни вариантов целиком не выводятся: сначала загружается порция, остальное подгружается по мере прокрутки.
Стили написаны на TailWind. Интерфейс собирается из готовых классов, а в итоговый файл попадает только то, что реально использовано, поэтому стили весят мало. Карточки, сетка и мобильная версия делались по единому набору отступов и цветов.
Простые промо-страницы (акция на балконное остекление, форма замера) я сознательно не стал делать на Nuxt. Они маленькие, им нужны раскрывающийся блок и всплывающая форма. Их сделал на Alpine JS: он подключается одним небольшим файлом. С Vue.js он не пересекается, потому что на одной странице работает либо один, либо другой, а Alpine JS в компоненты каталога не подмешан. Внешний вид у промо-страниц общий с каталогом, потому что стили берутся из той же сборки TailWind. Лежат они отдельно, и менеджер правит текст и блоки в HTML без сборки проекта.
Каталог открывается заметно быстрее, особенно с телефона, а фильтры больше не подвисают. Страницы моделей отдаются поисковикам целиком, их можно индексировать и продвигать по конкретным запросам.
Покупатель сам собирает окно по параметрам и присылает менеджеру готовую конфигурацию ссылкой. Менеджеры реже тратят время на уточнение, какой профиль и какой цвет нужен. Маркетологи запускают акции на лёгких страницах, не дожидаясь программиста.
Новые модели добавляются данными, а не правкой кода: появилась строка в таблице, и для неё сами создаются страница, фильтры и запись в карте сайта. Когда производитель завёл новую серию профиля, каталог принял её без доработок.
Компоненты на Vue.js переиспользуются: карточка, фильтр, блок параметров. Внешний вид меняется в одном месте и сразу виден во всём каталоге. Я передал заказчику короткую инструкцию по обновлению каталога и запуску промо-страниц, чтобы он не зависел от меня в мелочах. Запуск и сборка описаны по шагам, так что сайт при желании может вести штатный разработчик.
Если каталог на сотни позиций тормозит или плохо виден в поиске, напишите мне на freelance.ru и пришлите адрес сайта. Посмотрим, где теряется скорость.
