Apple Inside

Apple Inside — магазин техники Apple в Анапе на Bitrix. Точка входа для меня — рич-контент: большие «продуктовые» страницы товаров, как у самой Apple, с видео, анимацией и вёрсткой под каждый девайс. Первую такую страницу осенью я собирал два рабочих дня: пытался разобраться, как вообще подступиться, писал начерно, переписывал. И это была страница проще тех, что делаются сейчас.

Из этой боли выросла XRC — небольшая дизайн-система под рич-контент. Базовый слой с токенами, бенто-сеткой и типографикой на clamp() лежит глобально и не трогается; всё, что специфично для страницы — цвета, градиенты, пропорции, — задаётся в одном `<style>` внутри скоупа. Поведение — автоплей видео и анимации по вьюпорту через IntersectionObserver — тоже общий слой. За счёт этого новую страницу я собираю уже за три-шесть часов, и на более сложных макетах, чем та первая.

Отдельно — как это удобно разрабатывать. Рич-контент живёт только внутри Bitrix, поэтому я поднял локальный Flask-сервер: он вставляет страницу в настоящую обёртку товара, подменяет прод-пути ассетов на локальные и держит live-reload. Ты видишь контент ровно так, как он ляжет на сайте, и правишь с горячей перезагрузкой, без прогонов на прод ради проверки.

Поверх системы выросли и отдельные фичи. Сторис в духе Instagram — свой вьюер на Swiper с вложенными свайперами, таймингом по реальной длине видео, паузой по удержанию и едиными жестами для тача и мыши. Виджет рассрочки в корзине с живым пересчётом платежа. Прозрачные видео для маков в ProRes 4444 — HEVC с Windows нормально не кодируется, пришлось разбираться с форматами.

И честно про рамки: всё это на легаси-стеке — jQuery и статика без сборщиков, внутри Bitrix. Тем и оказалось интересно: выжать систему и скорость из того, что уже есть, без модного фреймворка сверху.