- Embed into HTML
- Create a new T-Shirt Designer instance
- Options which can be passed to confomat.create()
- Attributes which can be passed to the create function
- Callback function after create completes
- Calculate price displayed in the T-Shirt Designer
- Add products to your own basket
To embed the T-Shirt Designer in an HTML page you need to
To use our library you need to add the following code into the head of your HTML page:
After the confomat-embed.js script has been added to the head section an object named confomat is registered in the window object. To create a new T-Shirt Designer instance write the following script block into the body of your HTML.
The complete syntax for confomat.create is
- options is an object containing key-value pairs to configuration the confomat behavior
- attributes is an optional object to set the id, classname for the HTML object or embed tag
- and callback which is invoked after the creation of the instance has ended
The following options can be passed to the confomat.create function as object:
|shopId||Required option. Id of the shop for which the confomat should load.||null|
||The platform on which the shop is registered. Possible values are 'EU' or 'NA'||'EU'|
|locale|| The locale defining the language and currency shown inside the T-Shirt Designer.
|| The width of the flash application in pixels
|height||The height of the flash application in pixels Attention: This might cut the T-Shirt Designer flash app at the bottom when value is too low.||560|
|themeUrl|| The URL where the T-Shirt Designer will look for a theme file called "confomat7.swf". The creation of the theme file is handled by your Spreadshirt implementation manager.
i.e. when the theme file is saved to the same directory as the page holding the T-Shirt Designer use
|parseDeeplinks|| Determines if deeplinks should be parsed automatically from the URL.
|flashVars|| Opens the possibility to pass additional flash vars to the T-Shirt Designer.
|targetId||An HTML id acting as placeholder for the flash application. If null is passed the T-Shirt Designer will be displayed right where the script tag is place.||null|
|calculatePriceFunction|| A function in the form function(product, callback) to calculate the price which is shown in the T-Shirt Designer.
By default the internal price calculation is used.
|addToBasketFunction|| A function in the form function(item, callback) which is called when the user clicks the add to basket button to perform your basket logic.
|checkoutFunction|| A function in the form function() which is called when the user clicks the view basket button. By default the Spreadshirt checkout is used.
|generateShareUrlFunction|| A function in the form function(productId, viewId) returning an URL, which will be used to publish the product on facebook, twitter, embed.
The default function will generate the URL from the current URL and add i.e. #productId=123&viewId=321
|designUrl||An URL to an image resource that is supposed to be loaded into the shop and on a blank product-type.|
|designId|| The id of an existing design from the Spreadshirt platform which is supposed to be added to a product at start-up of the T-Shirt Designer.
| designColor1, designColor2, designColor3
||The print color ids for the layer of the desig, i.e. ID:1 => white, ID:2 => black, ...|
|productId||Loads an existing product from the Spreadshirt platform referenced by its productId.|
|appearanceId||The id of a product color in which the deeplinked product type is supposed to be displayed.|
|sizeId|| The id of a size which is supposed to be pre-selected for the deeplinked product type.
|viewId|| The id of a view (front, back,...) which is supposed to be selected for the deeplinked product type.
|| The id of a blank product-type that is not yet existing as a product/article in the Spreadshirt platform.
|tx1, tx2, tx3|| Use #tx1=abc&tx2=def&tx3=ghi in order to directly access up to 3 lines of text on a blank product type.
|textColor|| The id of the color used for text that was added with the parameters tx1-tx3 on a product type with a certain appearance,
|departmentId|| This id identifies the product-type departments and can be used to open the product tab of the T-Shirt Designer in a certain subcategory.
i.e. Men's (ID:1)
|productTypeCategoryId|| This id is less general than the departmentId and identifies a grouping of product-types, i.e. department: Men's > category: Men's T-shirts (ID:24)
|designCategoryId|| Use this id to access your shops design categories and custom design categories you added in your userarea,
i.e. Sports #designCategoryId=1000015
|designSearch|| This parameter lets you perform a search on all Spreadshirt Marketplace designs available in your T-shirt Designer shop,
As second parameter of the confomat.create function, additional attributes can be passed which will influence the embed or object DOM Element. The following parameters are available:
|class||HTML class attribute for the DOM Element|
|align||alignment left, center or right|
|name||HTML name attribute of the embed tag|
After the create method completes the optional callback is invoked, which is in the form
- err is a boolean and true if some error occurred while creating the instance and
- confomatInstance is an object with the following methods
- getId() - a function which will return the HTML id of the confomat instance
- getDomElement() - will return the DOM Element of the document
The product prices for fulfillment partners differ from Spreadshirt's regular consumer prices. The prices displayed in the T-Shirt Designer are those of the fulfillment price list agreed on with the partner and directly connected to your Spreadshirt shop. Since the fulfillment prices for products sent into Spreadshirt via the Order API (fulfillment API) do not contain a commission, you have the possibility to add your own surcharge by using the calculatePriceFunction.
To calculate prices for display in the T-Shirt Designer the option calculatePriceFunction has to be set for the creation of the confomat instance. This function's definition looks the following:
The function will be invoked every time a product change occurs in the T-Shirt Designer and the displayed product price is updated.
As arguments the function accepts the following parameters:
- callback - a function in the following form
The price can be calculated either synchronous or asynchronous.
To calculate the price synchronously return your calculated price within the calculatePriceFunction. The following example shows how to add 50% surcharge to the original price.
If the formula to calculate the price is very complex or needs to be processed on the server the price calculation is asynchronous. The price is not displayed in the T-Shirt Designer until the callback function is invoked with your calculated price. The following example shows a delayed price calculation.
To add products created by the T-Shirt Designer to the basket of your shop system, you have to set the addToBasketFunction as option during the confomat.create process. This function looks the following
and accepts two arguments:
- basketItem - a basketItem which is supposed to be added, with these data
- callback - a function which must be invoked after the product is added to the basket
If an addToBasketFunction is set as option also the checkoutFunction needs to be set with the format: