Usa-auto.by

Информация о проекте

First Rental — компания, предоставляющая в аренду профессиональное кино- и фотооборудование. На момент обращения у клиента был лишь прототип в Figma и понимание, что нужен полноценный сайт с каталогом товаров, корзиной, личным кабинетом и двумя языками (русский и английский). Проект стал продолжением сотрудничества: ранее студия уже делала для того же заказчика сайт USA Auto, поэтому коммуникация была выстроена на доверии и понимании специфики работы.

Цели создания сайта:

• Создать интернет-магазин на WordPress + WooCommerce для управления арендой оборудования с возможностью выбирать комплектации и количество смен.
• Обеспечить удобный каталог с фильтрацией и возможностью добавления товаров в корзину и избранное.
• Реализовать мультиязычность: русская и английская версии, причём на английском должна использоваться не полноценная копия сайта, а автоматический переводчик Google для экономии бюджета.
• Автоматизировать процесс оформления заказа, чтобы в письме-уведомлении чётко отображались выбранные опции (количество, комплектация, смены).
• Предоставить клиенту удобную админку для наполнения каталога и управления заказами, а также возможность автоматического удаления фона у главных изображений товаров.

Решение:

Проект стартовал с детального разбора макетов в Figma, которые были подготовлены дизайнером. Мы сразу определили, что ключевая сложность — каталог, где товары могут иметь несколько комплектаций и вариантов «количество смен». В WooCommerce из коробки такая гибкость отсутствует, поэтому потребовалось дорабатывать логику.

На первом этапе мы выполнили вёрстку всех страниц (главная, каталог, карточка товара, корзина, личный кабинет и др.) с учётом адаптивности. Особое внимание уделили карточке товара: для каждого товара нужно было выводить не только цену, но и поля выбора комплектации (например, набор объективов) и количества смен аренды. Разработчик Иван реализовал эту логику через кастомные поля WooCommerce, а также добавил возможность создавать товары с вариациями, где каждая вариация имеет свою цену и остаток. Это позволило клиенту управлять всеми вариантами прямо из админки.

Следующим вызовом стала корзина. Заказчик хотел, чтобы в письме-подтверждении заказа чётко выделялись выбранные комплектации и смены. Однако WooCommerce по умолчанию не поддерживает HTML-разметку в названиях вариаций. Мы нашли решение: добавили в письмо специальные символы (буллеты) перед названиями опций, чтобы визуально отделить их друг от друга. Позже, по просьбе клиента, сделали так, чтобы в письме и в корзине комплектации отображались с чётким разделением.

Отдельной темой стала мультиязычность. Изначально планировалось делать полноценную английскую версию с дублированием контента, но в процессе обсуждения выяснилось, что бюджет проекта не позволяет этого. Мы предложили альтернативу: использовать Google Translate, встроенный в сайт. Клиент согласился, и мы добавили виджет переключателя языка в шапку и мобильное меню. Единственная сложность возникла с тем, что после переноса на продакшн английская версия перестала корректно отображаться — оказалось, что остались следы от предыдущей реализации. Мы полностью отключили старую англоязычную версию и оставили только кнопку перевода Google, после чего проблема была решена.