... <!-- page content -->
</body>
</html>
{code}
This will create a javascript object *confomat* providing the necessary functions to embed the designer.
h3. Create a new T-Shirt Designer instance
After the confomat-embed.js script has been added to the head section a 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 a 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 application | 980 |
| height | The height of the flash application | 560 |
| themeUrl | A url where confomat will look for a confomat7.swf theme | null |
| parseDeeplinks | Determinates if deeplinks should automatically parsed from the url | true |
| flashVars | Additional flash vars which will be passed to confomat | {} |
| targetId | A 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 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. If 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 the default the Spreadshirt checkout is used. \\
IF the checkoutFunction option is set also the addToBasketFunction option has to be defined. | null |
| generateShareUrlFunction | A function in the form function(productId, viewId) returning a 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 adds #productId=123&viewId=321 | function |
h4. Deeplinks
Deeplinks are parameter which could be specified to bootstrap the T-Shirt Designer in a different way. Deeplinks can be specified as option of the confomat.create function, or be automatically parsed from the location.hash javascript object if the option parseDeeplinks is set to true. The following deeplinks can be specified:
|| Deeplink || Description ||
| designUrl | an url to an image resource that should be placed on the t-shirt |
| 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 |
| designColorRgb1, designColorRgb2, designColorRgb3 | the colors in RGB format used for the layers of the design |
| productId | loads a existing product references by the productId from the shop |
| appearanceId | the id of an appearance which should selected for the deeplinked product-type |
| sizeId | |
| viewId | |
| productTypeId | |
| tx1, tx2, tx3 | |
| textColorRgb, textColor | |
| departmentId | |
| productTypeCategoryId | |
| designCategoryId | |
| designSearch | |
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 influent 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 | 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 shown in Confomat
For partners which have signed a fulfillment contract with Spreadshirt the product prices and print differ from our platform prices. The prices shown in the T-Shirt Designer are the fulfillment prices set up for the partner. Because no provision is granted for theses orders, which will be placed over the Order API the partner has the possibility to add his own provision.
To calculate prices the calculatePriceFunction option has to set during the creation of the Confomat. 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 Designer so that the price has to recalculated. As arguments the functions takes theses parameters:
* product - a javascript object with the following structure
{code:language=javascript}
product = {
price: 123, // the calculated price based on the fulfillment prices without 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 price excluding VAT
},
configurations: [ // a 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 without 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 without VAT
includedCommision: 2, // design commision without 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 without VAT
}
}
}
{code}
* callback - a function in the following form
{code}
function (calculatedPrice) {
}
{code}
The price can calculated either synchron or asynchron.
h4. Calculate the price synchron
To calculate the price synchron return the calculated price within the calculatePriceFunction. The following example shows how to add the 50% to the original price.
{code}
function (product, callback) {
return product.price * 1.5;
}
{code}
h4. Calculate the price asynchron
If the formular to calculate the price is too complexe or needs to be processed on the server the price calculation is asynchron, 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 how the price is calculated delayed.
{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 our T-Shirt Designer in 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 takes to arguments:
* basketItem - a basketItem which should 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 occurred
{code}
h3. Checkout
If a addToBasketFunction is passed as option also the checkout function with the format
{code}
function() {
// called when user in T-Shirt Designer clicks on view basket.
alert('checkout');
}
{code}
needs to be passed. The function is called after the user clicks on view basket in the T-Shirt Designer. You can use javascript code to redirect the user to your checkout page.
h3. Embed without javascript
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}
|