Obtén productos, vincúlalos con las herramientas y crea sesiones de integración seguras para Viewer, Configurator y Customizer.
Los ejemplos utilizan la función auxiliar alterFetch del servidor y las cabeceras authHeaders de la guía de conexión. Guarda las claves API únicamente en el servidor.
Conexión, autorización y función auxiliar alterFetch Los endpoints de productos devuelven diseños de la tienda que pueden integrarse como Viewer, Configurator o Customizer.
Parámetro Obligatorio Detalles namenoBusca por nombre del producto/diseño. customizernotrue o false. offsetnoPredeterminado: 0. Debe ser >= 0. limitnoPredeterminado: 9; máximo: 50. order_bynoid, name o created_at. directionnoASC o DESC.
Ejemplo de solicitud (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' ) ; Ejemplo de respuesta
{
"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
}
} Las vinculaciones de herramientas conectan productos de comercio electrónico externos con diseños de Alter Product y tipos de herramientas. Se usan principalmente en integraciones de WordPress/WooCommerce y backends avanzados de tiendas.
Parámetro Obligatorio Detalles designIdnoID de diseño de Alter Product que pertenece a la tienda. externalProductIdsí para sincronizaciónID de producto externo, por ejemplo, un ID de producto de WooCommerce. runtimeTypesí para sincronizaciónviewer, configurator o customizer. statusnodraft, active, inactive, archived o legacy_active. legacyStorefrontProductIdnoID opcional de correspondencia heredada. legacyBindingMetanoMetadatos JSON opcionales, por ejemplo, manifestHash.
Ejemplo de solicitud (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'
}
}
}
]
} )
} ) ; Ejemplo de respuesta
{
"message" : "runtimeBinding.syncCompleted" ,
"runtimeBindings" : [
{
"id" : 42 ,
"designId" : 381 ,
"externalProductId" : "wc_123" ,
"runtimeType" : "customizer" ,
"status" : "active"
}
]
} Crea un token de integración de corta duración desde tu servidor, pásalo al iframe o entorno de ejecución y permite que este llame a bootstrap con un token Bearer.
Parámetro Obligatorio Detalles runtimeBindingIdrecomendadoIdentificador preferido para vinculaciones activas de herramientas. toolobligatorio sin runtimeBindingIddesigner | viewer | configurator | customizer | model-generator toolIdtool: model-generatorID numérico positivo del proyecto local del generador, no su UUID ni el ID del producto WooCommerce. originsíOrigen donde se muestra la integración, por ejemplo, https://yourstore.com. designIdun identificadorID de diseño de Alter Product. No combinar con orderId. orderIdun identificadorID de pedido de Customizer. Solo válido para customizer. cartKey + cartModenoContexto de carrito exclusivo de Customizer. cartMode es view o edit.
Ejemplo de solicitud (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 } ) ; Notas
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
} )
} ) ; Ejemplo de respuesta
{
"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
}