DragToShirt is a jQuery plugin that allows you to easily turn a web page into a t-shirt shop. It uses the Spreadshirt api, and allows your visitors to drag images from your site onto t-shirts to generate a product that they can then buy. This is very convenient if you have, for example, an online gallery and you want to make money by making commissions from t-shirt sales. It's designed to be easy to use, customizable, and not require any changes to your current web page design. Please try out the demonstration to see it in action!

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