... 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 methode 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 the price displayed in the T-Shirt Designer
|
|
For partners which have signed a fulfillment contract with Spreadshirt the prices for products differ from Spreadshirt's regular consumer prices. The prices displayed in the T-Shirt Designer are those from the fulfillment price list agreed on with the partner. Because the fulfillment prices for products send into Spreadshirt via the fulfillment (order) API do not contain the partner's commission, he has the possibility to add his own surcharge.
|
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) are free of any partner commissions, you have the possibility to add your own surcharge by using the *calculatePriceFunction*.
|
|
To calculate prices for display in the T-Shirt Designer the calculatePriceFunction option *calculatePriceFunction* has to be set for the creation of the confomat instance. The function This function's definition looks the following:
|
{code}
|
function (product, callback) {
|
// calculate prices add your price calculation here
|
} {code}
|
The function will be invoked every time a product change occurs in the T-Shirt Designer and the product price shown is updated. As arguments the functions accepts the following parameters:
|
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:
|
* product - a javascript object with the following structure {code:language=javascript} product = {
|
price: 123, // the your calculated price based on the fulfillment prices (excluding VAT)
|
productType: {
|
id: "6", // the id of the product type, all information regarding this product type can be requested via the API http://api.spreadshirt.(net|com)/api/v1/shops/{shopId}/productTypes/{id}
|
price: 12.9 // the product's fulfillment price (excluding VAT)
|
}, configurations: [ // an array containing all configurations placed on the product type
|
... { type: "text", // type of the configuration text: "Hello", // text written
|
colors: 2, // amount of colors used printType: "14", // id of the print type used for printing
|
price: 3, // calculated price (excluding VAT)
|
perspective: "front" // place where the configuration is placed: "front", "back", "left", "right", "hood_left", "hood_right" },
|
... { type: "design", // type of the configuration designId: "m49000162" // id of the design
|
colors: 2, // amount of colors used printType: "14", // id of the print type used for printing
|
price: 5, // calculated price (excluding VAT)
|
includedCommision: 2, // design commission (excluding VAT)
|
perspective: "back" // place where the configuration is placed: "front", "back", "left", "right", "hood_left", "hood_right" }
|
... ],
|
printTypes: { "14": { // information about the print type 14
|
price: 2.5 // price for the print type (excluding VAT)
|
} }
|
... } {code} * callback - a function in the following form {code} function (calculatedPrice) { }
|
{code}
|
The price can be calculated either *synchronous* or *asynchronous*.
|
h4. Synchronous price calculation
|
To calculate the price synchronously return the your calculated price within the calculatePriceFunction. The following example shows how to add 50% surcharge to the original price.
|
{code}
|
... function (product, callback) { return product.price * 1.5; } {code}
|
h4. Asynchronous price calculation
|
If the formula to calculate the price is very complex or needs to be processed on the server the price calculation is asynchronous, because server requests did not return immediately. The price is removed from the T-Shirt designer until the callback function is invoked with the calculated price. The following example shows a delayed price calculation.
|
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.
|
{code}
|
... function (product, callback) { // do server request here setTimeout(function(){ // server request returns after 1000ms with the price as payload // invoke callback with the price callback(product.price * 2); }, 1000); }
|
{code}
|
h43. Add products to your own basket
|
|
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. The addToBasketFunction This function looks the following
|
{code} function(basketItem, callback) {
|
... } {code} and accepts two arguments: * basketItem - a basketItem which is supposed to be added, with these data {code} basketItem = { appearanceId: "66", // appearance of the created product
|
productId: "1035746759", // id of the product quantity: 1, // quantity
|
shopId: 123456, // your Spreadshirt shop in which the product is available
|
sizeId: 3 // id of the chosen size chosen by the consumer
|
} {code}
|
... * callback - a function which must be invoked after the product is added to the basket {code} callback = function(successfullyAddedToBasket) {
|
}
|
callback(true); // notify the T-Shirt Designer that the product has been added
|
callback(false);// notify the T-Shirt Designer that an error has occurred
|
{code} h3. Checkout
|
If an addToBasketFunction is set as option also the checkoutFunction with the format
|
If an *addToBasketFunction* is set as option also the *checkoutFunction* needs to be set with the format:
|
|
|
{code} function() {
|
... // called when user in T-Shirt Designer clicks on view basket. alert('checkout');
|
} {code}
|
needs to be set. The function *is called after the user clicks on view basket* in the T-Shirt Designer dialog box. You can use javascript code to redirect the user to your checkout page.
|
The function *is called after the user clicks on "View Basket"* button in the T-Shirt Designer's dialog box. You can use javascript code to redirect the user to your own checkout page.
|
|
h3. Embed without javascript - javascript = Error message
|
|
For external embedding of our T-Shirt Designer javascript must be activated. With the following code, you can show a message if javascript isn't available.
|
For external embedding of our T-Shirt Designer javascript must be activated. With the following code, you display a message when javascript is not available in the customers browser.
|
{code:language=xhtml}
|
... <script type="text/javascript"> confomat.create({}); </script> <noscript> <!-- html that will shown by the browser if javascript isn't supported --> Your browser doesn't support javascript, which is necessary to run confomat. </noscript> {code} h1. Examples h2. Embed with Basket {code:language=xhtml} <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Embed Example</title> <script type="text/javascript" src="http://cache.spreadshirt.net/Public/Confomat/Js/confomat-embed.js"></script> <style type="text/css"> body { display: table; border-spacing: 10px; } body > div { display: table-cell; border: 1px solid gray; } h2 { text-align: center; } #basket { padding: 0 10px; min-width: 200px; } </style> </head> <body> <div id="wrapper"> <h2>Design your T-Shirt</h2> <script type="text/javascript"> var _instance; confomat.create({ shopId: 205909, calculatePriceFunction: function(product, callback) { return product.price * 1.2 + product.configurations.length * 2; }, addToBasketFunction: function(item, callback) { // replace with ajax request setTimeout(function(){ // return success to confomat callback(true); // refresh basket content var div = document.createElement("div"); div.innerHTML = '<img src="http://image.spreadshirt.net/image-server/v1/products/' + item.productId + '/views/1" />'; document.getElementById("basket").appendChild(div); }, 1000); }, checkoutFunction: function() { var w = document.getElementById('wrapper'); w.parentNode.removeChild(w); } }, {className: "foo"}, function(err, confomatInstance) { if (err) { err = (err === true ? "Some error occurred" : err); alert(err); } else { _instance = confomatInstance; } }); </script> <noscript> Your browser doesn't support javascript, which is necessary to run confomat. </noscript> </div> <div id="basket"> <h2>Basket</h2> </div> </body> </html> {code}
|