Англоязычная версия crowdgames.us
crowdgames.us
Дизайн, верстка и подключение англоязычной версии магазина настольных игр crowdgames.ru на InSales. Адаптивная верстка, Liquid, модули фильтров, упрощенный заказ, мультиязычность — отдельная витрина под англоговорящую аудиторию, а не автоперевод русской темы.
Задача
У магазина настольных игр crowdgames.ru уже была работающая витрина на InSales, но и интерфейс, и весь контент были русскоязычными. Клиенту понадобилась отдельная англоязычная версия — crowdgames.us — чтобы показать каталог англоговорящей аудитории: коллекционерам, покупателям зарубежных изданий, международному рынку настолок. Формулировка была «под ключ»: не просто прогнать тексты через переводчик в существующей теме, а сделать дизайн, верстку и подключение полноценного магазина.
Основная сложность тут не в переводе, а в самой платформе. InSales заточен под русскоязычный рынок, и полноценной мультиязычности из коробки в нём нет — язык интерфейса, шаблоны и структуру каталога приходится разводить руками. Поэтому англоязычную витрину мы собирали как самостоятельный проект: свой дизайн под латиницу, отдельная адаптивная верстка на Liquid и переработанные модули магазина, а не языковой слой поверх русской темы. Так проще держать контроль над каждой надписью и не ловить русские строки там, где их быть не должно.
Что сделали
Работу вели в три захода: сначала макеты, потом верстка, потом настройка магазинных модулей InSales. Дизайн рисовали сразу под три брейкпоинта, чтобы поведение блоков на промежуточных ширинах не приходилось додумывать на этапе верстки.
- Дизайн в трёх разрешениях экрана — макеты десктопа, планшета и мобайла с проработкой раскладки каталога и карточки товара под каждую ширину.
- Адаптивная верстка на Liquid — шаблоны собирали на родном шаблонизаторе InSales, с медиазапросами вместо отдельной мобильной версии: одна верстка на все устройства.
- Настройка модуля фильтров — фильтрация каталога настолок по параметрам, чтобы покупатель отсеивал игры по нужным характеристикам, а не листал весь список подряд.
- Модуль упрощённого заказа — оформление в один шаг, без лишних полей и обязательной регистрации, чтобы сократить путь от карточки товара до оплаты.
- Расширенное меню (Custom menu) — многоуровневая навигация по разделам каталога вместо стандартного плоского меню InSales.
- Виджет Instagram — лента магазина прямо на витрине: живой контент и социальное подтверждение без ручного обновления блока.
- Мультиязычность — весь интерфейс, служебные надписи и элементы витрины переведены на английский, включая те строки, что InSales по умолчанию отдаёт по-русски.
Отдельно про мультиязычность на InSales: привычного «переключателя языка» платформа не даёт, поэтому английские строки зашиваются в шаблоны и настройки магазина напрямую. Любую служебную надпись — от кнопки «в корзину» до текстов на странице оформления заказа — приходится ловить и переводить вручную в Liquid, иначе она вылезет по-русски посреди англоязычной витрины. Именно эта ручная работа и отличает настоящую англоязычную версию от машинного перевода поверх русской темы.
Технологии
Стек — стандартный для кастомной темы InSales, без тяжёлых фреймворков. Разметку и логику вывода держали на Liquid, клиентский интерактив — на jQuery.
- Liquid — родной шаблонизатор InSales: на нём собрана вся разметка, вывод каталога и карточек, условная логика для англоязычной витрины.
- jQuery — интерактивные элементы витрины: обработчики фильтров, меню, корзины и прочего клиентского поведения.
- Слайдеры и попапы — настроены не из коробки, а под макет: баннеры на главной, быстрый просмотр и модальные окна под дизайн магазина.
- Асинхронная подгрузка изображений — обложки товаров подгружаются по мере прокрутки, чтобы каталог с большим числом картинок не тормозил первую отрисовку страницы.
Результат
Готовая англоязычная версия магазина настольных игр crowdgames.us на InSales, собранная под ключ. Адаптивная верстка на Liquid работает на десктопе, планшете и мобайле; на витрине — фильтры каталога, упрощённый заказ, расширенное меню и виджет Instagram, а интерфейс полностью переведён на английский. Магазин запущен как самостоятельная англоязычная витрина на InSales CMS, а не как перевод поверх русской темы — с отдельным дизайном под латиницу и переведёнными вручную служебными строками.