Products – List of Product Templates
Product Template
is the data that describes how to build the UI for a SKU. For example, a template contains the following information:
- how many images you need to supply for a SKU
- what the required sizes are for the supplied images
- what the coordinates are for placing the images
- assets (product renderings) used to draw a realistic preview of what the final product would look like with their respective coordinates
The GET producttemplates
endpoint takes a single argument:
sku
- required - the SKU of the product that you are requesting a template for.
Each API request to the Gooten API must have the RecipeID parameter included in the URL. This is typically used to authenticate to the Gooten API. Please be sure to replace the YourRecipeID
in the example with your proper RecipeID from the Gooten Admin.
This request yields the following response:
{
"Options": [
{
"Name": "string",
"ImageUrl": "string",
"IsDefault": "boolean",
"Category": "string",
"IsPartnerSpecific": "boolean",
"Spaces": [
{
"Id": "string",
"Description": "string",
"Index": "integer",
"DefaultRotation": "integer",
"Layers": [
{
"Id": "string",
"Description": "string",
"Type": "string",
"ZIndex": "integer",
"X1": "integer",
"X2": "integer",
"Y1": "integer",
"Y2": "integer",
"Color": "string",
"BackgroundImageUrl": "string",
"OverlayImageUrl": "string",
"FontName": "string",
"FontSize": "string",
"FontHAlignment": "string",
"FontVAlighment": "string",
"DefaultText": "string"
}
]
}
]
}
]
}
Parsing the Template Data
The response contains an array of templates.
There is a lot going on here. A few notes on what the fields of a template mean:
ImageUrl
is a nice icon of the templateFinalX1 and Etc.
are the coordinates of the image that should be cropped out of the UI and submittedLayers
is an array of layersDesign
layers are ones that include assets to be drawn on the UIImage
layers represent where you should allow the user to draw
So once you have a template, in order to draw the UI, one would:
- create a canvas with a width of the largest X value in the layers and a height of the largest Y value in the layers
- sort the layers using the
ZIndex
- for design layers, paint the UI
- set up your drawing to work only within the
Image
layer coordinates
An example of how to read this information to get a list of required image sizes can be found here.