Генератор товаров с принтами

Интернет-магазин создан на основе собственного шаблонного решения для UMI.CMS. Основной акцент в работе над проектом ставился на создании внутреннего модуля для массовой генерации товаров с наложением уникальных дизайнерских принтов.

  • UMI.CMS ShopUMI.CMS Shop
  • Готовое решение LeShopГотовое решение LeShop
  • Личный кабинетЛичный кабинет

» индивидуальный внутрений модуль для UMI.CMS для создания товаров
» создание изображений товара из трёх слоёв с попиксельной обработкой цветов и прозрачности
» массовая генерация изображений без ограничения по количеству
» автоматическое создание товаров с набором характеристик для фильтрации товаров: стоимость, цвет, размер

1_crystalshow_catalog

Цели и задачи проекта

На момент обращения в нашу студию у клиента была потребность создать недорогой интернет-магазин с уникальным функционалом массовой генерации товаров с наложением принтов, при этом результаты генерации, а именно получившиеся фотографии товаров с принтами, должны были быть максимально приближены к отфотографированному товару в реальных условиях, то есть с наложением теней. Также была поставлена задача максимально упростить техническую составляющую процесса и сэкономить время на обработке однотипных процессов, то есть минимум фотошопа.

Решение

Ввиду того, что бюджет стартапа был ограничен, и основные силы должны были быть направлены на реализацию нестандартного функционала, было принято решение взять за основу шаблонное решение нашей студии, Интернет-магазин одежды и аксессуаров Le Shop, и на его основе разработать внутренний модуль для UMI.CMS, который мог бы генерировать товары в большом количестве и встраивать эти товары в структуру каталога.

Идея модуля состояла в том, что имеются два этапа формирования товара. На первом этапе создаются основания.

2_bases

Создание основания

Основание — это результат обработки фотографии определённой модели одежды, например, футболки, по сути это маска. Для её формирования фотография будущего основания загружается в систему и проходит специальную попиксельную обработку. В данном случае фотография должна иметь особые параметры: белая майка на прозрачном фоне в формате png. Прозрачные пиксели в процессе обработка заменяются на белые, а белые пиксели вычитаются, оставляя только серые полупрозрачные пиксели. На выходе получается маска с белым фоном, внутри которого прозрачная область, имеющая очертания футболки, со всеми тенями, которые были на исходном изображении.

Помимо основного изображения-маски на странице создания основания имеется возможность загрузить дополнительные изображения, которые помогают обрамить принт в виде любой геометрической фигуры, а также загрузить отдельные изображения для накладываемых поверх мелких деталей одежды, например, верёвочки, кармашки и др. Основанию также можно задать название и описание модели, набор размеров, цветов и место расположения в каталоге товаров.

3_filled_base

Процесс наложения принтов

На втором этапе происходит непосредственно генерация товаров на основе всех созданных ранее оснований, которые отображаются в левой части страницы. Пользователь может загрузить свои принты в систему, они сохраняются и выводятся в правой части страницы. Пользователь модуля может выбрать необходимое изображение-принт и просмотреть все основания с ним, с возможностью откорректировать положение принта для каждой модели, чтобы он выгодно выглядел, для этого создана отдельная кнопка "Запомнить расположение наложения для данного товара". На этом этапе можно задать название и описание принта, чтобы эта информация отобразилась на карточке товара. Также можно выбрать название категории и подкатегории, к которым может быть отнесён принт, для дальнейшей фильтрации по каталогу.

4_product creation

Обзор всех товаров

На итоговом этапе создания товаров выдаются все товары по всем основаниям с наложенным принтом. Имеются следующие возможности: снять галочку "Сохранить данный товар", задать стоимость товара, задать цвет для отображения в каталоге по умолчанию, чтобы все изображения на странице каталога выглядели максимально красочно и разнообразно.

5_save product

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

По окончании процесса генерации все новые созданные товары можно увидеть в модуле Каталог UMI.CMS и при необходимости задать дополнительные параметры, например, сделать пометку, что товар является новинкой или на него распространяются акционные предложения.

Результаты

Проект находится только в начале пути своего развития. Но благодаря модулю Генерации товаров процесс заполнения идёт очень быстро. Клиенту не приходится много времени проводить в графических программах и вручную накладывать тени, чтобы сделать фотографии одежды максимально реалистичными. Этот процесс автоматизирован, а главное даёт ожидаемый результат быстро, нет возможности допустить ошибку и все фотографии одной модели на 100% имеют одинаковые параметры. Модуль позволяет быстро запустить проект с большим количеством номенклатуры, а также максимально просто обновлять товарный ряд в процессе его работы.