Ürünleri alın, araçlarla ilişkilendirin ve Viewer, Configurator ile Customizer için güvenli yerleştirme oturumları oluşturun.
Örnekler, bağlantı kılavuzundaki sunucu taraflı alterFetch yardımcı fonksiyonunu ve authHeaders başlıklarını kullanır. API anahtarlarını yalnızca sunucuda saklayın.
Bağlantı, yetkilendirme ve alterFetch yardımcı fonksiyonu Ürün uç noktaları; Viewer, Configurator veya Customizer deneyimi olarak yerleştirilebilen mağaza tasarımlarını döndürür.
Parametre Gerekli Ayrıntılar namehayırÜrün/tasarım adında arama yapar. customizerhayırtrue veya false. offsethayırVarsayılan 0. >= 0 olmalıdır. limithayırVarsayılan 9, en fazla 50. order_byhayırid, name veya created_at. directionhayırASC veya DESC.
Örnek istek (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' ) ; Örnek yanıt
{
"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
}
} Çalışma zamanı bağları, dış e-ticaret ürünlerini Alter Product tasarımlarıyla ve çalışma zamanı türleriyle ilişkilendirir. Başlıca WordPress/WooCommerce entegrasyonlarında ve gelişmiş mağaza backend’lerinde kullanılır.
Parametre Gerekli Ayrıntılar designIdhayırMağazaya ait Alter Product tasarım kimliği. externalProductIdeşitleme için evetDış ürün kimliği; örneğin WooCommerce ürün kimliği. runtimeTypeeşitleme için evetviewer, configurator veya customizer. statushayırdraft, active, inactive, archived veya legacy_active. legacyStorefrontProductIdhayırİsteğe bağlı eski eşleştirme kimliği. legacyBindingMetahayırİsteğe bağlı JSON meta verisi; örneğin manifestHash.
Örnek istek (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'
}
}
}
]
} )
} ) ; Örnek yanıt
{
"message" : "runtimeBinding.syncCompleted" ,
"runtimeBindings" : [
{
"id" : 42 ,
"designId" : 381 ,
"externalProductId" : "wc_123" ,
"runtimeType" : "customizer" ,
"status" : "active"
}
]
} Sunucunuzda kısa ömürlü yerleştirme belirteci oluşturup iframe/çalışma zamanına iletin; ardından çalışma zamanı bootstrap çağrısını Bearer belirteciyle yapsın.
Parametre Gerekli Ayrıntılar runtimeBindingIdönerilirEtkin çalışma zamanı bağları için tercih edilen tanımlayıcı. toolruntimeBindingId yoksa gereklidesigner | viewer | configurator | customizer | model-generator toolIdtool: model-generatorYerel oluşturucu projesinin pozitif sayısal kimliği; projenin UUID’si veya WooCommerce ürün kimliği değildir. originevetYerleştirmenin gösterildiği origin; örneğin https://yourstore.com. designIdbir tanımlayıcıAlter Product tasarım kimliği. orderId ile birlikte kullanmayın. orderIdbir tanımlayıcıCustomizer sipariş kimliği. Yalnızca customizer için geçerlidir. cartKey + cartModehayırYalnızca Customizer’a özel sepet bağlamı. cartMode, view veya edit değerini alır.
Örnek istek (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 } ) ; Notlar
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
} )
} ) ; Örnek yanıt
{
"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
}