Viewer: просмотр товара
Показ 3D-модели и её внешнего вида. Подходит, когда важно показать товар с разных сторон, не предоставляя редактирование принта.
Интеграция с интернет-магазином - от дизайна до заказа
Встройте Alter Product на свой сайт: WordPress + WooCommerce или API
Добавьте на свой сайт 3D-просмотр, выбор вариантов и персонализацию товаров. Покупатель рассматривает товар, выбирает параметры и создаёт дизайн в вашем магазине, а вы управляете ассортиментом и заказами в своей системе.
Используйте плагин для WordPress с установленным WooCommerce, чтобы выполнить настройку без написания кода интеграции. Если у вас собственный сайт или магазин, свяжите встроенные инструменты с бэкендом и корзиной через Public API и события postMessage.
Иллюстрации показывают реальный интерфейс из записей и панели плагина. Названия кнопок на кадрах английские; внешний вид инструмента зависит от настроек магазина.
Два пути к магазину с персонализацией
Один дизайн товара можно подготовить для просмотра, настройки параметров или редактирования принта. Выбирайте способ подключения к магазину с учётом вашего сайта и объёма разработки.
Плагин или собственная интеграция?
Плагин предоставляет готовую поддержку WordPress и WooCommerce. API позволяет самостоятельно подключить другую платформу, headless-приложение или существующую систему заказов.
| Область | WordPress + WooCommerce | Собственная система через API |
|---|---|---|
| Запуск | Установка плагина и мастер подключения в панели WordPress. | Реализация подключения на бэкенде и встраивания на сайте. |
| Товары и варианты | Привязка дизайна к товару WooCommerce и синхронизация вариантов. | Связь идентификаторов товаров и опций с данными своего магазина. |
| Корзина и заказы | Готовая обработка конфигурации, дизайна покупателя и превью в WooCommerce. | Обработка событий встроенного инструмента и синхронизация заказов в своей системе. |
| Файлы и ресурсы | Локальная библиотека, дизайны и файлы заказов на сервере WordPress. | Хранение и доступ к данным согласно выбранному режиму интеграции. Для собственного хранилища нужно реализовать его поддержку на своей стороне. |
Какой инструмент предложить покупателю?
Выбирайте инструмент под действия покупателя на сайте. Дизайн и правила персонализации заранее подготавливаются в Designer.
Configurator: выбор варианта
Выбор подготовленных параметров товара, например размера, цвета или материала. Покупатель видит изменения на модели и передаёт конфигурацию в корзину.
Customizer: создание собственного принта
Персонализация с помощью доступных инструментов, изображений, текстов и шаблонов. Сохранённый дизайн покупателя связывается с позицией корзины или заказа.
Designer: подготовка ассортимента
Рабочая область владельца магазина. Здесь вы готовите композицию, варианты, области печати и настройки инструментов для покупателей. Административное редактирование отделено от использования магазина.
WordPress + WooCommerce: от установки до готового товара
Alter Product предлагает плагин для WordPress. Для интеграции магазина требуется установленный и активный WooCommerce. Обычная настройка выполняется в панели без собственной реализации API и корзины.
Требования: WordPress, WooCommerce, HTTPS и план Business
Чтобы встроить Alter Product на свой сайт, нужна активная подписка Business или более высокий план с этой функцией. Это относится и к плагину WordPress + WooCommerce, и к собственной интеграции через API. Планы Personal FREE и Personal не включают встраивание в ваш магазин.
Для плагина подготовьте WordPress с установленным и активным WooCommerce и аккаунт Alter Product. Хранение файлов на своём хостинге не заменяет обязательную подписку: Alter Product по-прежнему предоставляет приложение и разрешает его запуск.
- Запустите магазин по HTTPS с действующим сертификатом SSL/TLS для его домена. Это необходимо для корректной работы встроенных инструментов на публичном сайте.
- Включите удобные постоянные ссылки WordPress согласно инструкции по установке.
- Предусмотрите место на хостинге для моделей, изображений, дизайнов и файлов заказов. Библиотека магазина использует ресурсы вашего сервера.
Зачем нужны HTTPS и сертификат SSL/TLS?
Alter Product работает на странице магазина во встроенном iframe. Если страница не обеспечивает безопасный контекст, браузеры ограничивают некоторые функции приложения. HTTPS шифрует соединение, а действующий сертификат позволяет браузеру проверить домен.
Браузер проверяет и страницу, в которую встроен iframe. Поэтому одного HTTPS-адреса приложения Alter Product недостаточно, если магазин работает по HTTP. HTTPS должен использоваться и на вашей странице с инструментом. Это следует из правил безопасности браузеров для встроенных приложений.
- Включите сертификат SSL/TLS у хостинг-провайдера и убедитесь, что он действителен для домена магазина.
- Укажите HTTPS в адресах сайта WordPress и домене интеграции. Включите перенаправление с HTTP на HTTPS.
- Откройте страницу товара по HTTPS и проверьте, нет ли предупреждений о сертификате или ресурсах, загружаемых по HTTP.
Подключите магазин через Auto Connect
Автоматическое подключение проведёт вас через авторизацию аккаунта Alter Product и настройку магазина. При этом не нужно вручную переносить ключи API.
- В WordPress откройте «Плагины → Добавить новый», найдите Alter Product, установите и активируйте плагин.
- Откройте панель Alter Product и выберите Auto Connect. Войдите в нужный аккаунт Alter Product, проверьте магазин и подтвердите подключение.
- Вернитесь в WordPress. Выберите стартовую модель и скачайте необходимые ресурсы. Дождитесь завершения загрузки и проверки готовности.
- Проверьте созданные страницы инструментов и настройки отображения, затем переходите к подготовке товара.
Привяжите дизайн и синхронизируйте варианты
В редакторе товара WooCommerce откройте вкладку Alter Product. Создайте новый дизайн или выберите существующий, затем откройте Designer. Настройте принт, доступные опции и области печати для этого товара.
- Для вариативного товара подготовьте атрибуты, например размеры, и соответствующие варианты WooCommerce.
- В Designer используйте Sync variants, чтобы связать опции дизайна с вариантами товара. Проверьте также значения по умолчанию, которые не являются атрибутами варианта в WooCommerce.
- Сохраните дизайн и товар. Выберите инструмент для отображения на странице и способ его открытия.
- Проверьте результат на странице товара: выберите несколько вариантов, создайте дизайн и перейдите в корзину.
Ваша библиотека на сервере WordPress
Модели, дизайны, изображения и файлы заказов хранятся на хостинге вашего WordPress. Локально добавленные ресурсы служат вашему магазину и не становятся из-за этого частью публичной библиотеки Alter Product для других магазинов.
Что хранится локально?
Плагин сохраняет файлы моделей, библиотек, дизайнов, мокапов и заказов в хранилище WordPress. Данные проектов генератора и их ревизий также записываются в базу данных этой установки.
Можно добавлять свои материалы и импортировать выбранные ресурсы из Alter Product. После скачивания используется локальная копия. Импорт, проверка обновлений и загрузка новых версий выполняются отдельно.
| Раздел панели | Что в нём делать |
|---|---|
| Ресурсы | Управлять моделями, изображениями, шаблонами, фонами, логотипами, текстурами, окружениями и другими ресурсами. Способы добавления зависят от типа ресурса. |
| Генератор моделей | Создавать локальные проекты на основе шаблонов и работать с моделями, связанными с генератором. |
| Дизайны товаров / Designer | Создавать или импортировать дизайн, редактировать его и привязывать к товару магазина. |
| Заказы WooCommerce | Использовать сохранённые дизайны покупателей, превью и файлы для выполнения заказа. |
Локальные файлы и встроенное приложение Alter Product
Ресурсы хранятся у вас, а интерфейс инструментов загружается из Alter Product в iframe. Сервис Alter Product проверяет доступ аккаунта, план и сессии, а также предоставляет каталог для импорта. Для интеграции требуется подключение к этому сервису.
При резервном копировании сохраняйте базу данных, каталог файлов, а также ключи и соли WordPress, необходимые для чтения зашифрованных данных плагина. Так вы сможете восстановить не только видимые изображения, но и данные для дальнейшей работы.
Персонализация на сайте вашего бренда
Инструмент можно встроить в карточку товара или отдельную страницу WordPress. Покупатель остаётся в процессе покупки вашего магазина, а WooCommerce обслуживает корзину и заказ.
Карточка товара, страница инструмента или блок
Выберите способ отображения под структуру магазина: инструмент на странице товара, кнопку перехода на отдельную страницу или встраивание через доступные блоки и шорткод. Viewer, Configurator и Customizer выполняют разные задачи, поэтому необязательно предлагать их все одновременно.
- Разместите Viewer там, где покупатель должен рассмотреть модель товара.
- Используйте Configurator для продажи подготовленных вариантов и опций.
- Выбирайте Customizer, если покупатель должен добавить надпись, изображение или изменить композицию принта.
Свои фоны, логотип и язык интерфейса
Адаптируйте показ товара под свой бренд. В плагине можно управлять локальными фонами, логотипами и внешним видом встроенных инструментов. Доступность отдельных опций зависит от плана.
- Фон сцены, цвета интерфейса и подготовленный вид дизайна помогают сохранить единый стиль магазина.
- Приложение и плагин поддерживают 22 языка. Язык панели WordPress задаётся для пользователя, а язык сайта - в настройках сайта.
- Названия товаров, тексты принтов и описания предложений готовятся на языках покупателей. Поддержка языка интерфейса не означает автоматического перевода содержимого магазина.
От дизайна покупателя к позиции заказа
Покупатель выбирает вариант и выполняет персонализацию. Плагин связывает конфигурацию и сохранённый дизайн с позицией корзины, а затем заказа WooCommerce. Доступные мокапы помогают распознать заказанный принт.
- Покупатель открывает товар или назначенный инструмент и выбирает опции.
- При персонализации он сохраняет дизайн и добавляет товар в корзину.
- В корзине он проверяет товар, конфигурацию и доступное превью дизайна, затем проходит оформление заказа WooCommerce.
- Владелец открывает сохранённый дизайн в панели заказа и готовит его выполнение.
Выполнение заказов, POD и необязательный AI
Подключение магазина к 3D-инструментам - начало процесса. Из готового дизайна можно скачать файлы для собственного производства или воспользоваться интеграцией плагина с сервисом печати по требованию.
Подключите Printify или Printful
В настройках плагина подключите выбранного поставщика. Затем сопоставьте товар, варианты и места печати с его ассортиментом, подготовьте файлы и отправьте заказ на выполнение из WooCommerce.
- Подберите области печати и формат файлов под конкретный товар и поставщика.
- Проверьте созданные файлы и вариант заказа перед отправкой в производство.
- Обновляйте статусы заказов и данные отправлений через плагин.
- Для собственного производства скачайте PDF, SVG или PNG согласно возможностям дизайна и настройкам экспорта.
AI для подготовки изображений в панели владельца
Можно настроить собственное подключение к AI-провайдеру и использовать доступные функции генерации или улучшения изображений при работе над дизайном. Запросы плагина идут из WordPress к выбранному провайдеру и оплачиваются через ваш аккаунт у него.
Сессии встраивания: срок действия и расход лимита
Сессия - временное право открыть определённый инструмент в магазине. Она помогает безопасно предоставлять товары покупателям и учитывается в месячном лимите сессий встраивания. Это не то же самое, что один клик, уникальный посетитель или заказ.
Как долго действует ключ сессии?
При запуске встроенного инструмента интеграция получает краткосрочный токен, то есть ключ сессии. Постоянные учётные данные остаются на сервере. Покупателю не нужно копировать ключи или входить в аккаунт владельца Alter Product.
В текущей реализации токен по умолчанию действует 15 минут. Сервер может задать другой срок, поэтому интеграция использует срок действия полученной сессии. Повторное использование токена не продлевает его. Для следующей авторизации после истечения срока нужна новая сессия.
Расходует ли обновление страницы новую сессию?
Это зависит от инструмента и наличия подходящей действующей сессии. Плагин не использует одну общую сессию для всех посетителей и товаров. Ниже описано его текущее поведение.
| Ситуация | Что происходит с сессией? | Влияние на лимит |
|---|---|---|
| Первое открытие инструмента без подходящей сессии | Интеграция запрашивает новый токен для данного инструмента и контекста товара. | Успешная выдача нового токена расходует одну сессию. |
| Вращение модели, смена цвета или редактирование текста в открытом инструменте | Работа выполняется в рамках уже запущенной сессии. | Сами по себе эти действия не означают выдачи новых токенов. |
| Полное обновление страницы с Viewer или Configurator | После перезагрузки страницы плагин обычно получает новый токен. Память сессий этих инструментов не сохраняется между полными обновлениями. | Следующая успешная выдача токена расходует ещё одну сессию. |
| Обновление Customizer в той же вкладке | Customizer может повторно использовать сохранённую сессию, если она соответствует магазину, товару, заказу и режиму работы и не приближается к истечению срока. | Повторное использование не увеличивает счётчик. Если условия не выполнены, нужна новая сессия. |
| Истечение токена, другой товар или смена рабочего контекста | Может потребоваться новая авторизация и новый токен. Возможность повторного использования зависит и от доступности хранилища браузера. | Новый выданный токен увеличивает расход лимита. |
Как учитывать сессии в расходах и плане магазина?
Счётчик растёт при успешной выдаче нового токена через API. Использование уже выданного действующего токена не является новой выдачей. Поэтому при выборе плана учитывайте запуски инструментов, обновления и повторные открытия, а не только число заказов или посетителей.
Инструменты, встроенные в рамках одного магазина, используют общий месячный лимит сессий. Счётчик ведётся отдельно для каждого магазина по календарным месяцам UTC. Новые сессии встроенного Designer и Генератора моделей в панели WordPress тоже увеличивают его. Простое скачивание доступной модели через API импорта не открывает сессию редактора.
По достижении лимита система отказывает в выдаче новых сессий. Это ограничение использования в рамках подписки; текущий объём пакета смотрите в своём плане.
- Запускайте инструмент там, где покупатель действительно им пользуется. Для списка товаров можно использовать обычные фотографии и готовые мокапы.
- В собственной API-интеграции не создавайте новую сессию при каждом рендере компонента или изменении опции. Используйте действующую сессию только в соответствующем ей контексте.
- Планируйте лимит отдельно от стоимости выполнения POD и генерации AI, которая связана с использованием внешних сервисов.
Собственная интеграция через API
У вас собственный магазин, headless-приложение или система заказов? Создайте свой слой интеграции с Public API Alter Product и встройте нужные инструменты на сайт. Этот путь требует разработки.
Подключите Alter Product на своей технологии
Public API использует HTTP-запросы и данные JSON. Поэтому интеграцию можно написать на языке и в среде вашего бэкенда. Для встраивания Alter Product не нужно переделывать магазин на WordPress.
Ниже приведены примеры технологий для серверного подключения. В каждой реализуются одинаковые этапы: авторизация API, создание сессии инструмента и связь товаров, корзины и заказов со своей системой.
JavaScript и TypeScript / Node.js
Добавьте интеграцию в бэкенд Node.js, например Express или NestJS. Вызывайте API с сервера и предоставляйте фронтенду данные для встраивания инструмента.
Python
Подключите существующее приложение Python, например Django или FastAPI, к товарам, сессиям и заказам Alter Product через HTTP-запросы.
PHP
Используйте PHP в собственном магазине или приложении, например Laravel или Symfony. Свою API-интеграцию можно создать независимо от готового плагина WordPress.
Java
Интегрируйте инструменты с Java-бэкендом, например Spring, и свяжите данные дизайнов со своим каталогом товаров и обработкой заказов.
C# / .NET
Используйте .NET-бэкенд, например ASP.NET Core, для авторизации, создания сессий и передачи данных в существующие процессы магазина.
Go
Реализуйте подключение в сервисе на Go. Стандартный HTTP-клиент позволяет обрабатывать API-запросы и ответы JSON.
Ruby
Добавьте интеграцию в приложение Ruby, например Ruby on Rails, и используйте собственную модель товаров, корзины и выполнения заказов.
Rust
Подключите Rust-бэкенд через HTTP-клиент и обработку JSON. Сессии и события покупок можно встроить в архитектуру ваших сервисов.
Фронтенд под ваш сайт
В браузере можно использовать React, Vue, Angular или обычные HTML и JavaScript. TypeScript тоже подходит для реализации обмена сообщениями. Страница встраивает iframe, обрабатывает события postMessage и связывается с вашим бэкендом.
Фронтенд отвечает за внешний вид страницы и реакции корзины, а бэкенд - за аутентифицированные вызовы Public API. Во фреймворках, объединяющих оба слоя, например Next.js, обработку постоянных ключей и создание сессий размещайте только на серверной стороне.
Вы можете сохранить собственное оформление заказа, платёжную систему, CMS и процесс выполнения заказов. При внедрении эти элементы связываются с данными дизайна и событиями выбранного инструмента Alter Product.
Что предоставляет API, а что готовит ваша система?
Alter Product предоставляет 3D-инструменты, данные дизайнов и механизмы сессий. Ваш бэкенд связывает их с товарами, аккаунтами покупателей, корзиной и обработкой заказов. Можно создать промежуточные эндпоинты для своего фронтенда, не раскрывая данные доступа Alter Product в браузере.
| Слой | Задача |
|---|---|
| Фронтенд вашего сайта | Показывает iframe, отвечает на сообщения инструмента и обновляет интерфейс магазина. |
| Ваш бэкенд | Аутентифицирует запросы к Public API, создаёт сессии, контролирует доступ покупателя и сохраняет связи с собственной корзиной или заказами. |
| Public API Alter Product | Предоставляет функции подключения, товаров, привязок инструментов, заказов и доступа к файлам и ресурсам. |
| Встроенный инструмент | Показывает модель и позволяет настраивать или персонализировать товар согласно режиму и подготовленному дизайну. |
От авторизации до собственной корзины
Сначала запустите подключение и сессию встраивания для одного товара. Затем добавьте обработку конфигурации, сохранения дизайна и заказов согласно выбранному инструменту.
- Настройте данные доступа API и домен магазина. Проверьте подключение запросом с бэкенда.
- Свяжите товар своего магазина с дизайном и нужным инструментом Alter Product.
- Встройте iframe и обработайте начало обмена сообщениями. Создайте краткосрочную сессию на сервере и передайте её инструменту согласно документации.
- Обработайте событие конфигурации или персонализации и сохраните необходимые данные в своей корзине.
- После покупки синхронизируйте заказ, необходимые данные и файлы со своей системой выполнения заказов.
Перейдите к инструкции своего инструмента
В инструкциях по встраиванию приведены параметры и примеры. Разделы postMessage объясняют обмен со страницей, а документация API описывает операции бэкенда.
Проверьте весь путь до начала продаж
Тестируйте товар как покупатель: от открытия страницы до дизайна в заказе. Выполните проверку на компьютере и телефоне, в том числе без входа в административную панель.
Краткий контрольный список
Подготовив один товар, пройдите весь процесс. Только после этого повторяйте проверенную настройку для других позиций каталога.
- Проверьте активность плана Business или выше и работу домена по HTTPS с корректным сертификатом SSL/TLS.
- Проверьте видимость страниц инструментов, привязку дизайна и выбранный способ встраивания.
- Выберите разные размеры и цвета. Сравните опции дизайна с вариантами и ценами магазина.
- Добавьте текст или изображение в Customizer, сохраните дизайн и добавьте его в корзину. Проверьте также редактирование уже добавленной персонализации.
- Проверьте превью, количество и конфигурацию в корзине и после оформления тестового заказа.
- Откройте дизайн из заказа и проверьте созданные файлы печати. Если используете POD, протестируйте также сопоставление поставщика и контролируемую отправку заказа на выполнение.
- Проверьте доступную покупателю библиотеку, язык, брендинг и поведение страницы на телефоне.