Казус
ElectroBoys
Пълен редизайн на онлайн магазин с 6000+ продукта от WordPress към Next.js 16. WooCommerce остана като headless бекенд, а целият фронтенд е пренаписан от нулата.
Редизайн от WordPress към Next.js
ElectroBoys работеше на WordPress с WooCommerce тема. Пренаписахме целия фронтенд на Next.js 16, а WordPress остана само като headless бекенд за продуктите. Собственикът продължава да използва WP админ панела по същия начин - без да учи нищо ново.
Преди: WordPress фронтенд
- ✗PageSpeed: 43
Бавно зареждане, особено на мобилни устройства
- ✗База данни: 660 MB
Натрупани плъгини, ревизии, transients и неоптимизирани таблици
- ✗Десетки плъгини
Всяка функционалност зависеше от плъгин с отделни обновления и конфликти
След: Next.js 16 фронтенд
- ✓PageSpeed: 88
Подобрение +105% - бързо зареждане на всяко устройство
- ✓База данни: 70 MB
Почистване и оптимизация - намаление с 89%
- ✓Нула плъгини
Цялата логика е в custom код - без зависимости от трети страни
Управлението на продуктите не се промени
Собственикът продължава да използва WooCommerce админ панела по абсолютно същия начин, по който е свикнал. Добавя продукти, променя цени, качва снимки, управлява категории - всичко си е на мястото. Промяната е само отпред - клиентите виждат бърз и модерен магазин, а собственикът работи както винаги.
За ElectroBoys
ElectroBoys е онлайн магазин за електроматериали с над 6000 продукта в 150+ категории. Сайтът работеше на WordPress с WooCommerce тема, но с времето натрупаните плъгини и неоптимизираната база данни забавяха магазина критично. Решението беше пълен редизайн на фронтенда с Next.js 16, като WordPress остана само като headless бекенд. Собственикът продължава да управлява продуктите по същия начин от WooCommerce админ панела - без да учи нищо ново.
Мащабът на проекта
Снимки от сайта
Начална страница
Посетителят веднага вижда какво предлага магазинът - 6000+ продукта, категории, търсачка и навигация с Mega Menu.
Предизвикателството: Редизайн без прекъсване
Редизайнът на действащ магазин с хиляди продукти и активни клиенти изискваше внимателно планиране:
6000+ продукта трябваше да работят безпроблемно
Магазинът има над 6000 продукта в 150+ категории с 3 нива на вложеност. Целият каталог трябваше да се зарежда бързо, да се филтрира и търси без забавяне - дори на мобилни устройства.
WordPress беше бавен и тежък
PageSpeed Score от 43, база данни от 660 MB и десетки плъгини, които конфликтираха помежду си. Всяко обновление рискуваше да счупи нещо. Трябваше да запазим данните, но да махнем цялата тежест.
Куриерски и платежни интеграции без плъгини
Speedy, Econt и MyPOS трябваше да работят директно от Next.js - без WP плъгини. Това означаваше да напишем всяка интеграция от нулата, включително RSA подписване за MyPOS и калкулация на доставка от двата куриера.
Нашият подход: Next.js 16 + WooCommerce Headless
Запазихме WooCommerce като бекенд за продукти и поръчки, а целият фронтенд е пренаписан на Next.js 16:
Headless архитектура - бърз фронтенд, познат бекенд
WordPress/WooCommerce остана като headless бекенд - собственикът продължава да използва WP админ панела по абсолютно същия начин. Добавя продукти, променя цени, качва снимки - всичко както е свикнал, без да учи нищо ново. Но фронтендът е изцяло на Next.js 16 с React 19 и TypeScript - Server и Client компоненти, dynamic imports, API кеширане и Suspense boundaries. Резултат: PageSpeed от 43 на 88.
Каталог за 6000+ продукта - бърз и удобен
Изградихме многостепенна категорийна навигация с Mega Menu на 3 нива, търсене по име и SKU с автодовършване, филтриране по цена и атрибути, grid/list изглед и пагинация. Wishlist с localStorage и slide-out количка. Всичко работи бързо дори с хиляди продукти.
Доставка и плащания - от нулата, без плъгини
Написахме интеграции със Speedy и Econt директно от Next.js - търсене на градове, избор на офис или адрес и автоматична калкулация на цената. MyPOS плащания с RSA подписване, Apple Pay, Google Pay, наложен платеж и банков превод. Многостъпков чекаут с потвърждение и имейл нотификации.
Потребителски акаунти и имейл система
Custom authentication с JWT, Google и Facebook OAuth, имейл верификация и password reset. Имейл система с Resend за потвърждение на поръчки (клиент + админ) и автоматичен reminder за ревю 7 дни след доставка чрез cron job. Без WP login и без SMTP плъгини.
SEO оптимизация от нулата
Динамични title/meta description, JSON-LD structured data (Product, Organization, CollectionPage, WebSite + SearchAction), Open Graph и Twitter Cards на всички страници. Canonical URLs, noindex на филтрирани страници, динамичен sitemap.xml, 25+ категорийни SEO текстове и 23 редиректа от стария WordPress сайт.
Какво включва магазинът
Изградихме пълноценна e-commerce платформа с всичко необходимо за продажба на електроматериали онлайн.
За клиента на магазина
- ✓Разглежда 6000+ продукта с галерия, технически спецификации и ревюта
- ✓Навигира през 150+ категории с Mega Menu на 3 нива
- ✓Търси по име и SKU с автодовършване
- ✓Филтрира по цена и атрибути, сортира и сменя изглед (grid/list)
- ✓Запазва любими продукти в wishlist
Количка и поръчка
- ✓Slide-out количка с промяна на количества без презареждане
- ✓Многостъпков чекаут: данни, доставка, плащане, потвърждение
- ✓Безплатна доставка над 150 евро
- ✓Цени в лева и евро с пълна българска локализация
- ✓Регистрация, Google и Facebook вход, история на поръчки
Доставка и плащания
Интегрирахме двата водещи куриера в България и пълна платежна система - без WP плъгини, директно от Next.js.
Speedy
Търсене на градове, избор на офис или адрес и автоматична калкулация на цената за доставка.
Econt
Търсене на градове, избор на офис или адрес и автоматична калкулация на цената за доставка.
MyPOS плащания
Кредитни/дебитни карти с RSA подписване, Apple Pay, Google Pay, наложен платеж и банков превод. Sandbox и production режими.
8 външни интеграции
Свързахме сайта с 8 външни системи - всяка написана от нулата, без WP плъгини.
Потребителски акаунти
- ●Регистрация с имейл верификация
- ●Вход с Google и Facebook акаунт
- ●Профил, запазени адреси и история на поръчки
- ●Забравена парола с reset линк
- ●Rate limiting на login и register за защита от атаки
Имейл система (Resend)
- ●Потвърждение на поръчка до клиент и админ
- ●Имейл верификация и password reset
- ●Автоматичен reminder за ревю 7 дни след доставка (cron job)
- ●HTML шаблони с inline стилове
Система за ревюта
5-звездна система
Рейтинг с визуална оценка на всеки продукт
Верифицирани клиенти
Token-based верификация - само реални купувачи
Автоматичен reminder
Cron job изпраща покана за ревю 7 дни след доставка
SEO оптимизация
Оптимизирахме магазина от нулата за Google - всяка страница, всеки продукт, всяка категория.
Динамични мета данни
Автоматично генерирани title и meta description с ключови думи от атрибутите на всеки продукт и категория.
JSON-LD структурирани данни
Product, Organization, CollectionPage, WebSite + SearchAction - за да показва Google рейтинг и цени директно в резултатите.
Open Graph + Twitter Cards
На всички страници - за красиво споделяне в социални мрежи и месинджъри.
Без дублирано съдържание
Canonical URLs, noindex на филтрирани страници, robots.txt и динамичен sitemap.xml.
25+ категорийни SEO текстове
Уникално съдържание за всяка основна категория, оптимизирано за класиране в Google.
URL rewrites
Кирилица към латиница за чисти URL-и, плюс 23 редиректа от стария WordPress сайт.
Производителност
- ✓Server/Client component разделение
- ✓Dynamic imports (CartDrawer, CookieConsent, MegaMenu)
- ✓Next.js Image оптимизация за бързи снимки
- ✓API кеширане (300s - 7200s по ендпойнт)
- ✓Suspense boundaries и error boundaries
Аналитика и GDPR
- ✓Google Analytics 4 с Consent Mode v2 (GDPR)
- ✓E-commerce tracking: product views, add to cart, checkout, purchase
- ✓Проследяване на търсения и категорийни impressions
- ✓Cookie consent банер с пълно GDPR съответствие
- ✓Protected routes и middleware за сигурност
Резултат от Google PageSpeed Insights
След редизайна PageSpeed скорът скочи от 43 на 88 - подобрение с над 100%. Ето реалните данни преди и след.
Преди: WordPress
След: Next.js 16
Google PageSpeed Insights е безплатен инструмент на Google, който измерва скоростта и качеството на уебсайтове. Резултат над 90 се счита за отличен. При магазин с 6000+ продукта и тежки изображения, резултат от 88 е много добър.
Резултатът: Модерен магазин без ограниченията на WordPress
ElectroBoys вече работи на Next.js 16 с PageSpeed 88 (от 43), база данни от 70 MB (от 660 MB) и нула WP плъгини. Целият фронтенд е пренаписан от нулата - 406 файла, 34 страници, 34 API ендпойнта и 26 компонента. 6000+ продукта в 150+ категории се зареждат бързо, филтрират и търсят без забавяне. 8 външни интеграции работят директно от Next.js, без зависимости от трети страни. Собственикът продължава да управлява продуктите от познатия WP админ панел - без промяна в работния процес.
Технологичен стек
Какво включваше редизайнът
- ✓Пълен редизайн на UI/UX с Tailwind CSS (mobile-first)
- ✓Пренаписване на целия чекаут (multi-step)
- ✓Speedy и Econt интеграции от Next.js, без WP плъгини
- ✓MyPOS плащания с RSA подписване, без WP плъгин
- ✓Custom authentication (JWT, Google/Facebook OAuth)
- ✓Имейл система с Resend, без WP SMTP плъгини
- ✓23 URL редиректа от стари WordPress URL-и
- ✓URL rewrites за кирилица към латиница
- ✓SEO от нулата: JSON-LD, OG tags, sitemap, robots.txt
- ✓GA4 Consent Mode v2 без плъгин
Премахнати са десетки WP плъгини - цялата логика е в custom код.