Получайте товары, связывайте их с инструментами и создавайте безопасные сессии встраивания Viewer, Configurator и Customizer.
В примерах используются серверная вспомогательная функция alterFetch и заголовки authHeaders из руководства по подключению. Храните API-ключи только на сервере.
Подключение, авторизация и вспомогательная функция alterFetch Конечные точки товаров возвращают дизайны магазина, доступные для встраивания в Viewer, Configurator или Customizer.
Параметр Обязательно Подробности nameнетПоиск по имени товара/дизайна. customizerнетtrue или false. offsetнетПо умолчанию 0. Должно быть >= 0. limitнетПо умолчанию 9, максимум 50. order_byнетid, name или created_at. directionнетASC или DESC.
Пример запроса (fetch)
const params = new URLSearchParams ( {
limit : '20' ,
offset : '0' ,
name : 't-shirt' ,
customizer : 'true' ,
order_by : 'created_at' ,
direction : 'DESC'
} ) ;
const products = await alterFetch ( ` /products? ${ params . toString ( ) } ` ) ;
const product = await alterFetch ( '/products/381' ) ; Пример ответа
{
"products" : {
"items" : [
{
"id" : 381 ,
"name" : "Men's T-Shirt" ,
"createdAt" : "2026-01-03T23:55:05.000Z" ,
"productId" : 4 ,
"media" : {
"img" : {
"big" : "https://alterproduct.com/public-api/v1/file/public/products/4/big.png" ,
"medium" : "https://alterproduct.com/public-api/v1/file/public/products/4/medium.png" ,
"small" : "https://alterproduct.com/public-api/v1/file/public/products/4/small.png"
} ,
"mockups" : [ ]
} ,
"storefrontProduct" : {
"id" : 89 ,
"idUserDesign" : 381 ,
"shareAccess" : "public" ,
"isCustomizer" : 1
} ,
"runtimeBindings" : [
{
"id" : 42 ,
"runtimeType" : "customizer" ,
"status" : "active" ,
"externalProductId" : "wc_123"
}
] ,
"embeddable" : {
"viewer" : true ,
"configurator" : true ,
"customizer" : true
}
}
] ,
"total" : 1
}
} Привязки среды выполнения связывают товары внешних магазинов с дизайнами Alter Product и типами инструментов. Они преимущественно используются в интеграциях WordPress/WooCommerce и расширенных серверных системах магазинов.
Параметр Обязательно Подробности designIdнетID дизайна Alter Product, принадлежащего магазину. externalProductIdда, для синхронизацииID внешнего товара, например ID товара WooCommerce. runtimeTypeда, для синхронизацииviewer, configurator или customizer. statusнетdraft, active, inactive, archived или legacy_active. legacyStorefrontProductIdнетНеобязательный ID прежнего сопоставления. legacyBindingMetaнетНеобязательные метаданные JSON, например manifestHash.
Пример запроса (fetch)
await alterFetch ( '/runtime-bindings/sync-from-wordpress' , {
method : 'POST' ,
body : JSON . stringify ( {
bindings : [
{
externalProductId : 'wc_123' ,
runtimeType : 'customizer' ,
status : 'active' ,
designId : 381 ,
legacyBindingMeta : {
manifestHash : 'a3b1...'
}
}
]
} )
} ) ;
await alterFetch ( '/runtime-bindings/42' , {
method : 'PATCH' ,
body : JSON . stringify ( {
status : 'inactive'
} )
} ) ;
await alterFetch ( '/runtime-bindings/42/activate' , { method : 'POST' } ) ;
await alterFetch ( '/runtime-bindings/42/deactivate' , { method : 'POST' } ) ; wordpress_local
await alterFetch ( '/runtime-bindings/sync-from-wordpress' , {
method : 'POST' ,
body : JSON . stringify ( {
bindings : [
{
externalProductId : 'wc_123' ,
runtimeType : 'viewer' ,
status : 'active' ,
externalDesign : {
externalDesignKey : 'wp-design-381' ,
productId : 4 ,
title : 'WooCommerce local design' ,
manifestUrl : 'https://yourstore.com/wp-content/uploads/alter/381/manifest.json' ,
assetBaseUrl : 'https://yourstore.com/wp-content/uploads/alter/381/' ,
manifestHash : 'a3b1...' ,
sourceMeta : {
pluginVersion : '1.2.0'
}
}
}
]
} )
} ) ; Пример ответа
{
"message" : "runtimeBinding.syncCompleted" ,
"runtimeBindings" : [
{
"id" : 42 ,
"designId" : 381 ,
"externalProductId" : "wc_123" ,
"runtimeType" : "customizer" ,
"status" : "active"
}
]
} Создайте краткосрочный токен встраивания на сервере, передайте его в iframe или среду выполнения, затем позвольте среде вызвать инициализацию с токеном Bearer.
Параметр Обязательно Подробности runtimeBindingIdрекомендуетсяПредпочтительный идентификатор активных привязок среды выполнения. toolобязательно без runtimeBindingIddesigner | viewer | configurator | customizer | model-generator toolIdtool: model-generatorПоложительный числовой ID локального проекта генератора, а не его UUID или ID товара WooCommerce. originдаOrigin страницы со встроенным инструментом, например https://yourstore.com. designIdодин идентификаторID дизайна Alter Product. Не сочетайте с orderId. orderIdодин идентификаторID заказа Customizer. Допустим только для customizer. cartKey + cartModeнетКонтекст корзины только для Customizer. cartMode имеет значение view или edit.
Пример запроса (fetch)
const session = await alterFetch ( '/embed/session' , {
method : 'POST' ,
headers : {
'x-alter-client-fingerprint' : '9f1b7a5e4b3c2d1f9f1b7a5e4b3c2d1f'
} ,
body : JSON . stringify ( {
runtimeBindingId : 42 ,
origin : 'https://yourstore.com'
} )
} ) ;
const bootstrapResponse = await fetch ( 'https://alterproduct.com/public-api/v1/runtime/bootstrap' , {
method : 'GET' ,
headers : {
Authorization : ` Bearer ${ session . token } `
}
} ) ;
const bootstrap = await bootstrapResponse . json ( ) ;
console . log ( { session , bootstrap } ) ; Примечания
await alterFetch ( '/embed/session' , {
method : 'POST' ,
body : JSON . stringify ( {
tool : 'customizer' ,
origin : 'https://yourstore.com' ,
orderId : 123
} )
} ) ;
await alterFetch ( '/embed/session' , {
method : 'POST' ,
body : JSON . stringify ( {
tool : 'viewer' ,
origin : 'https://yourstore.com' ,
designId : 381
} )
} ) ; Пример ответа
{
"token" : "eyJhbGciOiJIUzI1NiIsImtpZCI6IjEifQ..." ,
"expiresIn" : 900 ,
"kid" : "1" ,
"mode" : "design" ,
"runtimeBindingId" : 42 ,
"runtimeType" : "customizer"
} Runtime bootstrap
{
"runtimeBindingId" : 42 ,
"designId" : 381 ,
"productId" : "wc_123" ,
"runtimeType" : "customizer" ,
"storageMode" : "wordpress_local" ,
"manifestUrl" : "https://yourstore.com/wp-content/uploads/alter/381/manifest.json" ,
"assetBaseUrl" : "https://yourstore.com/wp-content/uploads/alter/381/" ,
"manifestHash" : "a3b1..." ,
"planCapabilities" : {
"viewer" : true ,
"configurator" : true ,
"customizer" : true
} ,
"cartKey" : null ,
"cartMode" : null ,
"orderId" : null
}