Магазин Crocs и джибитсов для российской аудитории —
crocsclog.ru.
Сделано в FURAI LAB.
Проект, где платформа выбрана осознанно вместо своего кода. Tilda даёт хостинг, каталог и корзину из коробки, а всё, чего она не умеет, дописано вручную: кастомные карусели, размерная сетка внутри карточки товара, переключение цветов между отдельными товарами, бегущая строка о доставке. Ни одна из этих вещей не существует в библиотеке блоков.
У студии уже есть проект Kokoc Store — собственная витрина на Cloudflare Workers. Проблема в том, что она недоступна из России без VPN: блокировка происходит на стороне провайдеров и к самому сайту отношения не имеет. Переносить рабочий проект на другой хостинг не хотелось — он хорошо построен и обслуживает международную аудиторию.
Решение — отдельный сайт на российской платформе под российский рынок. Не миграция и не зеркало: другой домен, другой ассортимент (только Crocs и джибитсы, без Adidas), доставка СДЭК по России.
| Слой | Решение |
|---|---|
| Хостинг и CMS | Tilda |
| Каталог | Встроенный магазин Tilda, разделы и фильтры |
| Кастомный код | JS и CSS в <head> сайта + блоки T123 на страницах |
| Доставка | СДЭК, курьер до двери |
| Шапка и подвал | Отдельные страницы, назначенные глобально |
Выбор в пользу Tilda, а не VPS с самописным движком, сводился к стоимости владения: у магазина один оператор, и платформа снимает с него хостинг, резервные копии, SSL и обновления.
Размерная сетка в карточке товара. Скрипт в <head> следит за DOM через MutationObserver, находит заголовок опции «Размер» в попапе товара и добавляет рядом ссылку, открывающую модальное окно с таблицей US / EU / см. Обработчик клика останавливает всплытие события — иначе Tilda закрывает попап товара, и модалка остаётся висеть поверх каталога.
Переключение цветов между товарами. Одна модель в трёх расцветках — это три отдельных товара, потому что Tilda хеширует имена файлов изображений, и отфильтровать общую галерею по цвету нечем. Скрипт сопоставляет числовой id товара из адреса с таблицей групп и рисует над выбором размера ряд свотчей, ведущих на соседние расцветки. Товары остаются тремя страницами в индексе, покупатель видит один выбор.
Карусели коллекций. Штатных блоков-каруселей для магазина в Tilda нет — все каталожные блоки выкладывают товары сеткой. Ряд превращается в горизонтальный скролл со снапом переопределением сетки на флекс, с оговорками: у Tilda есть отдельный контейнер-скелетон с тем же классом, что и настоящий, а карточки используют колоночную вёрстку с float. И то и другое приходится снимать явно.
Плашка о доставке. На десктопе — три равные колонки с разделителями. На мобильной — непрерывная бегущая строка на CSS-анимации: пункты продублированы, лента едет на половину своей ширины и возвращается в ноль, поэтому стык не виден.
Ряды категорий. Горизонтальный скролл с прилипанием, квадратные плитки с фотографиями категорий. Отдельные наборы для каталога и для страницы коллабораций.
| Путь | Описание |
|---|---|
/ | Главная: обложка, ряды коллекций |
/crocs | Каталог: плитки категорий, SEO-блок с H1, фильтры по цене и размеру |
/collab | Коллаборации: свой ряд плиток по лицензиям |
/supermario, /popmart, /lego, /onepiece, /disney, /cocacola | Страницы отдельных коллабораций |
/jibbitz, /kids | Джибитсы и детские модели |
/delivery | Доставка: условия, четыре шага, FAQ-аккордеон |
/oferta | Публичная оферта |
/privacy | Политика обработки персональных данных |
Товары размечены разделами, страницы привязаны к разделам — один товар может лежать в нескольких сразу. Коллаборационная модель отмечается и в «Коллаборациях», и в своей линейке, поэтому попадает на обе страницы без дублирования карточки.
Размеры и цвета заведены характеристиками, наличие — по вариантам. Выбранный размер подсвечивается чёрным: правило приходится вешать и на саму кнопку, и на всё, что внутри, потому что подпись лежит во вложенном элементе.
Оформление заказа собирает адрес доставки отдельными полями и обязательную галочку согласия на обработку персональных данных. Галочка не отмечена по умолчанию: предзаполненное согласие согласием не считается. Отметка уходит вместе с заказом и служит подтверждением.
Публичная оферта описывает не розничную продажу, а услугу приобретения товара за рубежом по поручению покупателя. Отдельно — политика обработки персональных данных и уведомление об использовании cookie.
Реквизиты индивидуального предпринимателя в подвале на всех страницах.
FAQPage JSON-LD на странице доставки, текст в разметке дословно совпадает с видимымОнлайн-оплата. Сейчас заказ приходит как заявка, дальше выставляется счёт вручную — на старте это осознанный размен: сайт запускается за дни, а не за недели ожидания эквайринга. Так же создание личного кабинета покупателя.