Installation
In order to use DragToShirt you need to set up your server to handle spreadshirt API requests since there is currently no way for direct client-side javascript communication with the spreadshirt API. This is a limitation of the spreadshirt API.
Server side installation involves setting up a proxy that adds the necessary request signature before sending the request to the spreadshirt api and then returning the api response back to the client. It also handles uploading of designs to your spreadshirt shop.
An example proxy written in python (and uses the Flask web framework) is included in the download. DragToShirt should also be compatible with the proxy written in php distributed in the example files of the spreadshirt developer documentation (https://github.com/spreadshirt-dev/spreadshirtapps/blob/master/php/simplomat/src/proxy.php).
For more documentation on how to set up a proxy in any language see http://developer.spreadshirt.net/display/API/Security
Including the javascript and style files in your page
DragToShirt requires jQuery, jQuery UI (it uses the draggable and droppable plugins), and Raphael.js so you must include those files in your page along with the jquery.dragtoshirt.js and dragtoshirt.css files.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="/static/jquery-ui-1.8.12.custom.min.js"></script> <script type="text/javascript" src="/static/raphael-min.js"></script> <script type="text/javascript" src="/static/jquery.dragtoshirt.js"></script> <link rel="stylesheet" href="/static/dragtoshirt.css" type="text/css" />
The jQuery UI and Raphael.js files are included for convenience in the download along with jqery.dragtoshirt.js. Sources from the official pages can also be used (http://jqueryui.com and http://raphaeljs.com/).
Initialization
Initialization should be done as soon as possible because during initialization your Spreadshirt shop data and other data will be pre-cached to make the user experience more responsive. Initialization is where you configure DragToShirt with your shopId, the platform, and the productTypes you wish to offer as options to the user.
<script type="text/javascript"> $.dragToShirt.init({ shopId: 'YOURSHOPID', platform: 'na', // the platform of your shop ('na' or 'eu') productTypes: ['109', '221'], // productTypes that the user can select from when creating a t-shirt }); </script>
Configuration
Here is a list of all available configuration options:
Property | Description | |
---|---|---|
shopId |
Your spreadshirt shop id. Required |
|
platform | 'na' |
Your spreadshirt api key is associated with a specific platform, either 'na' (North America) or 'eu' (European Union). This is set when you apply for your spreadshirt api key. |
productTypes | ['175'] |
An array of product types that the user will be able to select from when creating their t-shirt product. A product type is a t-shirt type before a design has been applied. To get the list of product types that are available in your shop: http://api.spreadshirt.com/api/v1/shops/<shopId>/productTypes or http://api.spreadshirt.net/api/v1/shops/<shopId>/productTypes depending on your platform ('na' for the former, 'eu' for the latter). Note that some product types are not compatible with the print type that DragToShirt uses (may be customizable in later versions), and will output an error message to the user so look out for that. |
proxy | /proxy.php |
The address of your proxy. As mentioned above a proxy on your server is required to make spreadshirt api calls. The proxy setting must point to url endpoint of your proxy. |
targetSize | 100 |
The size in pixels of the product type targets that appear when the user starts dragging an image. |
designerSize | 500 |
The size in pixels of the "designer". The "designer" appears after the user has dragged an image to a product type target. The "designer" is where the user can customize the appearance, select their desired t-shirt size, and fine-tune the location and orientation of the image on the t-shirt before buying the t-shirt. |
overlayZ | 1000 |
The z-index of the overlay. Should be higher than the highest z-index of the elements on your page. |
showName | true |
When set to true, the product type names will be shown to the user when an image dragged over a product type target (BUG: currently doesn't work in IE). |
Activation
Once DragToShirt has been initialized you can make images draggable using jQuery selectors.
$('#gallery img').dragToShirt();
By default, DragToShirt will use the src attribute of the element as the image source to generate the t-shirt. In some cases this may not be desirable. For example, when you're displaying thumbnails on your page, you probably want to generate the t-shirt using the original images and not the thumbnails. In these cases, you can give the img element a dragtoshirt attribute containing the url of the original image, which will override the src value when generating the t-shirt.
<img src="http://example.com/thumbnail.png" dragtoshirt="http://example.com/original.png" />
And that's it!
blog comments powered by Disqus