- Заказчик
- iPoint — один из крупнейших магазинов по продаже техники Apple в Новосибирске с филиалом в Москве.
- Задача
- Основная цель — успеть провести обновление сайта к старту продаж нового iPhone.
Проблема
Компания на рынке уже несколько лет, на момент обращения к нам был действующий интернет-магазин на устаревшей версии Laravel, который не соответствовал современным требованиям.
- Визуально устаревший дизайн неудобный для пользователей.
- В технической части старые версии Laravel и PHP не поддерживали новые возможности и плагины.
- Ограниченный функционал в административной панели.
Задачи
Основная цель — успеть провести обновление сайта к старту продаж нового iPhone.
- Обновить Laravel до актуальной версии.
- Перевести проект на PHP 8.3.
- Обновить административную часть Laravel Nova.
- Сверстать сайт по макетам в Figma, подготовленным клиентом.
- Интегрировать верстку на Nuxt (Vue.js).
- Настроить API для корректного взаимодействия фронтенда и бэкенда.
Реализация
Работа над проектом велась сжатые сроки. Чтобы успеть, мы запараллелили часть этапов и выстроили четкий процесс.
Основная сложность заключалась в том, что нужно было перепрыгнуть сразу через несколько крупных версий Laravel и Nova, из-за чего многие модули и кастомные компоненты перестали быть совместимы с новой архитектурой. Это потребовало глубокой переработки кода и фактически пересборки части функционала с нуля.
1. Получение дизайна от клиента и верстка макетов
Первый этап проходил на стороне заказчика — нам необходимо было в кратчайшие сроки получить готовые дизайн-макеты. Это стало отправной точкой для дальнейшей работы. После получения дизайна приступили к верстке. Было два варианта:
- Сверстать сайт в том же подходе, что и старый.
- Перейти на стек Vue.js.
Проанализировав сроки, поняли, что оба решения займут примерно одинаковое время. Мы выбрали Vue.js, так как это современный фреймворк, который обеспечивает динамичность и отзывчивость интерфейса, делает сайт удобнее для пользователей и упрощает его дальнейшую поддержку. Такой подход избавит клиента от необходимости переделывать сайт в ближайшем будущем.
2. Обновление серверной части
За годы эксплуатации стек технологий заметно устарел. Для корректной работы обновленных Laravel и PHP приобрели новый виртуальный сервер с актуальной ОС.
Обновили фреймворк Laravel — с версии 7.10 до 12.0. Такой скачок охватил несколько крупных релизов подряд, каждое изменение приносило особенности, связанные с синтаксисом языка и с внутренними механизмами фреймворка. Чтобы привести архитектуру к современным стандартам, развернули проект на новом сервере с актуальной ОС и поддержкой PHP 8.3, часть библиотек заменили аналогами и переработали отдельные участки кода.
После переноса проекта возникла проблема несовместимости баз данных: структуры старой и новой версии имели расхождения. Таблицы пришлось вручную обновлять и подстраивать под новую версию Laravel.
Отдельным вызовом стала административная панель Nova: вместо версии 3.0 проекту требовалась уже 5.0, архитектура которой радикально отличалась от прежней. Кастомные компоненты, встроенные в админку и критически важные для бизнеса, оказались несовместимы с новой версией. Чтобы сохранить функциональность, мы фактически пересобрали их с нуля — заново описали скрипты, стили, шаблоны интерфейсов и логику интеграции.
В результате проект получил современную архитектуру админки, которая облегчает подключение новых модулей и расширение функционала.
4. Настройка API
На этапе анализа система выглядела стандартной: каталог, карточки товаров, корзина. Но при отладке обнаружились особенности работы каталога.
1. Сложная структура каталога: “дерево” категорий формировалось динамически в административной панели, а страницы привязывались к этому “дереву”. В результате возникали ошибки отображения фильтров и тегов — часть из них применялась некорректно или терялась при навигации. Мы переработали бизнес-логику API: учли связи между категориями и страницами, обеспечив корректное построение фильтров и стабильную работу каталога.
2. В старом дизайне при выборе характеристик (например, цвета телефона) отображались фотографии моделей. В новом варианте использовались цветовые индикаторы. Мы доработали админку так, чтобы можно было указывать hex-код цвета, который автоматически подтягивался в карточку товара.
Чтобы при запуске не возникало некорректного отображения, мы сделали так, чтобы одновременно работали оба варианта: там, где цвет ещё не заполнен — использовались старые фотографии, а где указан hex-код — отображался новый индикатор. Параллельно внесли изменения и в старый, и в новый сайт, чтобы к моменту запуска редизайна в большинстве товаров цвета уже были настроены.
Итоги проекта
- Уложились в сроки, сайт обновлен к старту продаж нового iPhone.
- Сохранили логику: корзина, каталог, админка и управление функционалом.
- Обновилитехнический стек, который позволит развивать проект без дополнительных затрат долгое время.
- Сделали административную часть современной и удобной.
- Сохранили SEO-настройки, чтобы избежать просадки в индексации и сохранить позиции сайта в поисковых системах
Получите максимум практического контента и реальных кейсов по разработке e-commerce решений и автоматизации бизнес-процессов на нашем сайте: https://webest.ru/
