culturavision.com
Вёрстка на Tailwind CSS и Alpine.js, интегрированная в уже существующий сайт сети оптик на 1С-Битрикс — без миграции и переделки бэкенда.
Что было сделано
- Вёрстка на Tailwind CSSАдаптивная вёрстка каталога, карточек товаров и промо-блоков поверх шаблонов 1С-Битрикс.
- Интерактивность на Alpine.jsЛёгкие интерактивные компоненты — карусель акций, меню каталога, фильтр салонов — без тяжёлого фреймворка.
- Карта салонов с фильтром по городамИнтерактивная карта с 26 салонами в 11 городах области, переключение города без перезагрузки.
- Интеграция без переделки бэкендаНовая вёрстка встроена в существующие шаблоны 1С-Битрикс — каталог, корзина и личный кабинет продолжили работать как прежде.
Технологии
Результат
Сеть оптик получила современный адаптивный интерфейс — от промо-карусели на главной до карты салонов по 11 городам — без миграции каталога, корзины и личного кабинета с 1С-Битрикс. Бэкенд и вся бизнес-логика магазина остались прежними.
Tailwind и Alpine.js поверх шаблонов 1С-Битрикс
Сайт уже работал на 1С-Битрикс: каталог, корзина, личный кабинет — всё завязано на нативные компоненты и их AJAX-логику. Нужно было сделать вёрстку на Tailwind CSS и интерактивность на Alpine.js, не сломав ни одной работающей ранее функции магазина.
Встроил Tailwind в структуру шаблонов Битрикс (шаблон сайта + шаблоны компонентов), а Alpine.js-компоненты изолировал так, чтобы они не конфликтовали с собственным JS Битрикса и его AJAX-перезагрузкой каталога, корзины и избранного.
Карта салонов по 11 городам области
У сети 26 салонов в Екатеринбурге и ещё 10 городах области. Нужна была карта, где переключение города фильтрует метки без перезагрузки страницы — а список городов и адресов приходит из данных Битрикса.
Собрал фильтр городов на Alpine.js: переключение вкладки мгновенно перерисовывает метки на карте по тем же данным салонов, что уже хранятся в Битриксе — без отдельного API и дублирования справочника.
Нужен похожий сайт или сервис?
Расскажите о задаче — оценю сроки и стоимость, отвечу в течение дня.
Другие проекты
Дистрибьютор медицинского оборудования Inomed
Интеграция вёрстки в MODX для официального дистрибьютора медицинского оборудования Inomed: каталог продукции по категориям и области применения с глубокой технической структурой и якорной навигацией.
Гостиница «Фатима» в Казани
Перенос сайта гостиницы с WordPress на конструкторе Elementor на Hugo и Decap CMS ради максимальной скорости: новая вёрстка с нуля, исправлены все ошибки, 92 балла Google PageSpeed за производительность и 100 за SEO.
Интернет-магазин сценического оборудования MAINFX
Вёрстка, интегрированная с Laravel, для интернет-магазина сценического оборудования: карточки товаров с техническими таблицами и аксессуарами, страница фирменного приложения ShotControl App и полностью двуязычный интерфейс.