Design Tailor 1.0.0
Design Tailor (DT), is built on most advance technology available today and offer extremely flexible way to customize any kind of product online from your browser.
if you have already have e-commerce shop or looking to start your online business in the web-to-print industry, DT offer you as great tool for your customers for product customization on the fly.
For now DT is available for as jQuery plugin for custom web-shop, developers can use or customize the plugin in the way they want, DT comes along with extensive documentation.
Here are some functions / methods which we used in plugin.
This is the method for initialize Design Tailor plugin.
This method will automatically call, developer don't need to call this manually.
It contain some basic settings, fabric js defaults, social sharing and theme setup methods.
Can found this method in application.js
This is the method for initialize products for customization.
productTitle, productImage, productId, productPrice, productCurrency )
This is the method for load product into Design Tailor editor window.
productTitle
String
The title of the product.
productImage
String
The image url of the product.
productId
Integer
The ID of the product.
productPrice
String
The price of the product.
productCurrency
String
The currency of the product.
productId )
This is the method for load product sub images.
productId
Integer
The ID of the product.
This is the method for save customized product.
This is the method for save customized product.
This is the method for save customized product as SVG.
This is the method for save customized product as PNG.
This is the method for save customized product as JPG.
This is the method for download customized product.
This is the method for download customized product As PDF.
This is the method for print customized product.
quantity )
This is the method for update product quantity.
quantity
Integer
The Quantity Number of the product.
This is the method for add to cart customized product.
url )
This is the method for add shape to product.
This will accept only SVG format.
url
String
The Url of the SVG shape.
[parameters] )
This is the method for add image to product.
This will accept support image/* formats.
[parameters]
Object
An object with the file parameters, you would like to upload on the design.
url )
This is the method for add Image to product.
This will accept image/* format.
url
String
The Url of the Image, that you would like to add on design.
filter = true, filterValue )
This is the method for apply Filter to uploaded Image.
We provide some filters: Grayscale, Sepia, Invert, Emboss, Sharpen.
[filter = true || filter = false]
Boolean
filterValue
String
The Value of the Filter, that you would like to add on design.
text )
This is the method for add QR Code to product.
text
String
The text, that you would like to add by Qr Code.
This is the method for toggle Hand Drawing Mode.
mode )
This is the method for change Hand Drawing Mode.
We provide some hand wrting tools: Pencil, Circle, Spray, Pattern, hline, vline, square, diamond.
mode
String
The mode, that you would like to use by Hand Drawing Tool.
color )
This is the method for change Hand Drawing Color.
color
String
The color, that you would like to use by Hand Drawing Tool.
value )
This is the method for change Hand Drawing Width.
value
Integer
The tool width value, that you would like to use by Hand Drawing Tool.
value )
This is the method for change Hand Drawing Shadow.
value
Integer
The shadow value, that you would like to use by Hand Drawing Tool.
This is the method for add Text on canvas.
This is the method for toggle Text into Curved and Simple mode.
value )
This is the method for change Spacing in Curved Text.
value
Integer
The spacing value, that you would like to use in Curved Text.
value )
This is the method for change Radius in Curved Text.
value
Integer
The radius value, that you would like to use in Curved Text.
value )
This is the method for change Reverse in Curved Text.
value
Integer
The reverse value, that you would like to use in Curved Text.
This is the method for change toggleBold Text.
This is the method for change toggleItalic Text.
This is the method for change toggleUnderline Text.
This is the method for change toggleLinethrough Text.
This is the method for add WordCloud Text.
This is the method for clear all canvas.
This is the method for remove selected object from canvas.
This is the method for deactivate all objects on canvas.
This is the method for Vertical Align selected object on canvas.
This is the method for Horizontal Align selected object on canvas.
This is the method for Forward Align selected object on canvas.
This is the method for Backword Align selected object on canvas.
[object] )
This is the method for Forward Swap an object on canvas.
[object]
Object
An object , you would like to Forward Swap.
[object] )
This is the method for Backword Swap an object on canvas.
[object]
Object
An object , you would like to Backword Swap.
This is the method for view layers on canvas.
This is the method for copy an object on canvas.
This is the method for paste an object on canvas.
This is the method for add default Text on canvas.
This is the method for lock - unlock toggle on canvas.
[object] )
This is the method for lock - unlock toggle on canvas for an object.
[object]
Object
An object , you would like to toggle lock - unlock.
This is the method for flip selected object on canvas.
This is the method for undo added object on canvas.
This is the method for redo added object on canvas.
action )
This is the method for Zoom In - Zoom Out object on canvas.
This will accept two parameters: zoomin , zoomout.
action
String
An action , you would like to apply on selected object.
This is the method for check object locked OR not.
Will return boolean: true , false.
color )
This is the method for fill color in an object on canvas.
color
String
An color code with #tag like: #000000.
value )
This is the method for fill Tint in an object on canvas.
value
String
An Tint value, which you would like to apply on canvas.
This is the method for reset Tint in an object on canvas.
value )
This is the method for toggle Tint in an object on canvas.
value
String
An Tint value, which you would like to apply on canvas.
[object] )
This is the method for delete an object from canvas.
object
Object
An Object, which you would like to delete from canvas.
This is the method for change color scheme of designer.
There will be two values, which you can define in settings.json schema.
Accept two variable values: primaryColor , secondaryColor
message, scroll )
This is the private method, you can use this only in application.js.
message
String
An String, which you would like to display.
scroll
Boolean
An Boolean: true , false. This used for scrollTop window
1. Download the plugin then extract it to a folder on your project root.
2. After that configure 'settings.json' schema by going '/inc/json/settings.json'.
3. In 'settings.json' you will find all settings regarding designer layout, color scheme etc.
4. Then After you need to setting up 'initProducts()' according to appropriate json schema.
5. If you want to add your custom graphics you need to update 'initClipArts()' method.
6. For the 'Fonts' you need to update 'assets/fabric/fabricConstants.js' file.
7. For save designed product this plugin will provice 'SVG' url with 'PDF' and 'PNG' formats.
8. You can use these url and files for 'save' and 'e-commerce' functionality.
9. Designed files you can find in "saved_design" folder in plugin root.
10. For email and saved file configuration you need to edit "inc/save_design.php" file according your project
need. This will send email copy of design to configured email ID.
For use in jQuery there are some 'methods' that you can follow this 'example'.
/********* angular controller ********/
var angularApp = angular.module('ManagerApp', []);
angularApp.controller('ManagerCtrl', ['$scope', function ($scope) {
$scope.updateCustomRequest = function () {
console.log('You Called Angular Js method');
};
}]);
/********* angular controller ********/
---------------------------------------------------------------------------------------
/********* javascript function ********/
function example() {
var scope = angular.element(document.getElementById("MainWrap")).scope();
scope.$apply(function () {
scope.updateCustomRequest();
});
}
/********* javascript function ********/
This is the JSON Schema for init Designer Settings.
{
"status":true,
"settings": {
"notification_messages": {
"GENERAL_ERROR" : "Error. Unknown system response. Controller: ProductController",
"CANVAS_EMPTY": "Select product to perform this action",
"IMAGE_SIZE": "Image is too large (MAX SIZE: 300*300)",
"WORDCLOUD_EMPTY": "Please enter some words for generate wordcloud.",
"TYPE_NUMBER_REQUIRED": "Only numbers is allowed"
},
"request_url": {
"LOAD_PRODUCTS": "dummy_data/products/load_products.json",
"LOAD_PRODUCT_SUB_IMAGES": "dummy_data/products/",
"LOAD_GRAPHICS": "dummy_data/graphics/",
"LOAD_COLOR_SCHEME": "inc/theme.php"
},
"general_settings": {
"loadMore":true,
"graphicsPage" : 1,
"defaultProductId" : 1,
"defaultProductImage" : "dummy_data\/products\/t_shirts\/1.png",
"quantity" : 1,
"defaultPrice" : 210,
"defaultCurrency" : "USD",
"defaultProductTitle" : "Tees Nues",
"qrCode" : "qrcode",
"enter_drawing_mode" : "Enter Drawing Mode",
"drawing_mode_selector" : "Pencil",
"drawing_line_width" : 30,
"drawing_color" : "#000000",
"drawing_line_shadow" : 0,
"primaryColor" : "#64AE11",
"secondaryColor" : "#ffffff",
"graphicsCategory": "Flat Icons",
"graphicsCategories":{
"Flat Icons": "Flat Icons",
"ClipArts": "ClipArts",
"Flags": "Flags",
"Shapes": "Shapes",
"Quotes": "Quotes",
"Badges": "Badges",
"Zodiac": "Zodiac"
},
"productByName": "ASC",
"productByNames":{
"ASC": "ASC",
"DESC": "DESC"
},
"predicate": "name",
"reverse": true
},
"social_settings" : {
"fb_app_id" : 101994476846984
}
},
"message":"Settings Loaded Successfully"
}
This is the JSON Schema for init Products.
{
"status":true,
"products":[
{
"id":1,
"name":"ZT Tees",
"price":210,
"currency":"USD",
"image":"dummy_data/products/t_shirts/1.png",
"sub_images":[
"dummy_data/products/t_shirts/1.png",
"dummy_data/products/t_shirts/1-1.png",
"dummy_data/products/t_shirts/1-2.png",
"dummy_data/products/t_shirts/1-3.png"
],
"description":"Lorium ipsum dolor sit amet"
},
{
"id":3,
"name":"Yix Handbag",
"price":70,
"currency":"USD",
"image":"dummy_data/products/bag/3.png",
"sub_images":[
"dummy_data/products/bag/3.png"
],
"description":"Lorium ipsum dolor sit amet"
},
{
"id":4,
"name":"Greeting Card",
"price":160,
"currency":"USD",
"image":"dummy_data/products/greeting_cards/4.png",
"sub_images":[
"dummy_data/products/greeting_cards/4.png",
"dummy_data/products/greeting_cards/4-1.png"
],
"description":"Lorium ipsum dolor sit amet"
},
{
"id":5,
"name":"Xr Back Cover",
"price":160,
"currency":"USD",
"image":"dummy_data/products/phone_cases/5.png",
"sub_images":[
"dummy_data/products/phone_cases/5.png"
],
"description":"Lorium ipsum dolor sit amet"
},
{
"id":7,
"name":"Cent Mugs",
"price":20,
"currency":"USD",
"image":"dummy_data/products/mugs/7.png",
"sub_images":[
"dummy_data/products/mugs/7.png",
"dummy_data/products/mugs/7-1.png",
"dummy_data/products/mugs/7-2.png"
],
"description":"Lorium ipsum dolor sit amet"
},
{
"id":9,
"name":"GU Wines",
"price":144,
"currency":"USD",
"image":"dummy_data/products/bottles/9.png",
"sub_images":[
"dummy_data/products/bottles/9.png"
],
"description":"Lorium ipsum dolor sit amet"
},
{
"id":10,
"name":"Tx Tees",
"price":460,
"currency":"USD",
"image":"dummy_data/products/t_shirts/10.png",
"sub_images":[
"dummy_data/products/t_shirts/10.png",
"dummy_data/products/t_shirts/10-1.png",
"dummy_data/products/t_shirts/10-2.png"
],
"description":"Lorium ipsum dolor sit amet"
},
{
"id":11,
"name":"X-press Card",
"price":60,
"currency":"USD",
"image":"dummy_data/products/business_card/11.png",
"sub_images":[
"dummy_data/products/business_card/11.png",
"dummy_data/products/business_card/11-1.png"
],
"description":"Lorium ipsum dolor sit amet"
},
{
"id":12,
"name":"Hoodi",
"price":160,
"currency":"USD",
"image":"dummy_data/products/hood/12.png",
"sub_images":[
"dummy_data/products/hood/12.png",
"dummy_data/products/hood/12-1.png"
],
"description":"Lorium ipsum dolor sit amet"
},
{
"id":13,
"name":"Yu Mugs",
"price":90,
"currency":"USD",
"image":"dummy_data/products/mugs/13.png",
"sub_images":[
"dummy_data/products/mugs/13.png"
],
"description":"Lorium ipsum dolor sit amet"
},
{
"id":14,
"name":"Hats",
"price":140,
"currency":"USD",
"image":"dummy_data/products/hats/14.png",
"sub_images":[
"dummy_data/products/hats/14.png",
"dummy_data/products/hats/14-1.png"
],
"description":"Lorium ipsum dolor sit amet"
},
{
"id":15,
"name":"Greeting Card",
"price":20,
"currency":"USD",
"image":"dummy_data/products/greeting_cards/15.png",
"sub_images":[
"dummy_data/products/greeting_cards/15.png",
"dummy_data/products/greeting_cards/15-1.png"
],
"description":"Lorium ipsum dolor sit amet"
}
],
"message":"Products Loaded Successfully"
}
This is the JSON Schema for load Product's Sub Images.
{
"status":true,
"images":[
"dummy_data/products/t_shirts/1.png",
"dummy_data/products/t_shirts/1-1.png",
"dummy_data/products/t_shirts/1-2.png"
],
"message":"Images Loaded Successfully"
}
This is the JSON Schema for load Graphics. For more graphics categories please check dummy_data folder.
{
"status":true,
"page":1,
"loadMore":true,
"data_result":[
"dummy_data/graphics/badges/1.svg",
"dummy_data/graphics/badges/2.svg",
"dummy_data/graphics/badges/3.svg",
"dummy_data/graphics/badges/4.svg",
"dummy_data/graphics/badges/5.svg",
"dummy_data/graphics/badges/6.svg",
"dummy_data/graphics/badges/7.svg",
"dummy_data/graphics/badges/8.svg",
"dummy_data/graphics/badges/9.svg"
],
"message":"Badges Loaded."
}