...
Spreadshirt provides you as a partner in the context of a fulfillment partnership the opportunity to use the "Spreadshirt T-Shirt Designer" (Confomat) for product creation in your own shopping system. The T-Shirt Designer can be embedded easily and controlled with our javascript wrapper.
{toc:style=disc|indent=20px}
h2. Embed into HTML
To embed the T-Shirt Designer in an HTML page you need to
* include Spreadshirt's javascript file into the head of your HTML page and
* write one line of javascript code inside your page's body
h3. Include our javascript library
To use our library you need to add the following code into the head of your HTML page:
{code}
<html>
<head>
<!-- your own code -->
<script type="text/javascript" src="http://cache.spreadshirt.net/Public/Confomat/Js/confomat-embed.js"></script>
</head>
<body>
<!-- page content -->
</body>
</html>
{code}
This will create a javascript object named *confomat* providing the necessary functions to embed the T-Shirt Designer.
h3. Create a new T-Shirt Designer instance
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.
{code}
confomat.create({
shopId: 123456 // your shop id goes here
});
{code}
The complete syntax for confomat.create is
{code}
confomat.create(options, [attributes], [callback]);
{code}
where
* *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
h4. Options which can be passed to confomat.create()
The following options can be passed to the confomat.create function as object:
|| Option || Description || default ||
| shopId | Required option. Id of the shop for which the confomat should load. | null |
| platform \\ | 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. \\ | 'en_EU' |
| width \\ | The width of the flash application in pixels \\ | 980 |
| 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 |
| {color:#000000}themeUrl{color} | 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 {noformat}themeUrl: './'{noformat} as value. \\
\\
In order to make the theme file available from your server this requires a file called "crossdomain.xml" to be placed in the root directory of your site. \\
{noformat}
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only" />
<allow-access-from domain="*" secure="false"/>
</cross-domain-policy>
{noformat} | null |
| parseDeeplinks | Determines if deeplinks should be parsed automatically from the URL. \\ | true |
| 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. | null |
| addToBasketFunction | A function in the form function(item, callback) which is called when the user clicks the add to basket button. \\
By default the internal basket logic is performed. When the addToBasketFunction option is specified also the checkout function must be specified. \\ | null |
| 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. \\
When the checkoutFunction option is set also the addToBasketFunction option has to be defined. | null |
| 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 | function |
h4. Deeplinks
Deeplinks are parameters which can be specified to bootstrap the T-Shirt Designer in an alternative way. Deeplinks can be *options* of the confomat.create function or *parsed automatically from the location.hash javascript object* when the option parseDeeplinks is set to true. The following deeplinks can be used:
|| Deeplink || Description ||
| 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 productI. |
| 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. \\ |
| productTypeId \\ | 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, \\
i.e. #productTypeId=6&appearanceId=1&tx1=xxxx&tx2=xxxx&tx3=xxxx&textColor=2 |
| 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, \\
i.e. #designSearch=hearts |
h4. Attributes which can be passed to the create function
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:
|| Attribute || Description ||
| class | HTML class attribute for the DOM Element |
| align | alignment left, center or right |
| name | HTML name attribute of the embed tag |
h4. Callback function after create completes
After the create method completes the optional callback is invoked, which is in the form
{code}
function (err, confomatInstance){
}
{code}
* *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
h3. Calculate price displayed in the T-Shirt Designer