Как я прокачал генератор кастомных футболок для Printloop: кейс изнутри

Недавно ко мне пришёл проект, который идеально ложится в категорию «люблю такие задачи». Printloop — сервис, где пользователи создают одежду с собственными принтами. На сайте можно загрузить изображение, посмотреть, как оно будет выглядеть на футболке, и оформить заказ.

Задача звучала так:

«У нас есть генератор, корзина, каталог — всё работает, но… не так, как хотелось бы. Нужны улучшения, новый функционал и немного магии на фронтенде».

Я люблю такие «немного магии» — и вот что из этого получилось.

---

Новый взгляд на изображения: спереди, сзади и история генераций

Первое, к чему мы прикоснулись, — это логика работы с изображениями. Пользователь должен был видеть товар и спереди, и сзади. Но существующая система не позволяла переключаться, а предварительные генерации терялись.

Теперь работает так:

• появилась кнопка «Спереди / Спина»
• при выборе «Спина» отключаются недоступные опции (например, размещение принта по центру)
• фронт отправляет корректный флаг на бэкенд
• загружаются два разных макета: отдельно перед, отдельно спина

Но самое интересное — история изображений.

Пользователь может сгенерировать несколько вариантов и листать их кнопками «Назад» и «Вперёд» — как в галерее, только внутри генератора. До 5 вариантов на каждый вид.

---

Поддержка худи: новый тип товара, новая логика

Printloop начинал с футболок, но нужны были и худи. Казалось бы, просто добавить картинку — но нет. Худи требует:

• отдельный макет
• отдельные параметры генерации
• другое расположение принтов
• другую цену
• другое название товара в корзине

Я добавил флаг «тип товара», встроил его в генератор и переработал логику формирования цены и наименования.

Теперь пользователь может выбрать: футболка или худи, и система полностью перестраивает вычисления.

---

Кастомная корзина: теперь она работает как нужно

Базовую идею заказчик прислал в виде видео с YouTube. Я взял концепцию и полностью адаптировал под продукт:

• добавил поле «Срочность» (+500 ₽)
• встроил варианты доставки
• сделал нормальную вёрстку и адаптив
• подчистил UX, чтобы корзина выглядела как часть сайта, а не инородный элемент

Теперь оформление заказа стало гораздо более логичным.

📸 [скрин корзины]

---

Редактор изображений как у Printio

Самая интересная часть — интеграция редактора. Пользователь должен уметь:

• загружать изображения
• накладывать на макет
• двигать, крутить, уменьшать, увеличивать
• использовать изображения, которые приходят с бэка

Я внедрил редактор по типу Printio — лёгкий, удобный и полностью адаптивный.

📸 [скрин редактора на товаре]

---

Новый каталог: фильтры, сортировка и поиск

Каталог был, но пользоваться им было сложно.

Мы добавили:

• сортировку по типу товара: футболка / худи
• фильтры по тематике: мемы, фильмы, аниме и т.д.
• полноценный поиск

Теперь найти нужный принт стало куда проще — и время на выбор сократилось.

📸 [скрин каталога с фильтрами]

---

Итоги

Сайт стал:

Проект был интересным и

Это как раз тот случай, когда небольшие доработки сложились в один цельный продукт.