Написать конструктор для кастомайзинга
Обновлено: 02.05.2024
Конструктор продуктов - полезные инструменты для покупок, которые позволяют потенциальным клиентам «строить» идеальную версию продукта, комбинируя различные варианты. В конце этого процесса пользователю обычно дается действие, чтобы выполнить: сохранить сборку, поделиться ею или купить продукт напрямую.
Создание такого веб-компонента с нуля - не легкая работа. Поэтому мы решили продемонстрировать простой в настройке шаблон, который поможет вам реализовать свой собственный продукт!
Создание структуры
Структура HTML состоит из трех основных элементов: заголовок header.main для верхней навигации, div.cd-builder для шагов конструктора и footer.cd-builder-footer для нижней части конструктора и Обзор выбранного продукта.
Что касается шагов конструктора, только первая может быть найдена в файле index.html . Другие шаги зависят от модели, которую пользователь выбирает и загружается с помощью Ajax (Подробнее в разделе «Обработка событий»).
Добавление стиля
CSS, используемый для этого ресурса, довольно прост, вы можете скачать демонстрационный файл, чтобы взглянуть на весь код.
Только одно примечание о стиле основных элементов: шаг div.cd-builder используются для обертывания разных шагов конструктра; Его элементы списка находятся в абсолютном положении, имеют высоту и ширину 100%, являются одними поверх других и скрыты по умолчанию; Класс .active затем используется для выявления активного шага.
Обработка событий
Чтобы реализовать конструктор продукта, мы создали объект ProductBuilder и использовали функцию bindEvents для прикрепления обработчиков событий к соответствующим элементам.
Когда пользователь выбирает одну из моделей, вызов Ajax заботится о загрузке нового контента для выбранной модели; Атрибут модели данных добавляется к каждому элементу списка внутри списка ul.models и равен имени файла HTML, из которого новый контент должен быть извлечен (modelType в коде ниже).
Каждый элемент списка имеет также цену данных, которая является ценой выбранной модели. Атрибуты цены данных также добавляются к другим параметрам внутри конструктора (цвета, принадлежности) и используются для обновления окончательной цены продукта.
Что касается возможных настроек продукта, мы использовали класс .options-list для таргетинга списков опций, среди которых пользователь может выбрать (в наших примерных моделях и аксессуарах). Когда пользователь выбирает опцию, функция updateListOptions () заботится об обновлении цены продукта (и содержимого, если модель выбрана).
Опция класса .js-option добавляется к каждому элементу списка внутри списка ul.options и используется для обнаружения события. Если параметры являются эксклюзивными (например, с моделями, поскольку вы можете выбрать только один вариант), добавляется второй класс .js-radio .
Вместо этого используется настраиваемый класс .cd-product-customizer , например, Colors, где пользователь может выбрать опцию и увидеть изменения в продукте. Когда выбран один из этих параметров, функция customizeModel () следит за обновлением предварительного просмотра продукта и цены на продукт (при необходимости).
Индивидуализация – то, к чему стремятся модники и независимые покупатели, и то, от чего так далек масс-маркет. Купить вещь, единственную в своём роде и соответствующую вашим требованиям и размерам, очень сложно – торговые марки пока не научились читать мысли, но некоторые из них уже ориентированы на пожелания клиентов
Как можно персонализировать свой гардероб? Какие компании помогут отразить ваш внутренний мир в одежде и доставить вещь в Россию?
Онлайн-конструкторы одежды и обуви
Онлайн-сервисы предоставляют пользователю возможность самому выбрать материалы и цвет заказываемой одежды или обуви, то есть определить дизайн вещи в рамках готовых, сконструированных на производстве лекал и фасонов.
Самым известным онлайн-конструктором одежды стал bespoke-сервис тренчей Burberry. В рамках проекта покупателю доступны 12 миллионов вариантов тренчей. Пользователь может выбрать цвет, крой, фурнитуру пальто и вписать свои инициалы.
Кастомайзинг – переработка или декорирование одежды, обуви или аксессуаров в соответствии с индивидуальными пожеланиями клиента
Джинсы - классические, скинни, клёш - можно кастомизировать на сайте www.indicustom.com. Сервис позволяет детально описать изгибы собственного тела для создания идеально "сидящих" на фигуре джинсов.
Обувь и аксессуары тоже доступны для самостоятельного дизайна. Онлайн-сервисом по созданию туфель прославился в России австралийский бренд Shoes of Prey. Индивидуальную пару туфель можно выстроить на основе семи базовых моделей, меняя форму каблука и носка, добавляя декоративные элементы и застёжку.
Собственно кастомайзинг
Кастомайзинг подразумевает изменение, полный перекрой или декорирование уже готового изделия. Добавление заплаток и дырок на джинсы, укорачивание и удлинение штанин и рукавов, художественные надрезы, замена пуговиц и нанесение принтов и рисунков - самое простое, что можно сделать с надоевшей, устаревшей или запачкавшейся вещью.
Имеющие хоть какие-то навыки конструирования и шитья идут дальше - распарывают старую и делают новую вещь, подгоняют по фигуре, заменяют детали другой тканью. Рупором кастомайзинга в рунете является сайт Вторая Улица и его организатор Саша Саночки, которая уже много лет занимается переделками и вторичным использованием одежды.
Фото: TeenVogue USA
Конечно, чаще всего мы украшаем свою одежду декоративными булавками, значками и принтами. Студии принтов сегодня предлагают широкие возможности перенесения эскизов на ткань - шелкография (прямая печать), непрямая печать и печать термопленкой. Любая фотография, надпись или герой мультфильма могут оказаться на футболке, сумке, куртке и толстовке, а хорошие студии имеют и свои коллекции рисунков.
Наиболее интересными компаниями зарекомендовали себя студии Ямайка (Москва, Петербург) и Art-t-shok. У Ямайки есть онлайн-конструктор, основанный на собственной коллекции. Бланковые вещи, на которых печатается принт, уже есть в наличии - серые и черные толстовки и разноцветные футболки. Арт-т-шок, помимо футболок и толстовок, имеет бланковые майки и сумки, и главное - большой список художников, создающих для студии оригинальные принты.
Футболки Art-t-shok
Пошив вещей на заказ
Собственно bespoke и есть пошив одежды на заказ. Частным пошивом занимаются ателье, начинающие и уже опытные дизайнеры. Для клиента изготовливается индивидуальная выкройка, а процесс пошива сопровождается примерками и подгоном по фигуре.
Можно выбрать модель платья или костюма уже из имеющихся в ателье лекал, но изменить детали, добавить карманы, разрезы, вышивку, подобрать нужный материал и цвет. Другой вариант - придумать фасон самостоятельно, тогда модельер воплотит задумку в реальность. Bespoke поможет людям с нестандартной фигурой и тем, чьи мечты об идеальной одежде разнятся с актуальными коллекциями.
Кастомайзинг, онлайн-конструкторы и пошив одежды на заказ позволяют персонифицировать гардероб, выразить свои чувства, обозначить интересы и выделиться из толпы. Кроме того, вторичное использование одежды и обуви в случае кастомайзинга отвечает требованиям экологии - продлевает жизнь вещей. А одежда, сшитая специально для вас, будет использоваться гораздо чаще и дольше, чем купленная в спешке или на распродаже.
Фото: Iain Crawford
FEMUSE FASHION EDITOR
Используй сотни готовых шаблонов одежды для создания эскиза и технического рисунка. Добавляй цвет, принты и детали в несколько кликов.
Посмотреть инструкцию
Созданные эскизы и дизайн сохраняется в папках Гардероб и Мои Образы, с удобными фильтрами, с возможностью моментального редактирования.
По поводу самой цифровой платформы и того, что она может - я вижу большое будущее. Большой спектр инструментов внутри платформы, забота о пользователях в виде тех. поддержки через разные каналы коммуникации.
Для себя и своей любопытной аудитории я отметила "линии", они настолько универсальные, что можно с помощью них создать разный крой, а за счет этого создать своё уникальное изделие - это прямо фишечка платформы! Для меня и для профессионалов это то, что нужно. Ну, и главный плюс в том, что не нужно рисовать - есть готовые шаблоны, которые значительно экономят время.
Лайфхак! Левая панель инструментов в редакторе - это уже минимальный капсульный гардероб.
На платформе работать очень комфортно. Пару кликов и технический рисунок готов. Никогда так быстро и аккуратно не рисовала. Преимущества работы на платформе в том, что не нужно все отрисовывать самой, можно спокойно задать необходимые параметры и рисунок абсолютно любого изделия готов. Экономия времени, сил и порой нервов.
Платье+юбка, блузка+юбка и платье+брюки. Остановиться очень сложно.
Платформа довольно дружелюбна с пользователем - легко разобраться что, где и как делать. А главное - все выполняется быстро и очень просто.
Общее в впечатление от платформы - положительное.
Я использовала тарифный план FREE. Если вы производите больше 10 изделий в месяц, и вам понравилась платформа, то целесообразно купить тарифный план PRO.
Коллекции создавать действительно удобно. Если вы бренд, который производит коллекции постоянно, то эта платформа отличный вариант, однако, на мой взгляд, тарифа PRO будет не достаточно. Целесообразно выбрать тариф PREMIUM в котором есть возможность заказа отрисовки и загрузки в Конструктор одежды в количестве 5 референсов в месяц.
Из основных плюсов web-платформы можно выделить: интуитивно понятный интерфейс; удобный конструктор деталей, что позволяет быстро отрисовать изделие; большое разнообразие деталей кроя; возможность наложить принт; возможно создать свой принт из различных деталей
Hooli - сервис пошива премиальной casual одежды из хлопка с собственной швейной фабрикой, который первым в мире запустил конструктор кастомных костюмов из футера.
Это не очередной онлайн-магазин наштампованных толстовок, а сервис пошива уникальных премиум вещей из футера, включая худи, джоггеры, свитшоты, шорты, рубашки, платья и др.
Hooli открыто выступает за разумное потребление. Мы шьем не для масс, а для личностей. Наша миссия – перевести людей на другой формат потребления и избавить планету от мегатонн нашитой попусту одежды.
Читать больше
Мы считаем, что лучше купить одну, но действительно нужную и подходящую именно тебе вещь. Уже сейчас мы сдаем часть остатков с производства на переработку. Если тебе близка эта идея, присоединяйся к нам!
Одень друга или подругу в Hooli. Выбери подарочную карту нужного номинала - а дальше выбор лука за получателем!
На сумму 3000 рублей получатель сможет купить любую вещь: футболку, худи, свитшот, штаны или шорты - и настроить ее под себя.
На сумму 5000 рублей твой друг соберет комбо из футболки и штанов/шорт или другой комплект с футболкой.
Подарочная карта на 7000 рублей позволит собрать целый hooliстюм на свой вкус!
видео о том, как команда Hooli ежедневно создает уникальные худи, штаны и футболки, чтобы ты и твои близкие всегда оставались в тренде, но не теряли свою индивидуальность
Hooli стал лауреатом XI ежегодной Премии «Время инноваций-2021» в рамках деловой программы России на «Экспо-2020» в Дубае.
Лучшим по мнению Экспертного совета в категории «Одежда, обувь и аксессуары» стал сервис Hooli со своей идеей делать кастомную одежду в массовом производстве.
На сумму 3000 рублей получатель сможет купить любую вещь: футболку, худи, свитшот, штаны или шорты - и настроить ее под себя.
На сумму 5000 рублей твой друг соберет комбо из футболки и штанов/шорт или другой комплект с футболкой.
Подарочная карта на 7000 рублей позволит собрать целый hooliстюм на свой вкус!
- Текстильный брак ткани
- Контролем качества выявлен дефект
- Дошивается изделие в комплекте
- Недостает информации в заказе
- Праздничные дни
- Карантинные ограничения
В настоящее время пошив изделия занимает примерно 6-10 дней. 85% изделий отшивается в эти сроки. Доступна услуга ускоренного пошива, когда изделие будет готово через 3-5 дней (+1500 рублей).
Если ты заказал (-а) комплект изделий, например hooliстюм худи с джоггерами, мы отправим его после готовности всего заказа. По ряду причин, срок работы может увеличиться (с условиями выполнения заказа ты можешь ознакомиться в договоре-оферте).
После оплаты мы пришлем подтверждение, что твой заказ принят и отправлен в производство. Посмотреть статус пошива ты можешь с помощью нашей трекинг системы (Внимание, система работает в тестовом режиме ).
Производство одежды - живой, сложный, многофакторный процесс поэтому часть заказов, к сожалению, находится в работе дольше среднего времени. Если тебе нужны изделия к четко определенной дате, пожалуйста, обратись к менеджеру - они помогут подобрать изделия из наличия.
А если ты хочешь сделать подарок близким, то лучший выбор -подарочный сертификат, чтобы они смогли выбрать для себя желаемые параметры всех изделий (у одного худи 50 000+ вариантов).
Если вы хотите стать нашим партнером, поставщиком или франчайзи, пожалуйста, заполните форму.
Создай уникальную одежду с собственным индивидуальным дизайном при помощи простого и удобного онлайн-конструктора одежды! Выберите своё изображение любого формата (jpg и png), арты и фотографии и/или надписи и напечатайте по всей поверхности одежды!
Сам себе дизайнер 3D-одежды
3D одежда с полной запечаткой 360° можно покрыть изображением 100% целиком или только символ/логотип. Вы можете подобрать цвет фона под цвет загруженного изображения, а также масштабировать и центрировать принт с 360° запечаткой. Вы можете добавить надпись – выбрать цвет, размер шрифта, центрировать текст. Слои можно переносить мышкой, чем выше слой, тем выше он будет на макете. Например, если у вас надпись будет под изображением, то он должна быть выше, чтобы ее можно было увидеть. Вы можете воплотить любою свою оригинальную идею! Печать на футболках, худи, свитшотах, поло, майках.
Как выбрать лучшее изображение?
Разрешение картинки не менее 1000x1000 пикселей, а лучше более 2500х2500px, если вы хотите разместить одиночные изображения, символы или логотипы только на лицевой стороне и 2500х5000px для полной запечатки изделий, так же если вы загрузите большое изображение более 7500px и слишком сильно его смаштабируете, то качества нанесенного изображения сильно ухудшится.
Манжеты и ворот всех изделий с обеих сторон должны быть залиты одинаковым цветом или паттерном. При размещении рисунка на рукава нужно продолжать его на оборотной части изделия, чтобы рисунок не «обрывался» посередине рукава. Обратите внимание на отсутствие четких переходов рисунка в области пройм (переходы на рукава), пояс и манжеты. В этих областях возможно несовпадение рисунка в пределах +-1-2см, что критично, в случае, если вы размещаете фото.
Макет должен быть полностью покрыт принтом/цветовым фоном. Не оставляйте части манжетов, рукавов и других частей изделий «белыми».
Предупреждение о цветопередаче - требованиями к ярким изображениям.
Цвет принта на экране монитора может отличаться от реального. Цвет изделий передан с максимальной степенью точности, допускаемой современными технологиями, которые не позволяют учитывать цветопередачу различных мониторов.
Синие, красные, голубые, фиолетовые цвета и иные наиболее яркие оттенки хуже всего интерпретируются из цветовой схемы RGB для дисплеев в CMYK используемой для печати. Откройте исходное изображение в графическом редакторе и смените режим, сначало на CMYK и после, обратно в RGB (выберите вкладку Изображение -> Режим -> CMYK или RGB), теперь ваше изображение будет напечатано в нужной цветопередаче.
Есть идея принта на одежду: футболку, худи, поло, майку или свитшот? Если вы, по какой-то причине, не можете сделать свой дизайн, но хотите, закажите принт рассказав, что хотите получить, а мы с удовольствием реализуем! И вы сможете напечатать свой рисунок и создать свой принт.
Читайте также: