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

Клиент

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

Проблема

Компания на рынке уже несколько лет, на момент обращения к нам был действующий интернет-магазин на устаревшей версии Laravel, который не соответствовал современным требованиям.

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

Задачи

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

1. Обновить Laravel до актуальной версии.
2. Перевести проект на PHP 8.3.
3. Обновить административную часть Laravel Nova.
4. Сверстать сайт по макетам в Figma, подготовленным клиентом.
5. Интегрировать верстку на Nuxt (Vue.js).
6. Настроить API для корректного взаимодействия фронтенда и бэкенда.

Реализация

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

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

1. Переход на Vue.js

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

• Сверстать сайт в том же подходе, что и старый.
• Перейти на стек Vue.js.

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

2. Обновление серверной части

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

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

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

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

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

3. Настройка API

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

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

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

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

Итоги проекта

• Уложились в сроки, сайт обновлен к старту продаж нового iPhone.
• Сохранили логику: корзина, каталог, админка и управление функционалом.
• Обновили технический стек, который позволит развивать проект без дополнительных затрат долгое время.
• Сделали административную часть современной и удобной.
• Сохранили SEO-настройки, чтобы избежать просадки в индексации и сохранить позиции сайта в поисковых системах.

Стек технологий

Nuxt, Vue.js, Laravel, PHP 8.3, Nova.