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, протестуйте також зіставлення постачальника й контрольований процес надсилання замовлення на виконання.
- Перевірте доступну покупцю бібліотеку, мову, брендинг і поведінку сторінки на телефоні.