Developer Documentation

System supported developers customize design tool with Hooks Javascript, PHP

Javascript Hooks

Call Hook

List Hooks

1. load.item.design
   Call when load image of product designParameter: [Image, item]
   • image: Object image
   • item: Object value of image with {top, left, right, height, zIndex}
2. select.item.design
   Call when select one item design (text, cliparts, photo upload…)Parameter: [elment]
   • element: Object
3. unselect.item.design
   Call when unselect one item design (text, cliparts, photo upload…)
   Parameter: [elment]
   • element: Object
4. remove.item.design
   Call when remove designParameter: [elment]
   • element: Object
5. before.create.item.design
   Call before add item designParameter: [elment]
   • element: Object
6. after.create.item.design
   Call after added item design
   Parameter: [elment]
   • element: Object
7. name.add.team.design
   Call when add team name
   Parameter: [elment]
   • element: Object
8. number.add.team.design
   Call when add team number
   Parameter: [elment]
   • element: Object
9. add.layers.design
   Call when add layer of item design (append html in box layers)
   Parameter: [elment]
   • element: Object
10. before.add.text.design
    Call before add text
    Parameter:
    • text: Object with values {text, color, fontSize, fontFamily}
11. after.add.text.design
    Call after added text
    Parameter: [elment]
    • elment: Object
12. size.update.text.design
    Call when change font, size, outline of text
    Parameter: [width, height]
    • width: int
    • height: int
13. align.text.design
    Call when align of text
    Parameter: [elment, type]
    • elment: object
    • type: string [left, right]
14. resize.item.design
    Call when resize text, cliparts, photo upload…
    Parameter: [ui]
    • ul: object {top, left, width, height}
15. rotate.item.design
    Call when rotate text, cliparts, photo upload…
    Parameter: [ui]
    • ul: object {top, left, width, height}
16. move.item.design
    Call when move text, cliparts, photo upload…
    Parameter: [ui]
    • ul: object {top, left, width, height}
17. after.load.design
    Call when load design saved with text, cliparts, photo upload…
    Parameter: [design]
    • design: object
18. change.product.design
    Call when change product design
    Parameter: [product]
    • product: object
19. changeView.product.design
    Call when change views front, back, left, right of product
    Parameter: [elment]
    • elment: object
20. changeColor.product.design
    Call when change color of product design
    Parameter: [elment, index]
    • elment: object
    • index: int
21. before.save.design
    Call when save design
    Parameter: [data]
    • data: object
22. after.save.design
    Call after saved design
    Parameter: [data]
    • data: object

Code examples:

1. Create new file tshirtecommerce/addons/js/custom.js
2. Find your hooks and add your code