|
Key
This line was removed.
This word was removed. This word was added.
This line was added.
|
Comment:
Changes (1)
View Page History... Spreadshirt provides partners in the context of a fulfillment partnership the opportunity to use the "Spreadshirt T-Shirt Designer" (Confomat) for product creation in their 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 *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 finishes 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 applicationin pixels \\ | 980 | | height (!) | The height of the flash applicationin pixels \\ | 560 | | {color:#000000}themeUrl{color} | An URL where the T-Shirt Designer will look for a confomat7.swf theme, \\ i.e. './' when the theme is save to the same directory as the page holding the T-Shirt Designer \\ \\ This also requires a 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 | Determinates if deeplinks should be parsed automatically from the URL \\ | true | | flashVars | Additional flash vars which will be passed to confomat - {color:#ff0000}How to use this parameter?{color}\\ | {} | | targetId | An HTML id acting as placeholder for the flash application. \\ If null is passed the script will show the T-Shirt Designer where the script tag is placed | 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 could be specified to bootstrap the T-Shirt Designer in an alternative way. Deeplinks can be specified as option of the confomat.create function, or be parsed automatically from the location.hash javascript object when the option parseDeeplinks is set to true. The following deeplinks can be specified: || Deeplink || Description || | designUrl | An URL to an image resource that is supposed to be added on the product | | designId | The id of an existing design which is added to the product on start up | | designColor1, designColor2, designColor3 \\ | The print color ids for the layer of the design | | productId | Loads an existing product referenced by its productId | | appearanceId | The id of an appearance which is supposed to be selected for the deeplinked product-type | | sizeId | The id of a size which is supposed to be 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 \\ | | tx1, tx2, tx3 | Use #tx1=abc&tx2=def&tx3=ghi in order to access up to 3 lines of text directly \\ | | 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 less general than the departmentId and identifies a group of product-types, \\ i.e. 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 * confomat 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. To calculate prices for display in the T-Shirt Designer the calculatePriceFunction option has to be set for the creation of the confomat instance. The function definition looks the following: {code} function (product, callback) { // calculate prices 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: * product - a javascript object with the following structure {code:language=javascript} product = { price: 123, // the calculated price based on the fulfillment prices excluding VAT productType: { id: "6", // the id of the product type, all information 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 synchron or asynchron. h4. Synchronous price calculation To calculate the price synchronously return the 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. {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} h4. 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 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, // shop in which the product is available sizeId: 3 // id of the chosen size } {code} * callback - a function which must be invoked after the product is added to the basket {code} callback = function(successfullyAddedToBasket) { } callback(true); // notify the Designer that the product has been added callback(false);// notify the Designer that an error has occurred {code} h3. Checkout If an addToBasketFunction is set as option also the checkoutFunction 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. |
| |
... h3. Embed without 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. {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} |