Hent produkter, knytt dem til verktøyene og opprett sikre innbyggingsøkter for Viewer, Configurator og Customizer.
Eksemplene bruker hjelpefunksjonen alterFetch på serveren og authHeaders-headerne fra tilkoblingsveiledningen. Oppbevar API-nøkler kun på serveren.
Tilkobling, autorisasjon og hjelpefunksjonen alterFetch Produktendepunkter returnerer butikkdesign som kan bygges inn som Viewer-, Configurator- eller Customizer-opplevelser.
Parameter Påkrevd Detaljer nameneiSøker i produkt-/designnavn. customizerneitrue eller false. offsetneiStandard 0. Må være >= 0. limitneiStandard 9, maksimalt 50. order_byneiid, name eller created_at. directionneiASC eller DESC.
Eksempelforespørsel (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' ) ; Eksempelsvar
{
"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
}
} Runtimekoblinger knytter eksterne butikkprodukter til Alter Product-design og runtimetyper. De brukes hovedsakelig i WordPress/WooCommerce-integrasjoner og avanserte butikkbackender.
Parameter Påkrevd Detaljer designIdneiID for Alter Product-design som eies av butikken. externalProductIdja, ved synkroniseringEkstern produkt-ID, for eksempel en WooCommerce-produkt-ID. runtimeTypeja, ved synkroniseringviewer, configurator eller customizer. statusneidraft, active, inactive, archived eller legacy_active. legacyStorefrontProductIdneiValgfri eldre koblings-ID. legacyBindingMetaneiValgfrie JSON-metadata, for eksempel manifestHash.
Eksempelforespørsel (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'
}
}
}
]
} )
} ) ; Eksempelsvar
{
"message" : "runtimeBinding.syncCompleted" ,
"runtimeBindings" : [
{
"id" : 42 ,
"designId" : 381 ,
"externalProductId" : "wc_123" ,
"runtimeType" : "customizer" ,
"status" : "active"
}
]
} Opprett et kortvarig innebyggingstoken på serveren, send det til iframe/runtime, og la runtime kalle bootstrap med et Bearer-token.
Parameter Påkrevd Detaljer runtimeBindingIdanbefaltForetrukket identifikator for aktive runtimekoblinger. toolpåkrevd uten runtimeBindingIddesigner | viewer | configurator | customizer | model-generator toolIdtool: model-generatorPositiv numerisk ID for det lokale generatorprosjektet, ikke prosjektets UUID eller WooCommerce-produktets ID. originjaOrigin der innebyggingen vises, for eksempel https://yourstore.com. designIdén identifikatorAlter Product-design-ID. Ikke kombiner med orderId. orderIdén identifikatorCustomizer-bestillings-ID. Kun gyldig for customizer. cartKey + cartModeneiHandlekurvkontekst kun for Customizer. cartMode er view eller edit.
Eksempelforespørsel (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 } ) ; Merknader
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
} )
} ) ; Eksempelsvar
{
"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
}