Сайт-каталог газонных трав вместо медленного WordPress
Магазин «Газонные травы» продаёт семена газона в Екатеринбурге с 2010 года. Сайт на WordPress тормозил, каталог было тяжело обновлять, а заявки приходили в почту вперемешку со спамом. Я перенёс проект на статику: собрал каталог на 47 товаров, поиск по свойствам, калькулятор расхода семян и корзину — без интернет-магазина и онлайн-оплаты.
- Роль:
- дизайн, вёрстка, поддержка
- Срок:
- 3 недели
- Стек:
- Eleventy, Fuse.js
- Запуск:
- 2024
Главная страница ekb-gazon.ru после переноса
- PageSpeed на десктопе
- 99
- товаров в каталоге
- 47
- категорий и тегов-свойств
- 17
- от старта до запуска
- 3 недели
Что было не так
Магазин работал на WordPress с набором плагинов. За годы сайт оброс тем, чем уже никто не пользовался, и это било сразу по трём вещам.
Скорость
Каждая страница товара собиралась на лету: запросы к базе и работа плагинов на каждый визит.
Обновление каталога
Чтобы поменять цену или фасовку, надо было идти в админку и помнить, в каком поле что лежит.
Заявки
Форма собирала спам, и настоящие заказы терялись среди него в общем почтовом ящике.
И отдельная боль, о которой сказал клиент: покупатели постоянно звонили с вопросом «сколько семян нужно на мой участок». Ответ на него занимал половину каждого разговора.
Что сделал
Каталог, который легко обновлять
Каталог собирается из данных на этапе сборки: 47 товаров, 17 категорий и теги-свойства вроде «теневыносливый» или «недорогой». Цена, фасовки, состав смеси и норма высева лежат в одном месте, а на сайте появляются сразу в трёх — в карточке товара, в фильтрах и в поиске. Добавить товар — значит добавить запись, а не заполнить восемь полей в админке.
Поиск по свойствам, а не по названию
Покупатель редко знает точное название смеси — он знает, что ему нужен газон в тень. Поиск работает на Fuse.js прямо в браузере: ищет по названию, бренду, составу и тегам, прощает опечатки и незаконченные слова. Запрос «теневынослив» находит и категорию «Теневыносливые газоны», и восемь конкретных смесей. Результат появляется сразу, без перезагрузки и без запроса на сервер.
Калькулятор расхода семян
Тот самый вопрос из телефонных разговоров. Покупатель вводит площадь участка, выбирает режим — оптимально, минимум или на подсев — и получает не граммы на квадратный метр, а конкретное: сколько килограммов нужно и сколько это упаковок. Расчёт добавляется в корзину одной кнопкой. Норма высева у каждой смеси своя и лежит в тех же данных, что и остальные характеристики.
Корзина без интернет-магазина
Онлайн-оплата магазину не нужна: заказы подтверждают по телефону, часть уходит оптом с отсрочкой. Поэтому вместо полноценного e-commerce — корзина и форма заказа с тремя способами получения: самовывоз, доставка по городу и отправка в другой регион. Каждый вариант показывает свои поля и свои условия. Спам отсекается скрытым полем-ловушкой, поэтому в почту приходят только настоящие заказы.
Почему статика, а не WordPress
Сайт-каталог отличается от интернет-магазина одним: содержимое меняется редко, а читают его часто. Значит, нет причин пересобирать каждую страницу заново на каждый визит.
На Eleventy все 89 страниц — товары, категории, статьи — собираются один раз при публикации и отдаются как готовый HTML. Отсюда скорость. Отсюда же спокойствие: нет админки, которую надо обновлять, нет плагинов, которые ломаются друг об друга, нет базы, которая может лечь в сезон.
Всё, что должно быть живым — корзина, поиск и калькулятор, — работает в браузере и не требует сервера.
Проект остался на поддержке
Добавляю товары и статьи, слежу за скоростью и правлю мелочи. С момента запуска в блоге вышло 17 материалов о газоне — они приводят людей из поиска по вопросам вроде «как убрать мох на газоне» и ведут их в каталог.
- Eleventy
- Fuse.js
- Swiper
- Яндекс.Метрика
- WebP / AVIF
Нужен похожий проект?
Опишите задачу — вернусь с решением, ориентиром по цене и срокам. Без обязательств.