Preluați produse, asociați-le cu instrumentele și creați sesiuni sigure pentru încorporarea Viewer, Configurator și Customizer.
Exemplele folosesc funcția auxiliară alterFetch de pe server și antetele authHeaders din ghidul de conectare. Păstrați cheile API exclusiv pe server.
Conectare, autorizare și funcția auxiliară alterFetch Endpointurile produselor returnează designuri ale magazinului care pot fi încorporate ca experiențe Viewer, Configurator sau Customizer.
Parametru Obligatoriu Detalii namenuCaută după numele produsului/designului. customizernutrue sau false. offsetnuImplicit 0. Trebuie să fie >= 0. limitnuImplicit 9, maximum 50. order_bynuid, name sau created_at. directionnuASC sau DESC.
Exemplu de solicitare (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' ) ; Exemplu de răspuns
{
"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
}
} Asocierile de execuție conectează produse comerciale externe la designuri și tipuri de execuție Alter Product. Sunt folosite în principal de integrările WordPress/WooCommerce și de backendurile avansate ale magazinelor.
Parametru Obligatoriu Detalii designIdnuID-ul designului Alter Product care aparține magazinului. externalProductIdda pentru sincronizareID-ul produsului extern, de exemplu un ID de produs WooCommerce. runtimeTypeda pentru sincronizareviewer, configurator sau customizer. statusnudraft, active, inactive, archived sau legacy_active. legacyStorefrontProductIdnuID opțional al mapării vechi. legacyBindingMetanuMetadate JSON opționale, de exemplu manifestHash.
Exemplu de solicitare (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'
}
}
}
]
} )
} ) ; Exemplu de răspuns
{
"message" : "runtimeBinding.syncCompleted" ,
"runtimeBindings" : [
{
"id" : 42 ,
"designId" : 381 ,
"externalProductId" : "wc_123" ,
"runtimeType" : "customizer" ,
"status" : "active"
}
]
} Creează pe server un token de încorporare de scurtă durată, transmite-l către iframe/mediul de execuție, apoi permite mediului să apeleze bootstrap cu un token Bearer.
Parametru Obligatoriu Detalii runtimeBindingIdrecomandatIdentificator preferat pentru asocierile de execuție active. toolobligatoriu fără runtimeBindingIddesigner | viewer | configurator | customizer | model-generator toolIdtool: model-generatorID numeric pozitiv al proiectului local al generatorului, nu UUID-ul său sau ID-ul produsului WooCommerce. origindaOriginea în care este afișat conținutul încorporat, de exemplu https://yourstore.com. designIdun identificatorID-ul designului Alter Product. Nu combina cu orderId. orderIdun identificatorID-ul comenzii Customizer. Valabil doar pentru customizer. cartKey + cartModenuContext de coș exclusiv pentru Customizer. cartMode este view sau edit.
Exemplu de solicitare (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 } ) ; Note
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
} )
} ) ; Exemplu de răspuns
{
"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
}