Сайт магазинов техники Apple

Новый сайт restore: — современный, быстрый и качественный проект на базе 1С-Битрикс с микросервисной структурой. За 5 лет сотрудничества Progressive Media и restore: было выполнено более 500 задач. Делимся подробным кейсом.

Сайт re-store.ru является высоконагруженным e-commerce проектом, ежедневно в интернет-магазине продаются десятки различных товаров. Для обслуживания и обработки такого большого количества данных требуются ресурсы, особое внимание к грамотной архитектуре и масштабируемости сайта.

В условиях сложной архитектуры проекта, обусловленной большим количеством SKU, сложной логикой и требованием аптайма проекта 24*7, бизнес нуждался в надежной проактивной команде разработчиков, готовых поддерживать высокие стандарты, умеющих оперативно вести разработку и работать в параллель с другими командами.

В процессе погружения в задачи проекта обозначены проблемы:

- неудовлетворительное время загрузки страниц из-за комплексности используемых алгоритмов для расчета и отображения информации;

- децентрализация функционала и элементов верстки по коду.

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

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

Изначально проект клиента существовал в формате мультисайта с нахождением нескольких сайтов на одном ядре. При развитии сайта re-store.ru бизнес-процессы остались похожими на другие проекты мультисайта, но были расхождения в деталях, что порождало увеличение количества условий в коде. Также значительно увеличивалось количество разработчиков, работающих над проектом.

Было принято решение об отделении сайта re-store.ru от мультисайта. Это позволило решить проблему с масштабируемостью проекта: исчезла необходимость тестировать каждый сайт мультисайта перед релизом задачи, стало возможным изолированное последовательное обновление ядра Битрикс. Разделение баз сайтов также сказалось на улучшении производительности.

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

Внедрение фреймворка позволило переиспользовать набор независимых модулей и компонентов, быстро и эффективно проектировать, разрабатывать, масштабировать и поддерживать проект.

На проекте существовало два раздельных шаблона на двух доменах - для десктоп версии сайта и для мобильной, что порождало необходимость дублирования правок. Также в результате постоянного развития интерфейсов сайта использование Jquery перестало себя оправдывать: внесение правок в файлы размером в 1500 строк занимало много времени и порождало ошибки. Для решения данных трудностей интерфейсы сайта были приведены в соответствие с UI-kit, для обеспечения максимальной скорости и простоты изменения часто встречающихся элементов на сайте, спроектирован, организован и осуществлен “бесшовный” постраничный переход на Vue js фреймворк.

Внедрение Vue.js происходило одновременно с рефакторингом текущего кода, что положительно отразилось на общей производительности сайта.

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

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

При разработке строго соблюдались новые брейкпойнты, при которых происходит переключение адаптивов, также они должны быть сквозными для всех элементов, типовых блоков и всех страниц сайта.

Новые брейкпоинты:

320 px — от 0 до 413 рх;

414 px — от 414 до 767 рх;

768 px — от 768 до 1023 рх;

1024 px — от 1024 до 1279 рх;

1440 px — от 1280 и далее;

1920 px — соответствует адаптиву 1440 рх, но некоторые блоки тянутся на всю ширину вьюпорта.

Сервис Forward

Сервис Forward позволяет за минимальную сумму в месяц пользоваться новинками продукции restore: покупатель пользуется устройством, постепенно выкупая его. После всех платежей остаточная стоимость составит около 40% от первоначальной, и у покупателя появляется возможность обменять прежнее устройство на новую модель бесплатно, не выплачивая остаток.

Yandex Pay

В eCommerce большое значение имеет простой и удобный процесс покупки. Благодаря интеграции с Yandex Pay любой пользователь «Яндекса», который привязал карту к профилю, может совершать покупки через кнопку «ЯPay» без ручного ввода реквизитов карты.

Yandex ID

Благодаря интеграции с Yandex ID вход на сайт restore: стал проще: пользователю нет необходимости заводить новую учетную запись и заполнять дополнительные формы. API Яндекс ID позволяет автоматически подтягивать данные пользователя из его аккаунта в Яндексе.

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

Dynamic Yield

Dynamic Yield позволяет сегментировать пользователей интернет-магазина и персонализировать контент на сайте. Реализация товарных рекомендаций основана на собранных данных о каждом пользователе.

Потенциальный покупатель продукции restore: видит несколько рекомендательных виджетов с наиболее релевантными товарами из разных категорий.

Для реализации нового сайта restore: команда РМ переработала структуру и навигацию интернет-магазина. Целью было сократить путь пользователя до целевого действия, улучшить юзабилити сайта и обеспечить удобный и быстрый поиск нужной информации для разной ЦА.

В рамках работ над сайтом:

- полностью обновлена верстка новой титульной страницы, листинга каталога и карточки товара;

- реализован единый компонент каталога, который корректно отображает статус товара на всех страницах;

- созданы разводящие страницы для каталога по разделам: iPhone, Mac, iPad, Watch, Аксессуары и Гаджеты;

- реализована единая система размеров изображений;

- реализована возможность выбрать опцию кредитования/рассрочки при оформлении заказа в корзине;

- созданы новые страницы - Новинки, Распродажа, Акции и Хиты для поддержки маркетинговых мероприятий;

- разработан раздел “Покупай со Сбербанком”, в котором можно увидеть каталог товаров, доступных для покупки с помощью программ рассрочек Сбербанка;

- по новому дизайну переработана верстка выбора магазина на карте для опции самовывоза товара;

- добавлен функционал оформления электронных подарочных сертификатов на сайте: “отправить самому себе”, «несколько получателей», оформление заказа от имени юридического лица с последующей оплатой по счету;

- страницы «Пункты выдачи» и «Постаматы» объединены на карте для удобства взаимодействия;

- реализован раздел “Сервисные центры”, с механизмом пошаговой записи в сервисный центр.

Новый сайт restore: — современный, быстрый и качественный проект на базе 1С-Битрикс с микросервисной структурой.

Усовершенствование архитектуры делает интернет-магазин простым в использовании и сопровождении, сокращает время на разработку и поддержку проекта. Использование Vue js и Symfony фреймворков позволяет выстроить стандартизированную работу, которую можно автоматизировать.

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

Реализованный проект также позволил:

- оптимизировать путь пользователя: сделать его максимально удобным и понятным, упростить процесс совершения покупки;

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

- увеличить динамику роста заказов и положительных отзывов покупателей.

В настоящее время команда продолжает развитие сайта re-store.ru