Модернизация интернет-магазина iPoint

iPoint — один из крупнейших магазинов по продаже техники Apple в Новосибирске с филиалом в Москве.

Основная цель — успеть провести обновление сайта к старту продаж нового iPhone.

Задачи:

1. Обновить Laravel до актуальной версии.

2. Перевести проект на PHP 8.3.

3. Обновить административную часть Laravel Nova.

4. Сверстать сайт по макетам в Figma, подготовленным клиентом.

5. Интегрировать верстку на Nuxt (Vue.js).

6. Настроить API для корректного взаимодействия фронтенда и бэкенда.

Работа над проектом велась сжатые сроки. Чтобы успеть, мы запараллелили часть этапов и выстроили четкий процесс.

Основная сложность заключалась в том, что нужно было перепрыгнуть сразу через несколько крупных версий Laravel и Nova, из-за чего многие модули и кастомные компоненты перестали быть совместимы с новой архитектурой. Это потребовало глубокой переработки кода и фактически пересборки части функционала с нуля.

Первый этап проходил на стороне заказчика — нам необходимо было в кратчайшие сроки получить готовые дизайн-макеты. Это стало отправной точкой для дальнейшей работы. После получения дизайна приступили к верстке. Было два варианта:

1. Сверстать сайт в том же подходе, что и старый.

2. Перейти на стек Vue.js.

Проанализировав сроки, поняли, что оба решения займут примерно одинаковое время. Мы выбрали Vue.js, так как это современный фреймворк, который обеспечивает динамичность и отзывчивость интерфейса, делает сайт удобнее для пользователей и упрощает его дальнейшую поддержку. Такой подход избавит клиента от необходимости переделывать сайт в ближайшем будущем.

За годы эксплуатации стек технологий заметно устарел. Для корректной работы обновленных Laravel и PHP приобрели новый виртуальный сервер с актуальной ОС.

Обновили фреймворк Laravel — с версии 7.10 до 12.0. Такой скачок охватил несколько крупных релизов подряд, каждое изменение приносило особенности, связанные с синтаксисом языка и с внутренними механизмами фреймворка. Чтобы привести архитектуру к современным стандартам, развернули проект на новом сервере с актуальной ОС и поддержкой PHP 8.3, часть библиотек заменили аналогами и переработали отдельные участки кода.

После переноса проекта возникла проблема несовместимости баз данных: структуры старой и новой версии имели расхождения. Таблицы пришлось вручную обновлять и подстраивать под новую версию Laravel.

Отдельным вызовом стала административная панель Nova: вместо версии 3.0 проекту требовалась уже 5.0, архитектура которой радикально отличалась от прежней. Кастомные компоненты, встроенные в админку и критически важные для бизнеса, оказались несовместимы с новой версией. Чтобы сохранить функциональность, мы фактически пересобрали их с нуля — заново описали скрипты, стили, шаблоны интерфейсов и логику интеграции.

В результате проект получил современную архитектуру админки, которая облегчает подключение новых модулей и расширение функционала.

На этапе анализа система выглядела стандартной: каталог, карточки товаров, корзина. Но при отладке обнаружились особенности работы каталога.

1. Сложная структура каталога: “дерево” категорий формировалось динамически в административной панели, а страницы привязывались к этому “дереву”. В результате возникали ошибки отображения фильтров и тегов — часть из них применялась некорректно или терялась при навигации. Мы переработали бизнес-логику API: учли связи между категориями и страницами, обеспечив корректное построение фильтров и стабильную работу каталога.

2. В старом дизайне при выборе характеристик (например, цвета телефона) отображались фотографии моделей. В новом варианте использовались цветовые индикаторы. Мы доработали админку так, чтобы можно было указывать hex-код цвета, который автоматически подтягивался в карточку товара.

Чтобы при запуске не возникало некорректного отображения, мы сделали так, чтобы одновременно работали оба варианта: там, где цвет ещё не заполнен — использовались старые фотографии, а где указан hex-код — отображался новый индикатор. Параллельно внесли изменения и в старый, и в новый сайт, чтобы к моменту запуска редизайна в большинстве товаров цвета уже были настроены.

1. Уложились в сроки, сайт обновлен к старту продаж нового iPhone.

2. Сохранили логику: корзина, каталог, админка и управление функционалом.

3. Обновили технический стек, который позволит развивать проект без дополнительных затрат долгое время.

4. Сделали административную часть современной и удобной.

5. Сохранили SEO-настройки, чтобы избежать просадки в индексации и сохранить позиции сайта в поисковых системах.