Embed Spreadshirt T-Shirt Designer into your shop system

compared with
Key
This line was removed.
This word was removed. This word was added.
This line was added.

Changes (43)

View Page History
|| 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. \\
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
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"
},
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}

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}
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}
{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) {
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(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() {
}
{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}