Embed Spreadshirt T-Shirt Designer into your shop system

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.

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

Include our javascript library

To use our library you need to add the following code into the head of your HTML page:

<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>

This will create a javascript object named confomat providing the necessary functions to embed the T-Shirt Designer.

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.

confomat.create({
    shopId: 123456, // your shopId goes here
    addToBasketFunction: function (basketItem, callback) {
        // return success to confomat
        callback(true);
        
        /*
         * use the API of our basket service to add the basket item to the shopping basket
         * learn more: https://developer.spreadshirt.net/display/API/Basket+Resources
         */
    },
    checkoutFunction: function () {
        // redirect to your checkout
    }
});

The complete syntax for confomat.create is 

confomat.create(options, [attributes], [callback]);

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

Options which can be passed to confomat.create()

The following options can be passed to the confomat.create function as object:

Option Description default mandatory
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  
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 
themeUrl: './'

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. 

<?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>
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 to perform your basket logic.
null yes
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.
null yes
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  

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 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.
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

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

Callback function after create completes

After the create method completes the optional callback is invoked, which is in the form

function (err, confomatInstance){
}
  • 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

Calculate price displayed in the T-Shirt Designer

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:

function(product, callback) {
    // add your price calculation here
}

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 
    product = {
price: 123,       // 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)
    }
}
}
  • callback - a function in the following form 
    function (calculatedPrice) {
}

The price can be calculated either synchronous or asynchronous.

Synchronous price calculation

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.

function (product, callback) {
    return product.price * 1.5;
}

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. 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.

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);
}

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. This function looks the following

function(basketItem, callback) {
}

and accepts two arguments:

  • basketItem - a basketItem which is supposed to be added, with these data 
    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 size chosen by the consumer
}
  • callback - a function which must be invoked after the product is added to the basket 
    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

Checkout

If an addToBasketFunction is set as option also the checkoutFunction needs to be set with the format:

function() {
    // called when user in T-Shirt Designer clicks on view basket.
    alert('checkout');
}

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.

Embed without javascript = Error message

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.

<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>

Examples

Embed with Basket

<!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(basketItem, 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/' + basketItem.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>

Labels

confomat confomat Delete
embed embed Delete
external external Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.